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
バックエンドエンジニア、フロントエンドに入門する/Getting-Started-on-the-Front-End
Search
ken-hashimoto
June 06, 2023
Programming
1
130
バックエンドエンジニア、フロントエンドに入門する/Getting-Started-on-the-Front-End
ken-hashimoto
June 06, 2023
Tweet
Share
More Decks by ken-hashimoto
See All by ken-hashimoto
Qiitaトレンド入りの裏側 〜私のブログライティングの方法〜/My-Blog-Writing-Methods
kenhashimoto
7
860
Other Decks in Programming
See All in Programming
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
49
16k
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
7
1.2k
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
470
Let's learn code review
riofujimon
2
630
Fragment Composition of GraphQL
quramy
14
1.7k
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
3
590
Next.js App Router
quramy
14
2.3k
Try creating your own orderedmap
kazamori
1
280
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
400
哲学史とモデリング
tanakahisateru
2
380
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
420
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
590
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
96
10k
What's in a price? How to price your products and services
michaelherold
238
11k
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
GitHub's CSS Performance
jonrohan
1025
450k
Clear Off the Table
cherdarchuk
85
310k
Thoughts on Productivity
jonyablonski
60
3.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Side Projects
sachag
451
41k
A designer walks into a library…
pauljervisheath
201
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
Producing Creativity
orderedlist
PRO
338
39k
Design by the Numbers
sachag
274
18k
Transcript
Kenji Hashimoto/@_l_ken_l_ バックエンドエンジニア、 フロントエンドに入門する
自己紹介
橋本 健史(株式会社HRBrain) • 23卒のバックエンドエンジニア • HRBrainには2022年7月からインターンとして入社 • GoとPython • 趣味は競プロ
• Github: ken-hashimoto • ツイッターは@_l_ken_l_(フォローしてね)
本題
2022年10月
先輩 「橋本さんにはこの機能を担当してもらいます」
先輩 「フロント対応も必要になるんで、 わからないところあれば聞いてくださいね」
ワイ 「よっしゃー頑張るやで〜〜〜」
数時間後
ワイ 「まじでなんもわからん Propsってなに?State管理?Redux? CSSってどうやってあてるの? styled-components?なんやこれ??」
ワイ 「俺は…弱い…;;」
ということでフロントを勉強することに
やったこと
①読書
①読書(期間:数日) ひとまずざっくりと体系的な知識を取り入れたい
①読書 • JSとReactの基本を学ぶことができた • 今すぐにでも個人開発ができそうな気がしてきた(わりと大事) • フロントの学習の流れを掴むことができた(超大事)
②実践 ①読書
②実践(期間:約3ヶ月) マークシートを題材に選んだ理由 • マークシートはコンポーネントの概念がとりいれやすそう • ただ自分がほしかった できること(ざっくり) • マークシートに表示される選択肢の数、問題数、選択肢の形式の変更 •
選択状態のJSON形式でのインポート、エクスポート • 選択状態の初期化 https://github.com/ken-hashimoto/marksheet-app Reactを使ってマークシートをWeb上で再現した
None
None
None
②実践(期間:約3ヶ月) • 身についた技術 ◦ React Hooksの使用 (useState, useEffect, useContext, useCallback,
useMemo, useRef) ◦ styled-componentsの導入 ◦ react-bootstrapの使用 ◦ reduxの使用 ◦ react-routerの導入 ◦ react-selectの導入 ◦ ドラッグ&ドロップを使った行の入れ替えの実装
③読書(再) ①読書 ②実践
③読書(再) • 個人開発で自分の中で理解が足りてない部分が明らかになった • 型の概念が危うかったのでTypeScriptを基礎からしっかり学ぶことに • type-challengesもやってます これ読んでます→
最近はすこしずつフロントタスクも やるようになりました (めちゃめちゃレビュー指摘はくらいますが)
おわり 今日の話の内容はQiitaにも書いてるのでよかったら見てみてください。 (記事公開時にはQiitaのトレンド1位になりました)