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
9k
30代から始めるwebフロントエンド入門
コネヒトマルシェ #2〜webフロントエンド市〜でのLT発表資料です。
itosho
May 18, 2018
Tweet
Share
More Decks by itosho
See All by itosho
打線組という個人サービスを Goで開発している話 / Indie Service Development by Go
itosho
1
140
Components Reconsidered
itosho
1
1.9k
組織をスケールさせるためのTech Vision / Connehito Tech Vision for Growing Our Team
itosho
2
570
Gopher道場アフターストーリー / Gopher Dojo After Story
itosho
0
130
3分で分かるConnehito Tech Vision / Connehito Tech Vision in 3 minutes
itosho
0
400
CakePHPで学ぶDIコンテナ / Learn a DI Container through CakePHP
itosho
1
1.3k
事業を支える技術選定 / Engineering Decision Making Process For Business
itosho
12
5.3k
Bリーグにおけるホームアドバンテージ / Home Advantage in B.League
itosho
0
2.1k
Deep Module in PHP
itosho
2
10k
Other Decks in Programming
See All in Programming
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
160
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
160
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
Git Lint
bkuhlmann
4
750
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
210
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
220
PHPはいつから死んでいるかの調査
chiroruxx
1
350
Designing for tomorrow's programming workflows
honnibal
PRO
2
120
Code Reviews
bkuhlmann
4
890
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
Snowflakeで眠ったデータを起こそう!
estie
0
110
Netty Chicago Java User Group 2024-04-17
sullis
0
170
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
12
4.6k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Gamification - CAS2011
davidbonilla
76
4.6k
A Tale of Four Properties
chriscoyier
150
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
647
58k
Faster Mobile Websites
deanohume
298
30k
Designing the Hi-DPI Web
ddemaree
276
33k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Unsuck your backbone
ammeep
662
57k
Reflections from 52 weeks, 52 projects
jeffersonlam
344
19k
Web development in the modern age
philhawksworth
202
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