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.2k
30代から始めるwebフロントエンド入門
コネヒトマルシェ #2〜webフロントエンド市〜でのLT発表資料です。
itosho
May 18, 2018
Tweet
Share
More Decks by itosho
See All by itosho
Text EditorとしてのWindsurf / Windsurf as a Text Editor
itosho
0
21
インターネットサービスの育て方 / How to Grow and Scale Internet Services
itosho
0
81
打線組という個人サービスを Goで開発している話 / Indie Service Development by Go
itosho
1
170
Components Reconsidered
itosho
1
2.2k
打線組を支える技術 / The Technology Behind Dasengumi
itosho
0
47
組織をスケールさせるためのTech Vision / Connehito Tech Vision for Growing Our Team
itosho
2
630
生きのびるためのインディー開発 / Indie Development to Survive
itosho
0
48
Gopher道場アフターストーリー / Gopher Dojo After Story
itosho
0
140
3分で分かるConnehito Tech Vision / Connehito Tech Vision in 3 minutes
itosho
0
500
Other Decks in Programming
See All in Programming
複数アプリケーションを育てていくための共通化戦略
irof
10
4k
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
130
A comprehensive view of refactoring
marabesi
0
970
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
1
280
XSLTで作るBrainfuck処理系
makki_d
0
210
無関心の谷
kanayannet
0
180
XP, Testing and ninja testing
m_seki
2
120
Select API from Kotlin Coroutine
jmatsu
1
180
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
コード書くの好きな人向けAIコーディング活用tips #orestudy
77web
3
330
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
560
プロダクト開発でも使おう 関数のオーバーロード
yoiwamoto
0
160
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Adaptive Systems
keathley
43
2.6k
Speed Design
sergeychernyshev
31
1k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Scaling GitHub
holman
459
140k
Writing Fast Ruby
sferik
628
61k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A designer walks into a library…
pauljervisheath
206
24k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
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