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
48
打線組という個人サービスを Goで開発している話 / Indie Service Development by Go
itosho
1
160
Components Reconsidered
itosho
1
2.1k
打線組を支える技術 / The Technology Behind Dasengumi
itosho
0
42
組織をスケールさせるためのTech Vision / Connehito Tech Vision for Growing Our Team
itosho
2
610
生きのびるためのインディー開発 / Indie Development to Survive
itosho
0
41
Gopher道場アフターストーリー / Gopher Dojo After Story
itosho
0
140
3分で分かるConnehito Tech Vision / Connehito Tech Vision in 3 minutes
itosho
0
460
CakePHPで学ぶDIコンテナ / Learn a DI Container through CakePHP
itosho
1
1.4k
Other Decks in Programming
See All in Programming
『品質』という言葉が嫌いな理由
korimu
0
160
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
SwiftUI Viewの責務分離
elmetal
PRO
0
140
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
sappoRo.R #12 初心者セッション
kosugitti
0
230
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
The Cult of Friendly URLs
andyhume
78
6.2k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Building Your Own Lightsaber
phodgson
104
6.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Raft: Consensus for Rubyists
vanstee
137
6.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
GraphQLの誤解/rethinking-graphql
sonatard
68
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