Tweet
Tweet

Slide 1

Slide 1 text

Kenji Hashimoto/@_l_ken_l_ バックエンドエンジニア、 フロントエンドに入門する

Slide 2

Slide 2 text

自己紹介

Slide 3

Slide 3 text

橋本 健史（株式会社HRBrain） ● 23卒のバックエンドエンジニア ● HRBrainには2022年7月からインターンとして入社 ● GoとPython ● 趣味は競プロ ● Github: ken-hashimoto ● ツイッターは@_l_ken_l_（フォローしてね）

Slide 4

Slide 4 text

本題

Slide 5

Slide 5 text

2022年10月

Slide 6

Slide 6 text

先輩 「橋本さんにはこの機能を担当してもらいます」

Slide 7

Slide 7 text

先輩 「フロント対応も必要になるんで、 わからないところあれば聞いてくださいね」

Slide 8

Slide 8 text

ワイ 「よっしゃー頑張るやで〜〜〜」

Slide 9

Slide 9 text

数時間後

Slide 10

Slide 10 text

ワイ 「まじでなんもわからん Propsってなに？State管理？Redux？ CSSってどうやってあてるの？ styled-components？なんやこれ？？」

Slide 11

Slide 11 text

ワイ 「俺は…弱い…；；」

Slide 12

Slide 12 text

ということでフロントを勉強することに

Slide 13

Slide 13 text

やったこと

Slide 14

Slide 14 text

①読書

Slide 15

Slide 15 text

①読書（期間：数日） ひとまずざっくりと体系的な知識を取り入れたい

Slide 16

Slide 16 text

①読書 ● JSとReactの基本を学ぶことができた ● 今すぐにでも個人開発ができそうな気がしてきた（わりと大事） ● フロントの学習の流れを掴むことができた（超大事）

Slide 17

Slide 17 text

②実践 ①読書

Slide 18

Slide 18 text

②実践（期間：約3ヶ月） マークシートを題材に選んだ理由 ● マークシートはコンポーネントの概念がとりいれやすそう ● ただ自分がほしかった できること（ざっくり） ● マークシートに表示される選択肢の数、問題数、選択肢の形式の変更 ● 選択状態のJSON形式でのインポート、エクスポート ● 選択状態の初期化 https://github.com/ken-hashimoto/marksheet-app Reactを使ってマークシートをWeb上で再現した

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

②実践（期間：約3ヶ月） ● 身についた技術 ○ React Hooksの使用 (useState, useEffect, useContext, useCallback, useMemo, useRef) ○ styled-componentsの導入 ○ react-bootstrapの使用 ○ reduxの使用 ○ react-routerの導入 ○ react-selectの導入 ○ ドラッグ&ドロップを使った行の入れ替えの実装

Slide 23

Slide 23 text

③読書（再） ①読書 ②実践

Slide 24

Slide 24 text

③読書（再） ● 個人開発で自分の中で理解が足りてない部分が明らかになった ● 型の概念が危うかったのでTypeScriptを基礎からしっかり学ぶことに ● type-challengesもやってます これ読んでます→

Slide 25

Slide 25 text

最近はすこしずつフロントタスクも やるようになりました （めちゃめちゃレビュー指摘はくらいますが）

Slide 26

Slide 26 text

おわり 今日の話の内容はQiitaにも書いてるのでよかったら見てみてください。 （記事公開時にはQiitaのトレンド1位になりました）