バックエンドエンジニア、フロントエンドに入門する/Getting-Started-on-the-Front-End

Transcript

1. Kenji Hashimoto/@_l_ken_l_ バックエンドエンジニア、 フロントエンドに入門する
2. 自己紹介
3. 橋本 健史（株式会社HRBrain） • 23卒のバックエンドエンジニア • HRBrainには2022年7月からインターンとして入社 • GoとPython • 趣味は競プロ • Github: ken-hashimoto • ツイッターは@_l_ken_l_（フォローしてね）
4. 本題
5. 2022年10月
6. 先輩 「橋本さんにはこの機能を担当してもらいます」
7. 先輩 「フロント対応も必要になるんで、 わからないところあれば聞いてくださいね」
8. ワイ 「よっしゃー頑張るやで〜〜〜」
9. 数時間後
10. ワイ 「まじでなんもわからん Propsってなに？State管理？Redux？ CSSってどうやってあてるの？ styled-components？なんやこれ？？」
11. ワイ 「俺は…弱い…；；」
12. ということでフロントを勉強することに
13. やったこと
14. ①読書
15. ①読書（期間：数日） ひとまずざっくりと体系的な知識を取り入れたい
16. ①読書 • JSとReactの基本を学ぶことができた • 今すぐにでも個人開発ができそうな気がしてきた（わりと大事） • フロントの学習の流れを掴むことができた（超大事）
17. ②実践 ①読書
18. ②実践（期間：約3ヶ月） マークシートを題材に選んだ理由 • マークシートはコンポーネントの概念がとりいれやすそう • ただ自分がほしかった できること（ざっくり） • マークシートに表示される選択肢の数、問題数、選択肢の形式の変更 • 選択状態のJSON形式でのインポート、エクスポート • 選択状態の初期化 https://github.com/ken-hashimoto/marksheet-app Reactを使ってマークシートをWeb上で再現した
22. ②実践（期間：約3ヶ月） • 身についた技術 ◦ React Hooksの使用 (useState, useEffect, useContext, useCallback, useMemo, useRef) ◦ styled-componentsの導入 ◦ react-bootstrapの使用 ◦ reduxの使用 ◦ react-routerの導入 ◦ react-selectの導入 ◦ ドラッグ&ドロップを使った行の入れ替えの実装
23. ③読書（再） ①読書 ②実践
24. ③読書（再） • 個人開発で自分の中で理解が足りてない部分が明らかになった • 型の概念が危うかったのでTypeScriptを基礎からしっかり学ぶことに • type-challengesもやってます これ読んでます→
25. 最近はすこしずつフロントタスクも やるようになりました （めちゃめちゃレビュー指摘はくらいますが）
26. おわり 今日の話の内容はQiitaにも書いてるのでよかったら見てみてください。 （記事公開時にはQiitaのトレンド1位になりました）