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
59
インターネットサービスの育て方 / How to Grow and Scale Internet Services
itosho
0
84
打線組という個人サービスを Goで開発している話 / Indie Service Development by Go
itosho
1
180
Components Reconsidered
itosho
1
2.2k
打線組を支える技術 / The Technology Behind Dasengumi
itosho
0
50
組織をスケールさせるためのTech Vision / Connehito Tech Vision for Growing Our Team
itosho
2
640
生きのびるためのインディー開発 / 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
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
技術同人誌をMCP Serverにしてみた
74th
1
650
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
VS Code Update for GitHub Copilot
74th
2
650
XP, Testing and ninja testing
m_seki
3
250
Porting a visionOS App to Android XR
akkeylab
0
470
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
14
5.2k
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
560
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
Thoughts on Productivity
jonyablonski
69
4.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to Ace a Technical Interview
jacobian
278
23k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Why Our Code Smells
bkeepers
PRO
336
57k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
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