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-...
Search
ken-hashimoto
June 06, 2023
Programming
1
150
バックエンドエンジニア、フロントエンドに入門する/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
1k
Other Decks in Programming
See All in Programming
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
430
Modular Monolith Go Server with GraphQL Federation + gRPC
110y
1
580
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
120
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
630
Rubyのobject_id
qnighy
6
1.3k
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
1
360
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
660
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
380
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
150
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.6k
Patched fetch did not work
quramy
4
380
Featured
See All Featured
For a Future-Friendly Web
brad_frost
174
9.3k
Building Applications with DynamoDB
mza
90
6k
Building an army of robots
kneath
302
42k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
How to Ace a Technical Interview
jacobian
274
23k
BBQ
matthewcrist
83
9.2k
KATA
mclloyd
27
13k
Six Lessons from altMBA
skipperchong
26
3.4k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Statistics for Hackers
jakevdp
794
220k
Being A Developer After 40
akosma
84
590k
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位になりました)