学び方を学ぶ [SOFT SKILLS]
SOFT SKILLSはソフトウェア開発者の人生マニュアルと書いてある通りエンジニアにとって必要な考え方や生き抜き方が書かれている。
その中でも印象に残った第3部「学ぶことを学ぼう」で紹介されている独習のテクニックについて紹介する。
- 作者: ジョン・ソンメズ
- 出版社/メーカー: 日経BP社
- 発売日: 2016/06/02
- メディア: Kindle版
- この商品を含むブログ (6件) を見る
効率的な独習の方法
この本では以下の3つのことが独習に重要だと言っている
- どうすれば始められるか - 学び始めるための基本的な知識は何か。
- テーマの幅 - 学ぼうとしているものの規模はどれくらいで、何ができるのか。
- 基礎 - その技術を使うために知っていなければならない基本的なことは何か。
全体像を把握し、必要な部分だけを効率的に学ぼうということ。
言葉にしたら単純な話だが、実際に参考書を買って最初から最後まで読んでしまうことが多い。
パレートの法則でもあるように技術の80%をカバーする20%の知識に絞って学ぶようにしようという話のよう。
独習の10ステップ
80％の効果を引き出す20％の部分を見つけ出し、独習をするために、10のステップに分けて解説している。
- 全体像をつかむ
- スコープを決める
- 成功の基準を決める
- 参考資料を見つける
- 学習プランを作る
- リソースにフィルターをかける
- 使い始められるようにする方法を学ぶ
- 遊び回る
- 役に立つことができるところまで学ぶ
- 教える
1~6は準備、7~10を繰り返して独習を進める。
各項目について解説する。
1. 全体像をつかむ
数時間使い、ネットの記事や、本の目次などをチェックする。
どのようなサブテーマがあり、どれくらいの大きさなのか、全体像をつかむ。
2. スコープを決める
独習に使える時間に合わせてスコープを決める。
例：簡単なアプリを作るために必要なReactJsの基礎を学ぶ
3. 成功の基準を決める
目標が達成できたか判断するための成功の基準を決める。
例：ReactJsを使って簡単なTODOアプリを作ることができる
4. 参考資料を見つける
ブログや本など可能な限り参考になるものをリストアップする。
クオリティは考えずとにかく多く出す。
5. 学習プランを作る
参考資料を見つける で集めた情報を元に自身の学習プランを作る。
本の目次などを参考に自分が達成するべき目標に最短で届くプランにする。
自身で本を書く場合の目次をイメージするのが分かりやすい。
6. リソースにフィルターをかける
参考資料の中から、自身の学習プランにとって最も役立ちそうな内容を持つものを拾い出す
7. 使い始められるようにする方法を学ぶ
環境構築や基本的な「Hello, World」のように簡単に使い始められるところまでを学ぶ。
参考書を全部読んだりする必要はない。
8. 遊び回る
このステップにルールはない。
前ステップで学んだ基礎を元に遊び倒す。
出てきた疑問をリストアップしておく。
9. 役に立つことができるところまで学ぶ
遊び回った時に出た疑問を参考資料を元に解消していく。
そして設定した目標を達成するために進める。
10. 教える
独習の中で必要不可欠なステップ。
人に教えることで自身の知識を整理し、抜けている知識を埋められる。
直接教える以外にも、ブログ、YouTubeなどでもいい。
重要なのは自分が学んだことを、他の人が理解できるように構成すること。
最後に
自分が欲しいアプリやツールを作ったりする時は、似たようなステップを踏んでいたように思う。
次に新しい言語を学ぶ時はこのステップを参考にして、効率よく独習していきたい。
- 作者: ジョン・ソンメズ
- 出版社/メーカー: 日経BP社
- 発売日: 2016/06/02
- メディア: Kindle版
- この商品を含むブログ (6件) を見る
Javascriptでクリップボードにテキストコピーする
TL;DR
const text = 'コピーするテキスト'; const textarea = document.createElement('textarea'); textarea.style.position = 'fixed'; textarea.style.opacity = 0; textarea.value = text; document.body.appendChild(textarea); textarea.select(); document.execCommand('Copy'); document.body.removeChild(textarea);
解説
コピーするテキストが入力されたtextareaを生成してDOMに追加 ※ 改行を含まないならtextareaでなくinput[type=text]でも可能
const text = 'コピーするテキスト'; const textarea = document.createElement('textarea'); textarea.style.position = 'fixed'; textarea.style.opacity = 0; textarea.value = text; document.body.appendChild(textarea);
textareaを選択させexecCommandを使いコピーさせる
textarea.select(); document.execCommand('Copy');
使い終わったtextareaをDOMから削除
document.body.removeChild(textarea);
参考
GitHubとJiraのチケット名とURLをコピーするChromeExtensionを作った
TL;DR
GitHubとJiraのチケット（issue,PR）番号とタイトルとURLをMarkdownか平文で1クリックでコピーできるChromeExtensionを公開しました。
背景
誰かにタスクを振る時や、自分のタスクを共有する時にいちいちチケット名とURLをコピーするのが面倒…
GitHubのissueをコピーできるExtensionはあったのですが、Jiraが無かったので、GitHubとJira両方に対応した一括コピーのChromeExtensionを作って公開しました。
使った言語
Javascript,jQueryとほんの少しのHTML,CSS
実装
チケット番号、タイトルの取得
jQueryでDOMを辿りチケット番号やタイトルを取得
※ GitHub，JiraのDOM構成が変わると死にます
// GitHubからチケット番号、タイトルを取得 function getTitleForGithub() { const h1 = 'h1.gh-header-title'; const title = document.querySelectorAll(`${h1} .js-issue-title`)[0].innerText.trim(); const num = document.querySelectorAll(`${h1} .gh-header-number`)[0].innerText; return `${num}｜${title}`; } // Jira(チケット詳細ページ)からチケット番号、タイトルを取得 function getTitleForJiraBrowse() { const title = document.querySelectorAll('h1.hYXQEK')[0].innerText.trim(); const num = document.querySelectorAll('a.ihyVSq')[0].innerText; return `${num}｜${title}`; } // Jira(一覧ページ)からチケット番号、タイトルを取得 function getTitleForJiraBoard() { const selected = '.ghx-selected'; const title = document.querySelectorAll(`${selected} .ghx-summary`)[0].innerText.trim(); const num = document.querySelectorAll(`${selected} a.ghx-key`)[0].getAttribute('aria-label'); return `${num}｜${title}`;
クリップボードへのコピー
見えない位置に textarea を作りコピーさせる一般的な方法
※ クリップボードを使用するには manifest.jsonに permissions: ['clipboardWrite'] を指定する必要があります。
// textをクリップボードへコピー function execCopy(text) { const textarea = document.createElement('textarea'); textarea.style.position = 'fixed'; textarea.style.opacity = 0; textarea.value = text; document.body.appendChild(textarea); textarea.select(); document.execCommand('Copy'); document.body.removeChild(textarea); }
コードは全てGitHubで見られます。
github.com
コピーする形式
Markdownと平文でコピーできます
Markdown
[<チケット番号>｜<チケット名>](<チケットURL>)
平文
<チケット番号>｜<チケット名> <チケットURL>
おわりに
ブラウザ上での処理を自動化したり簡略化したりするのにChromeExtensionは便利です。
処理がフロントのJs（ChromeExtensionで言うContentJs）だけで済む場合は、ExtensionにしないでもTampermonkeyで簡単に実装できます。
お試しあれ。
Jiraの記法
よく使うJiraの記法をまとめました。
Markdownもどきのようで覚えづらいけど、タイプ数は少なくて済みそうです。
が、、、普通にMarkdownで書きたいものです。
ChromeExtensionでMarkdown To Jiraみたいなの作ったほうが生産性上がりそうな気がしています。
見出し
h1. 見出し1 h2. 見出し2 h3. 見出し3 h4. 見出し4 h5. 見出し5 h6. 見出し6
Markdownの # が増えていくより分かりやすいかも
リスト
順序なしリスト
- リスト1 - リスト2 or * リスト1 * リスト2
Markdownと同じ
ネストをする場合
* リスト1 ** 子リスト1 ** 子リスト2
インデントを下げるのにスペースを開けるMarkdownよりもタイプ数が少なくて済みそう
順序リスト
# リスト1 # リスト2
Markdown(1.) よりタイプ数は少ないけど少し分かりづらい
リンク
[LinkText:https:https://www.yahoo.co.jp/]
こちらもMarkdownよりタイプ数少なめ
参考
Re:dash スプレッドシートにAPIを使用してQueryデータ取得する方法
Redashで作成したQueryをAPIで取得してスプレッドシートで表示する方法を紹介します。
URLの形式だけを必要な場合は
準備
Re:dashのデモサイトを使い説明します。
アカウント登録、ログインを済ませたら次のステップへ
APIのURLを取得
Queryを開きます。 サンプルは下記URLへアクセスしてください。 http://demo.redash.io/queries/6671#table
クエリの結果が表示されます。
[Queryの結果画面]
Show Source をクリック
実行しているSQLのクエリが表示されます。
[Queryの詳細画面]
... -> Show API Key をクリック
API Key, API URLのモーダルが開きます。
[API Key, API URLのモーダル]
Results in CSV format: の項目をコピー
※ 古いバージョンのRe:dashだとここでAPIしか表示されない場合があります。
その場合は次の項目API用のURLを作成 を参考にAPIキーをコピーし自身でAPI用のURLを作成してください。
API用のURLを作成(APIキーのみしが表示されなかった場合)
Results in CSV format: が表示されなかった場合、API Keyをコピーしてください。
API用のURLは下記フォーマットになります。
http://<Re:dashのURL>/api/queries/<クエリの番号>/results.csv?api_key=<APIキー>
今回のサンプルでは
- <Re:dashのURL> -> demo.redash.io
- <クエリの番号> -> 6671
- <APIキー> -> 4DPIRmfFVMW8vJZaYALcRh3LgTkEZdfiAd9WXVnJ
URLはこのようになります。
http://demo.redash.io/api/queries/6671/results.csv?api_key=4DPIRmfFVMW8vJZaYALcRh3LgTkEZdfiAd9WXVnJ
Googleスプレッドシートで読み込み
データの読み込みには IMPORTDATA を使います。
セルには以下の通り設定します。
=IMPORTDATA("http://demo.redash.io/api/queries/6671/results.csv?api_key=4DPIRmfFVMW8vJZaYALcRh3LgTkEZdfiAd9WXVnJ")
データが読み込まれました。
このままでは日付が数値になってしまっているので - A列を選択 - [表示形式] -> [数字] -> [日付]
をして日付に変更しましょう
これで無事スプレッドシートでRe:dashのデータが見られるようになりました。
クエリの更新やデータ反映をする方法
Googleスプレッドシートの IMPORTDATA は数時間おきに更新してくれるようですがタイミングを制御することはできません。
すぐにでも変更を反映したい場合は、一度 IMPORTDATA 内のURLを別のものに変えてから戻すなどすると再読込してくれます。
