<style>
/* basic design */
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6,
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {
font-family: 'Meiryo UI', 'Source Sans Pro', Helvetica, sans-serif, 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic';
text-align: left;
line-height: 1.8;
letter-spacing: normal;
text-shadow: none;
word-wrap: break-word;
color: #444;
}
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {font-weight: bold;}
.reveal h1, .reveal h2, .reveal h3 {color: #2980b9;}
.reveal th {background: #DDD;}
.reveal section img {background:none; border:none; box-shadow:none; max-width: 95%; max-height: 95%;}
.reveal blockquote {width: 90%; padding: 0.5vw 3.0vw;}
.reveal table {margin: 1.0vw auto;}
.reveal code {line-height: 1.2;}
.reveal p, .reveal li {padding: 0vw; margin: 0vw;}
.reveal .box {margin: -0.5vw 1.5vw 2.0vw -1.5vw; padding: 0.5vw 1.5vw 0.5vw 1.5vw; background: #EEE; border-radius: 1.5vw;}
/* table design */
.reveal table {background: #f5f5f5;}
.reveal th {background: #444; color: #fff;}
.reveal td {position: relative; transition: all 300ms;}
.reveal tbody:hover td { color: transparent; text-shadow: 0 0 3px #aaa;}
.reveal tbody:hover tr:hover td {color: #444; text-shadow: 0 1px 0 #fff;}
/* blockquote design */
.reveal blockquote {
width: 90%;
padding: 0.5vw 0 0.5vw 6.0vw;
font-style: italic;
background: #f5f5f5;
}
.reveal blockquote:before{
position: absolute;
top: 0.1vw;
left: 1vw;
content: "\f10d";
font-family: FontAwesome;
color: #2980b9;
font-size: 3.0vw;
}
/* font size */
.reveal h1 {font-size: 5.0vw;}
.reveal h2 {font-size: 4.0vw;}
.reveal h3 {font-size: 2.8vw;}
.reveal h4 {font-size: 2.6vw;}
.reveal h5 {font-size: 2.4vw;}
.reveal h6 {font-size: 2.2vw;}
.reveal section, .reveal table, .reveal li, .reveal blockquote, .reveal th, .reveal td, .reveal p {font-size: 2.2vw;}
.reveal code {font-size: 1.6vw;}
/* new color */
.red {color: #EE6557;}
.blue {color: #16A6B6;}
/* split slide */
#right {left: -18.33%; text-align: left; float: left; width: 50%; z-index: -10;}
#left {left: 31.25%; text-align: left; float: left; width: 50%; z-index: -10;}
</style>
<style>
/* specific design */
.reveal h1 {
margin: 0% -100%;
padding: 2% 100% 4% 100%;
color: #fff;
background: #c2e59c; /* fallback for old browsers */
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 200% 200%;
animation: Gradient 60s ease infinite;
}
@keyframes Gradient {
0% {background-position: 0% 50%}
50% {background-position: 100% 50%}
100% {background-position: 0% 50%}
}
.reveal h2 {
text-align: center;
margin: -5% -50% 2% -50%;
padding: 4% 10% 1% 10%;
color: #fff;
background: #c2e59c; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #64b3f4, #c2e59c); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #64b3f4, #c2e59c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.bad {
color: red
}
</style>
# エンジニアの勉強法 角編
---
## 今日話すこと
私が普段技術を学ぶ際にやっていること、気をつけていることなど。
個人の経験に基づくので、そこから自分似合うものを取り入れるくらいで聞いてください
---
## 学びのステップ
```mermaid
graph LR
知る ---> 試す
試す ---> 使う
試す ---> 知る
使う ---> 知る
```
* 知る: どんな技術があるか知る、どんなものか調べる
* 試す: どうやって使うのか、どう動くのか、自分の手で試す
* 使う: 業務で使う、自分で何か作る
---
## 学習のカテゴリ
* 設計／アーキテクチャ／方法論
* システムやアプリをどう形作るか
* 標準仕様／言語
* 何で作るか
* ライブラリ／実装テクニック
* どう作るか
※ 他にもいろいろあるよ
---
## 知る
文献やドキュメント、教材、勉強会などで知識を取り入れる。
いろいろな情報源にあたるのが重要。個別には誤っていたり偏っていても、複数の情報に当たっていれば補完できる。逆に重複して何度も出てくるものは恐らく本当に重要なこと。
---
### わからなくても諦めない
一度読んでわからなくても、後でまた読んでみる、別むことを調べてまた読んでみる。その時は分からなくても、関連知識がついてから見返すと意味がわかったりする。
---
### 技術全体を知る
技術の手段だけではなく、その技術が使われる理由、定義、作られた経緯を理解するよう意識する。手段だけ学ぶと、視野が狭くなりその手段が行き詰まった時に路頭に迷う。
---
### 英語から逃げない
日本語のものが読みやすいが、英語の方が質の良い情報である場合が多い。翻訳ツールを使えば大体何とかなるので、苦手意識を持たずにアタックした方がいい。
英語文献やドキュメントを翻訳してくれている人には感謝しよう
---
### 書籍
書籍は信頼性の高い情報が高凝集で、知識を得るのに効率がいい。ただし、内容を更新できないので知識が古びていくのが難点。
<br>
* 出版されるまでに内容を精査されているので、設計思想や方法論などを学ぶのにいい。
* 知識が体系的にまとめられているため、言語や標準などを参照するのに便利。ただし、最近は言語も頻繁に改定されるので注意。
* ライブラリやフレームワークなど流行り廃りが早いものは、内容が古くなりやすいのでなるべく新鮮なものを選んでさっさと読む。まとまった内容を摂取できるので入門として使うには便利。
---
### 個人的なオススメなど
* [Clean Architecture](https://www.amazon.co.jp/Clean-Architecture-%E9%81%94%E4%BA%BA%E3%81%AB%E5%AD%A6%E3%81%B6%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%AE%E6%A7%8B%E9%80%A0%E3%81%A8%E8%A8%AD%E8%A8%88-Robert-C-Martin/dp/4048930656)
* [現場で役立つシステム設計の原則](https://www.amazon.co.jp/%E7%8F%BE%E5%A0%B4%E3%81%A7%E5%BD%B9%E7%AB%8B%E3%81%A4%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E8%A8%AD%E8%A8%88%E3%81%AE%E5%8E%9F%E5%89%87-%E5%A4%89%E6%9B%B4%E3%82%92%E6%A5%BD%E3%81%A7%E5%AE%89%E5%85%A8%E3%81%AB%E3%81%99%E3%82%8B%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E6%8C%87%E5%90%91%E3%81%AE%E5%AE%9F%E8%B7%B5%E6%8A%80%E6%B3%95-%E5%A2%97%E7%94%B0-%E4%BA%A8/dp/477419087X)
* [プリンシプル オブ プログラミング](https://www.amazon.co.jp/%E3%83%97%E3%83%AA%E3%83%B3%E3%82%B7%E3%83%97%E3%83%AB-%E3%82%AA%E3%83%96-%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-3%E5%B9%B4%E7%9B%AE%E3%81%BE%E3%81%A7%E3%81%AB%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%91%E3%81%9F%E3%81%84-%E4%B8%80%E7%94%9F%E5%BD%B9%E7%AB%8B%E3%81%A4101%E3%81%AE%E5%8E%9F%E7%90%86%E5%8E%9F%E5%89%87-ebook/dp/B071V7MY82)
* [リーダブルコード](https://www.amazon.co.jp/%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89-%E2%80%95%E3%82%88%E3%82%8A%E8%89%AF%E3%81%84%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AE%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%A7%E5%AE%9F%E8%B7%B5%E7%9A%84%E3%81%AA%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-Theory-practice-Boswell/dp/4873115655/ref=sr_1_1?adgrpid=104281542946&gclid=CjwKCAiAgbiQBhAHEiwAuQ6BknVd5lRxYpMGAgGjpCcTRhJlxGhkkvNH8xIj9qVcleSEOe5sNuZdDBoCoBMQAvD_BwE&hvadid=553864827969&hvdev=c&hvlocphy=1009783&hvnetw=g&hvqmt=e&hvrand=892710247710854654&hvtargid=kwd-334758528225&hydadcr=27298_14478913&jp-ad-ap=0&keywords=%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB+%E3%82%B3%E3%83%BC%E3%83%89&qid=1645165077&sr=8-1)
* [リファクタリング](https://www.amazon.co.jp/%E3%83%AA%E3%83%95%E3%82%A1%E3%82%AF%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0-%E7%AC%AC2%E7%89%88-%E6%97%A2%E5%AD%98%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E5%AE%89%E5%85%A8%E3%81%AB%E6%94%B9%E5%96%84%E3%81%99%E3%82%8B-OBJECT-TECHNOLOGY/dp/4274224546/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=1CJOA40PYS0JB&keywords=%E3%83%AA%E3%83%95%E3%82%A1%E3%82%AF%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0&qid=1645165114&sprefix=%E3%83%AA%E3%83%95%E3%82%A1%E3%82%AF%E3%82%BF%E3%83%AA%E3%83%B3%E3%82%B0%2Caps%2C340&sr=8-1)
* オライリー系
* 定義と実践論が両立していてはずれがない
* パーフェクトシリーズ(パーフェクトJavaScriptなど）
* 網羅的で、言語の入門時にきちんと読み込むといい。忘れた時に見返すにもいい
---
### ネット
一口にネット情報といっても多様性に富むが、概ね更新がしやすく量は多い。反面、質が筆者に依存する部分が大きく、きちんとまとまっているものは限られる。
* 公式のドキュメント
* ライブラリなど使う時は必ず読む。サンプルコードもできれば公式ドキュメントのものを試す。
* Web標準についてはMDNがおすすめ
* 公式のコントリビュータ／実績のある著名人の書いた記事
* それなりに信頼できる。ポジショントークには注意
* 個人ブログ、Qiitaなどの記事
* 玉石混交。参考にする場合は必ず自己責任で検証する。
* 公式の情報などをきちんと引用している記事などはある程度信頼できる印象
---
* Wikipedia
* 用語をとりいれるなどのとっかかりには意外と便利
* 参考情報にあるリンクを探すのによく使う
* 英語版も見てみるといい
* SNSなど
* 最新トピックやセキュリティの情報を拾えたりして便利
* 勉強会の宣伝をしていることもある
* ポジショントークももおいので間に受けすぎない
---
## 試す
知識だけ得ても、試してみないと身につかない。
1. 書いてある通りにやってみる
2. うまくいかないところを調べ直して動かす
3. 動いたものをいじって、何が変わるのか試してみる
---
### 試す時に大事なこと
* クリーンな環境で試す
* 回数をこなす
* 試したことをとっておく
そのために、簡単に試せる環境を持っておくことがとても大事
---
### クリーンな環境で試す
試したいことを実現できる、**クリーンな最小の環境**で試す。
* Javascriptの標準機能 -> .jsファイルを書いてNodeで実行
* ブラウザで動作するライブラリ -> htmlファイルとjsファイルを書いて、軽量開発サーバで起動
* Nuxtへの導入方法 -> `create-nuxt-app`でプロジェクト立ち上げる
既存のプロジェクトに導入したり、他の資産を流用したりすると、
* うまくいかなかった時に原因の切り分けが難しい
* 必要な手順が既に終わっていて、覚えなければいけなかったことを見落とす
などの弊害がある。
クリーンな環境をセットアップすることから覚えると後が伸びる
---
### 回数をこなす
理解を踏まめるためにいろいろなパターンを試したり、反復して試すことは重要。こなした数が経験値になる。
回数をこなすためには、**素早く試しやすい環境**が必要。
* 高速なマシン
* 安定したネットワーク
* 使いやすいIDE
* セットアップツール／手順
などを維持できるようにしておくと、試すのが怖くなくなる。
---
### 試したことをとっておく
凡ゆることを覚えてはおけないので、試したものを取っておくとあとで見返して、前回やったところまですぐ復帰できる。
取っておく手段としては、現状ではGitHubが最高。
* Gitの使い方を覚える(低限commitとpush/pull)
* 試す時に、業務の知識を入れない。関係ないけどやりたいことに読み替えられる情報に置き換える
* ソースは綺麗にしておく
* Readmeで何をしたかったのか、何をしたのか書いておく
---
### うまくいかない時
うまくいかなかった事をどうするかが試すことの真価。
* 公式の情報／サンプルに再度当たり、間違った事をしていないか見直す
* 「よくわからないから」飛ばしている人がたまにいる。無視するくらいならコピペして
* エラーをちゃんと読む。大体の原因は実はエラーに書いてある
* エラーも見慣れないとちゃんと読めないので、最初はわからなくても根気よく読む。
* 公式のIssueなどを検索してみる。自分が困っていることは大体誰かも困っている。
* ソースコードを読む
* 内部で何が起こってるか理解するためには結局ここに行き着く
---
* ブログなどが役に立つこともある。
* 「こうやったら上手く行きました」系は、参考にしてもいいが自己責任。その人の環境でうまくいったと言う記録であって、自分の環境に適用できると言う保証ではない。必ず自分で試す。
* 詳しい人に人に聞く時は、「何をしたいのか」「なにをしたのか」「どうなったのか」を示す
* 最低限ソースコードとスタックトレースは提示する。Issueでも大体求められる。
* エディタをきちんと設定して、コンパイルエラーやLintエラーなどがきちんと表示されるようにしておく。
* コンパイルエラー／Lintエラーは即時修正する癖をつける。無視することに慣れると仕事の現場で泣くことになる
---
## 使う
* 仕事で使う
* 実務で使ってみると、実際にはうまくいかないこともある。それをどうFixさせるか、新しい学びのきっかけになる（調べるに戻る）
* 自分で何か作ってみる
* 技術理解の他に、設計の勉強をしやすいのはこっち
* 外部の制約がないので試してみたい事を何でも試せる
* 人に教える
* 教えるための準備や実際に教えてみると、自分が分かってなかったことに気づく
* 教えた相手が成長して、勉強した事を教えてくれるようになったら嬉しい
{"metaMigratedAt":"2023-06-16T19:40:46.400Z","metaMigratedFrom":"YAML","title":"エンジニアの勉強法 角編","breaks":true,"slideOptions":"{\"theme\":\"white\",\"slideNumber\":\"c/t\",\"center\":false,\"transition\":\"none\",\"keyboard\":true,\"width\":\"93%\",\"height\":\"100%\"}","contributors":"[{\"id\":\"c4cf457c-0b2a-420d-ae31-b359cbbbdc08\",\"add\":11085,\"del\":1675}]"}