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
180
バックエンドエンジニア、フロントエンドに入門する/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
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
2
210
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
190
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.4k
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.7k
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
690
NEWT Backend Evolution
xpromx
1
150
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
450
構造化・自動化・ガードレール - Vibe Coding実践記 -
tonegawa07
0
140
MCPで実現できる、Webサービス利用体験について
syumai
6
1.8k
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
670
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
1.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Typedesign – Prime Four
hannesfritz
42
2.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Building an army of robots
kneath
306
45k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
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位になりました)