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
1週間でReactにほぼ0から入門する
Search
Takashi Udagawa
December 21, 2018
Programming
580
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
1週間でReactにほぼ0から入門する
フロントエンド、ほぼやったことない人がReact.jsに入門するためにやったことのまとめです。
Takashi Udagawa
December 21, 2018
More Decks by Takashi Udagawa
See All by Takashi Udagawa
プロダクトリリースと心理的安全性
udayan28
1
2.1k
初心者に優しい技術記事の見分け方
udayan28
1
220
Other Decks in Programming
See All in Programming
Claude Opus 4.6以後の受託開発エンジニアの変化(Claude Code開発ノウハウ大公開スペシャルbyクラスメソッド)
iidatakuma
1
960
琵琶湖の水は止められてもNet--HTTPのリトライは止められない / You might be able to stop the water flow of Lake Biwa but you can't stop Net::HTTP retries
luccafort
PRO
0
550
ドリフトを絶対に許さない(?)CDK運用 / CDK Ops with Zero Tolerance for Drifts (?)
akihisaikeda
1
170
Claude Code全社展開のためにやったことn選~プラグイン302個・コミッター271人を支えるために~
kenchan
4
1.3k
ビデオ通話が繋がる0.2秒で何が起きているのか
supurazako
2
170
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
sumihiro3
1
650
言語を使う側から、作る側へ。 自作 Lisp で得た新たな気づき。
andpad
0
150
AWS DevOps AgentのAzure接続機能を検証して見えた活用法/Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
masakiokuda
1
210
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
hanhan1978
4
1.7k
Prismを使った型安全な暗号化_関数型まつり2026
_fhhmm
0
170
全PRの83%がAIレビューだけでマージできるようになった開発組織はその後どうなったか
athug
1
1.4k
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
gotalab555
4
1.5k
Featured
See All Featured
Agile Actions for Facilitating Distributed Teams - ADO2019
mkilby
0
240
Leveraging Curiosity to Care for An Aging Population
cassininazir
1
460
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
700
Technical Leadership for Architectural Decision Making
baasie
3
460
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
360
Bash Introduction
62gerente
615
220k
Amusing Abliteration
ianozsvald
1
240
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.3k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
560
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.8k
The Art of Programming - Codeland 2020
erikaheidi
57
14k
A Modern Web Designer's Workflow
chriscoyier
698
190k
Transcript
1週間でReactに ほぼ0から入門する @udayan28 WeJS 2018/12/20
自己紹介 Webエンジニア@Findy できたてホヤホヤエンジニア(1ヶ月弱) 本と映画が好き
話すこと、話さないこと 話すこと どうやってフロントエンドほぼ未経験で React学習までもっていったか 話さないこと 技術の細かいところ
12月某日 エンジニアになれたし、初心者LT申し込むか! 抽選か〜〜〜
当たった!!!
当時の状況 Webエンジニア歴 2週間 Rails完全に理解した! (業務で簡単な実装に四苦八苦) フロントエンドとは???(.erbなら見たことある)
「React完全に理解した!」 まで1週間で持っていきたい (そうしないと発表内容が無い)
やるしかない・・・
なにを???
なんとなく聞いたことあるやつ HTML5とCSS3? JavaScript(ES5以前/ES6以降), TypeScript?? React.js、Vue.js???(jQuery?)
と、とりあえず、 JavaScript!
本屋に行ってみる (本が好きなので・・・)
何を購入して良いのか分からず Webデザイン系の本が多い・・・ 全体的にちょっと古い・・・
ググる
ドキュメントがどこにあるのか 分からない プログラミングスクールの記事や正確なのか分からな い記事がたくさん出てくる・・・ 何が公式ドキュメントなのか・・・ PythonやRubyのように.orgのサイトがない・・・
どうしようもないので Reactへ
とりあえずチュートリアル!
ガイドへの誘導を発見!
Mozillaのドキュメントサイト! 話題のFirefoxのドキュメントだし、信頼できそう HTML, CSS, JavaScript全般が学べる ES6以降の内容も載ってるっぽい!!!
これでいいじゃん!
入り交じる日本語と英語のページ
なんとか入門done
あれ?
ES6は? MDN内の初心者ページには見つけられず・・・
ググる
先人の方々のまとめが!
Reactで多用されるものをざっと読 む let, const アロー関数 Class その他も軽く頭に入れておく
準備は整った!
いざReactチュートリアルへ!
な、なんとなく分かるぞ! JSX(JSに全部突っ込んだやつ) Component (部品) props(投げるやつ) state(投げるやつに入ってるやつ)
チュートリアルdone
React完全に 理解した...?
0からReactへ入門するた めの道筋 MDNのWeb入門を読む (全くの初心者は書籍の方が良いかも) Qiita等でES6以降のJS知識を手に入れつつ、MDN内 でググる Reactチュートリアルをやってみる
感想 結構しんどかった・・・(睡眠不足含め) フロントエンドへの苦手意識が結構消えた(はず) 業務でバリバリ書けるぜ!ではないが、 なんとか調べることはできる! 絶対、Vueの方がわかりやすい(泣)
最後に フロントエンドにどう入門して良いのか分からず、 自分で見つけたひとつの解なので、 もっと良い方法があったら教えてください!
おまけ
この資料を作っていたら Reactからメールが・・・
React Developerへのロードマッ プあるよ!
None
ありがとう ございました!