Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
meguro.es.pdf
Search
takf
May 22, 2018
0
110
meguro.es.pdf
takf
May 22, 2018
Tweet
Share
More Decks by takf
See All by takf
Denoに入門していきなりAleph.jsを触ってみた
takfjp
0
410
Atomic Design とテストの○○な話
takfjp
2
1.6k
Node.jsのアップグレードで気をつけたこと
takfjp
1
2.3k
FARM スタックに触れてみる
takfjp
0
1k
React Testing Library の Query について整理してみた
takfjp
0
380
React.js 消えるライフサイクルメソッドについて
takfjp
0
110
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
2.9k
React で Stateless Functional Component の書き方を盛大に間違えていた話
takfjp
0
370
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
280
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
93
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Faster Mobile Websites
deanohume
305
30k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Speed Design
sergeychernyshev
24
600
The Language of Interfaces
destraynor
154
24k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Agile that works and the tools we love
rasmusluckow
327
21k
Facilitating Awesome Meetings
lara
49
6.1k
Designing for humans not robots
tammielis
249
25k
Transcript
ToDo List 千本ノック 2018.05.22 Meguro.es
古市武尊 (Twitter:@takfjp) インフォ・ラウンジ合同会社 (横浜市都筑区) 所属 地方自治体向けのWEBアプリ開発・オープンデータ活用の仕事 をしています 発表者について
今日発表する事 JS歴約1年の私がいかにして Redux を学んだか ・公式のドキュメントを読んだ ・Udemy の React + Redux
コースを受講した ・でも分からないことはわからないまま ・ネット上の ToDo List をいっぱい写経した -> その結果色々な気づきを得た -> 人による実装方法の違い、共通する処理の考え方、アンチパターン、 公式のドキュメントを理解する足がかりに何本も写経するのが役立った
業務で Redux が必要となった ・SPA内のコンポーネントの受け渡しが複雑になり、親子関係を逸脱して状態を管理する 必要が生まれた ・バケツリレーは辛い・・・ ・dispatch? Reducer? 何のことかワカラン・・・ ・JS
歴約1年で React の基礎もあやしい ・そこで、地道に習得する方法を考えた
第一に、公式のドキュメントがある ・信頼できる情報が全て揃っている ・が、ドキュメントは(大抵)英語 ・ネイティブスピーカーではないので、読むだけでも体力を必要とする ・結果、一項目を読むたびにHPが減少・・・ 気づき:書かれている順序 ≠ 自分が必要としている順序
Udemyで講座を受講した ・だいたい2000円。安い!!! ・外部APIを叩いてホテル検索SPAを作ることができた! ・が、講義の進むスピードがめちゃめちゃ早い・・・ ・先生のタイプスピードも速い ・IDEやエディタの設定が違うと講義とラグが発生しがち ・終了させるまでに1ヶ月かかった・・・ 気づき:講義レベルが高い->理解しやすいとは限らない
そこでToDo List ですよ
ToDo Listの良い点 ・日本語でサンプルがたくさん転がっている (Qiitaとかはてなブログ) ・他のライブラリをほとんど必要としない (開発環境の簡略化) ・コード量が少なく、基本を抑えられる ・写経がメインなので、疲れた頭でも学習をある程度進めることができる ・仕組みは単純だが、動くと何となく達成感が生まれる 「ToDo
Listには人生の大切な全てのことが詰まってるんだよ(ポロロン)」
なぜ何本も作る必要があるのか?( 1 / 2 ) ・同じ ToDo List でも、人によって実装方法はさまざま ・特に
Redux は ActionCreator や Dispatcher の書き方が人によって違う ・JSの熟練者が作ったもの、初級者が作ったものが入り乱れている ・それ故に中には綺麗に実装されたものも、アンチパターンになってしまって いるも のもある -> だが初心者にはその違いがわからない -> 故に差異に気づけるように何本も写経する必要があった
なぜ何本も作る必要があるのか?( 2 / 2) ・似通ったものをいくつも作ることで書き方を覚える ・ステートレス or ステートフル、Reducer の分割方法など、使い分けどころに対する嗅覚 が次第に身につくようになる
・何本も書いてれば飽きる。そこから、人によってなぜ実装方法が違うのか、考 える力 がつく -> 「なんとなく分かる」ことが「より詳しく理解する」ことへの足掛けになる -> 公式ドキュメントも頭に入ってくるようになる
学習サイクル 何本も作る 飽きる 違いに気がつく ドキュメント(公式)が読める 「何が分からないか」 「何がよくない実装なのか」 理解できる
「勘が悪いなあ」と思う前に ・いきなりホームランは打てない ・だから素振りが何回も必要 (ドキュメントを読むなどのインプット) ・実際に球を打つ体験も必要 ≒ 頭で理解する前に体で(コードを写経して)感覚を掴む ・退屈かもしれないけど、泥臭い基礎の繰り返しも必要 打った球がゴロだとしても、「打った」という経験が大事なものになる (なお、わたくしは野球未経験者です)
ToDo List ノックにおすすめの環境 CodeSandbox (https://codesandbox.io/) create-react-appを標準で選択できるのでローカルを圧迫しなくて済む