meguro.es.pdf

Transcript

1. ToDo List 千本ノック 2018.05.22 Meguro.es
2. 古市武尊 (Twitter:@takfjp) インフォ・ラウンジ合同会社 (横浜市都筑区) 所属 地方自治体向けのWEBアプリ開発・オープンデータ活用の仕事 をしています 発表者について
3. 今日発表する事 JS歴約1年の私がいかにして Redux を学んだか ・公式のドキュメントを読んだ ・Udemy の React + Redux コースを受講した ・でも分からないことはわからないまま ・ネット上の ToDo List をいっぱい写経した -> その結果色々な気づきを得た -> 人による実装方法の違い、共通する処理の考え方、アンチパターン、 　公式のドキュメントを理解する足がかりに何本も写経するのが役立った
4. 業務で Redux が必要となった ・SPA内のコンポーネントの受け渡しが複雑になり、親子関係を逸脱して状態を管理する 必要が生まれた ・バケツリレーは辛い・・・ ・dispatch? Reducer? 何のことかワカラン・・・ ・JS 歴約1年で React の基礎もあやしい ・そこで、地道に習得する方法を考えた
5. 第一に、公式のドキュメントがある ・信頼できる情報が全て揃っている ・が、ドキュメントは(大抵)英語 ・ネイティブスピーカーではないので、読むだけでも体力を必要とする ・結果、一項目を読むたびにHPが減少・・・ 気づき：書かれている順序 ≠ 自分が必要としている順序
6. Udemyで講座を受講した ・だいたい2000円。安い！！！ ・外部APIを叩いてホテル検索SPAを作ることができた！ ・が、講義の進むスピードがめちゃめちゃ早い・・・ ・先生のタイプスピードも速い ・IDEやエディタの設定が違うと講義とラグが発生しがち ・終了させるまでに1ヶ月かかった・・・ 気づき：講義レベルが高い->理解しやすいとは限らない
7. そこでToDo List ですよ
8. ToDo Listの良い点 ・日本語でサンプルがたくさん転がっている (Qiitaとかはてなブログ) ・他のライブラリをほとんど必要としない (開発環境の簡略化) ・コード量が少なく、基本を抑えられる ・写経がメインなので、疲れた頭でも学習をある程度進めることができる ・仕組みは単純だが、動くと何となく達成感が生まれる 「ToDo Listには人生の大切な全てのことが詰まってるんだよ(ポロロン)」
9. なぜ何本も作る必要があるのか？( 1 / 2 ) ・同じ ToDo List でも、人によって実装方法はさまざま 　・特に Redux は ActionCreator や Dispatcher の書き方が人によって違う 　・JSの熟練者が作ったもの、初級者が作ったものが入り乱れている 　・それ故に中には綺麗に実装されたものも、アンチパターンになってしまって　　いるも のもある 　-> だが初心者にはその違いがわからない 　-> 故に差異に気づけるように何本も写経する必要があった
10. なぜ何本も作る必要があるのか？( 2 / 2) ・似通ったものをいくつも作ることで書き方を覚える ・ステートレス or ステートフル、Reducer の分割方法など、使い分けどころに対する嗅覚 が次第に身につくようになる ・何本も書いてれば飽きる。そこから、人によってなぜ実装方法が違うのか、考　える力 がつく 　-> 「なんとなく分かる」ことが「より詳しく理解する」ことへの足掛けになる 　-> 公式ドキュメントも頭に入ってくるようになる
11. 学習サイクル 　　　 何本も作る 飽きる 違いに気がつく ドキュメント(公式)が読める 「何が分からないか」 「何がよくない実装なのか」 理解できる
12. 「勘が悪いなあ」と思う前に ・いきなりホームランは打てない ・だから素振りが何回も必要 (ドキュメントを読むなどのインプット) ・実際に球を打つ体験も必要　 ≒ 頭で理解する前に体で(コードを写経して)感覚を掴む ・退屈かもしれないけど、泥臭い基礎の繰り返しも必要 　打った球がゴロだとしても、「打った」という経験が大事なものになる （なお、わたくしは野球未経験者です）
13. ToDo List ノックにおすすめの環境 CodeSandbox (https://codesandbox.io/) create-react-appを標準で選択できるのでローカルを圧迫しなくて済む