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
170
バックエンドエンジニア、フロントエンドに入門する/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
1.3k
Other Decks in Programming
See All in Programming
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
240
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
180
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
980
ふつうの技術スタックでアート作品を作ってみる
akira888
0
220
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
320
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
1k
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
0
130
Benchmark
sysong
0
280
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
480
Featured
See All Featured
Music & Morning Musume
bryan
46
6.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Fireside Chat
paigeccino
37
3.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Writing Fast Ruby
sferik
628
62k
Gamification - CAS2011
davidbonilla
81
5.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Six Lessons from altMBA
skipperchong
28
3.9k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
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位になりました)