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
30代から始めるwebフロントエンド入門
Search
itosho
May 18, 2018
Programming
20
9.1k
30代から始めるwebフロントエンド入門
コネヒトマルシェ #2〜webフロントエンド市〜でのLT発表資料です。
itosho
May 18, 2018
Tweet
Share
More Decks by itosho
See All by itosho
インターネットサービスの育て方 / How to Grow and Scale Internet Services
itosho
0
65
打線組という個人サービスを Goで開発している話 / Indie Service Development by Go
itosho
1
170
Components Reconsidered
itosho
1
2.1k
打線組を支える技術 / The Technology Behind Dasengumi
itosho
0
45
組織をスケールさせるためのTech Vision / Connehito Tech Vision for Growing Our Team
itosho
2
620
生きのびるためのインディー開発 / Indie Development to Survive
itosho
0
46
Gopher道場アフターストーリー / Gopher Dojo After Story
itosho
0
140
3分で分かるConnehito Tech Vision / Connehito Tech Vision in 3 minutes
itosho
0
480
CakePHPで学ぶDIコンテナ / Learn a DI Container through CakePHP
itosho
1
1.5k
Other Decks in Programming
See All in Programming
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
1
110
Ruby's Line Breaks
yui_knk
2
910
メモリウォールを超えて:キャッシュメモリ技術の進歩
kawayu
0
1.9k
5年間継続して開発した自作OSSの記録
bebeji_nappa
0
200
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
1k
Develop Faster With FrankenPHP
dunglas
2
3.3k
RubyKaigi Dev Meeting 2025
tenderlove
1
130
AI時代の開発者評価について
ayumuu
0
150
Unlock the Potential of Swift Code Generation
rockname
0
250
[NG India] Event-Based State Management with NgRx SignalStore
markostanimirovic
1
150
gen_statem - OTP's Unsung Hero
whatyouhide
1
200
Being an ethical software engineer
xgouchet
PRO
0
210
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Visualization
eitanlees
146
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
KATA
mclloyd
29
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
13
670
For a Future-Friendly Web
brad_frost
176
9.7k
Fireside Chat
paigeccino
37
3.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
Practical Orchestrator
shlominoach
186
10k
Transcript
30代から始めるwebフロントエンド入門 コネヒトマルシェ #2〜webフロントエンド市〜 @itosho 1
▪ 自己紹介 ・伊藤 翔 / @itosho ・所属:コネヒト株式会社 / Supership株式会社 ・野球とアイドルが好きです。
・最近のオススメ:sora tob sakana 先日メジャーデビュー
▪ 自己紹介 ・伊藤 翔 / @itosho ・所属:コネヒト株式会社 / Supership株式会社 ・野球とアイドルが好きです。
・最近のオススメ:sora tob sakana 先日メジャーデビュー ・主にサーバーサイドエンジニアをやっています。 ・よく書く言語:PHP / Ruby / Golang
_人人人人人人人人人人人人人人_ > サーバーサイドエンジニア <  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄ 4
▪ 今日話すこと ・いかにしてwebフロントエンドを学んだか ・JavaScriptがメインです。 ・新しい技術を覚える時に必要な心構え ・誰かの背中を押せるLTが出来ればいいなと思っています! ・今日話さないこと ・具体的な実装の話 ・そもそもの技術選定の話 ・アイドルの話(懇親会で!)
▪ 前提 ・ぼくのwebフロントエンド遍歴 ・27〜28歳くらいまでjQueryをちょくちょく書いていた。 ・ここ数年はWeb APIの開発が多く、ほとんど書いていない。 ・コネヒト社のwebフロントエンド技術スタック ・React ・webpack ・Flux
Utils ・Flow
▪ 入門前のぼく ・webフロントエンドの潮流は速いとはよく言うけど… ・バズった記事くらいは読んでたし! ・言うて全く書いたことないわけではないし! ・それなりにエンジニアとして経験も積んできたし! ・ググったらなんとかなるやろー(ハナホジー
8 ES2016 ES2015 Babel webpack React Yarn Vue.js Flux Redux
Flux Utils Prettier Flow TypeScript Gulp Virtual DOM JSX ▪ ググった結果
9 ES2016 ES2015 Babel webpack React Yarn Vue.js Flux Redux
Flux Utils Prettier Flow TypeScript Gulp Virtual DOM JSX ▪ ググった結果 (゚A゚;)ゴクリ
コ、コードみればなんとかなるやろ…(震え声) 10
1 ▪ コードみた結果
1 ▪ ぼくの知っているJavaScript
1 ▪ コードみた結果 \(^o^)/オワタ
「ちゃんと」学ばなきゃ! 14
▪ ちゃんと学ぶための三原則 ①片手間でやらない ②学び方を理解するまで学ぶ ③変なプライドを捨てる
①片手間でやらない 16
1 ▪ ①片手間でやらない ・前提として、webフロントエンドを片手間で書ける時代は遥か昔 に終わっている。 ・自分のスキルを勘違いしない ・歳をとると知らず知らずのうちに勘違いしてる可能性がある ・初心を忘れず、覚悟を持って学ぶ必要がある。
1 ▪ 具体的にやったこと ・初心者向けの本を読む。 ・新しい言語を学ぶときと同じように。 ・意外に忘れてることがある。 ・毎日少しでもいいのでコードを書く。 出典:エビングハウスの忘却曲線を利用した超効率的復習法! http://xn--qck0d2a9as2853cudbqy0lc6cfz4a0e7e.xyz/study/ebbinghaus
②学び方を理解するまで学ぶ 19
2 ▪ ②学び方を理解するまで学ぶ ・とは言え、webフロントエンドはサーバーサイドに比べると変化 が速く、覚えることも多い。 ・自分の頭の中に全てを詰め込むのは不可能。 ・そもそも10代の頃のような記憶力はもうない ・何が分かっていて何が分からないのか、そして、それをどうやっ て分かるようにするかを学ぶ必要がある。
2 ▪ 具体的にやったこと ・分からないことを一個ずつ分解する。 ・そして、それが何者なのかを調べる。 ・詳細は分からなくても、何者かが分かるようになれば何とかなる。 【例】export default class EmptyState
extends AbstractComponent<Props, State> ・頭の中にindexだけ作って、実際の知識はインターネットから 取ってくるイメージ ・自分の頭は有限だけどインターネットは無限 ・調べ方だけ分かっていれば何とかなる ・多言語からの応用も可能!
2 ▪ 具体的にやったこと ・勝手に先生をつくる ・界隈で有名な人の記事や発表をウォッチする ・ぼくの場合は Stoyan Stefanov さんを先生に ・facebookのエンジニア
・『Reactビギナーズガイド』(オライリージャパン)の作者 ・YouTubeにカンファレンスの動画がけっこうある
③変なプライドを捨てる 23
2 ▪ ③変なプライドを捨てる ・聞くは一時の恥聞かぬは一生の恥 ・歳をとると、いつの間にか人に訊くのが恥ずかしくなる ・自尊心を捨てて、分からないことは恥ずかしがらず素直に訊い たほうが圧倒的に習得が速い。 ・もちろん、訊き方には気をつける必要はある。 ・訊けるようになることからはじまることがいっぱいある。 ・この発表もある意味、変なプライドを捨てるための一環
・無知な自分を曝け出す感じ辛いけど成長するためには必要
結果 25
2 ES2015 / ES2016 標準仕様及びバージョン ▪ ググっても React / Vue.js
ライブラリ, フレームワーク Gulp / Babel / webpack タスクランナー, トランスパイラ, ビルドツール Flux アーキテクチャ Flux Utils / Redux Fluxの具体的な実装 Flow / TypeScript 型チェッカー Yarn Gemみたいなパッケージ管理ツール Prettier gofmtみたいなフォーマッタ JSX / Virtual DOM 主にReactで使われるテンプレートエンジン 及びそれを実現する概念
2 ▪ コードみても
分かる、分かるぞ! 28
▪ でも自分だけの力では出来なかった ・社内のメンバーにいっぱい助けられたぞ! @dachi023 ・React勉強会を開催してくれた! ・ペアプロしてくれた! ・いっぱいコードレビューしてくれた! @supermanner ・同じような立場で一緒にReactやってくれて、心強かった!
▪ まとめ ・タイトルに30代ってつけたけど、何かをはじめるのに年齢は関 係ない! ・謙虚な気持ちと向上心さえあれば大丈夫。 ・新しいことを覚えるのは愉しい。 ・先生や仲間が近くにいるともっと愉しい! ・とは言え、まだ入門したばかりなので、これからもっと頑張って もっと成長いくぞ
ご清聴ありがとうございました 31