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
PHP がフロントエンドエンジニアになってみた // from PHPer to Frontend
Search
Yoshihide Taniguchi
April 25, 2018
Programming
1
320
PHP がフロントエンドエンジニアになってみた // from PHPer to Frontend
2018/04/25 第125回PHP勉強会東京でのLT資料です
Yoshihide Taniguchi
April 25, 2018
Tweet
Share
More Decks by Yoshihide Taniguchi
See All by Yoshihide Taniguchi
PHP7.2で始める型宣言
gs3
0
560
ISUCONのすゝめ // OUR ISUCON
gs3
3
1.4k
オブジェクト指向設計とデザインパターンの基礎 / Basics of object oriented design and design pattern
gs3
2
100k
1人から始める大規模Webアプリケーションの言語バージョンアップ / version up PHP in large scale application
gs3
20
5.1k
PHP 5.4 ~ 5.6 での追加機能のおさらいとバージョンアップへの誘い / php54 to 56 and version up
gs3
1
2.4k
あの日見たバグを僕達はまだ公式ドキュメントで見れない / The bug we saw that day
gs3
1
1.5k
ペパボを支える大統一CI基盤と人々
gs3
2
4.1k
PHP 5.3.x のアプリを PHP 7.0.x で動かすためにした n 個のこと
gs3
1
1.6k
今までやってきたこと これからやりたいこと
gs3
0
2.3k
Other Decks in Programming
See All in Programming
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
110
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
10
1.7k
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
500
SODA - FACT BOOK
sodainc
1
820
Javaのルールをねじ曲げろ!禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
nrslib
3
1.9k
ワイがおすすめする新潟の食 / 20250530phpconf-niigata-eve
kasacchiful
0
300
Perlで痩せる
yuukis
1
680
Create a website using Spatial Web
akkeylab
0
250
GoのGenericsによるslice操作との付き合い方
syumai
2
430
AIエージェントによるテストフレームワーク Arbigent
takahirom
0
370
Using AI Tools Around Software Development
inouehi
0
1.2k
機械学習って何? 5分で解説頑張ってみる
kuroneko2828
0
200
Featured
See All Featured
Designing for Performance
lara
609
69k
Into the Great Unknown - MozCon
thekraken
39
1.8k
A better future with KSS
kneath
239
17k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Become a Pro
speakerdeck
PRO
28
5.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Why Our Code Smells
bkeepers
PRO
337
57k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Speed Design
sergeychernyshev
30
990
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Transcript
PHPer が フロントエンドエンジニアに なってみた 第125回 PHP勉強会@東京
バックエンドからほぼ未経験でフロントエンドに転向して 1Q過ごした実体験をベースに、 フロントエンドに⼊⾨するルートの1つを紹介 これから話すこと ねらい 「フロントエンド⼊⾨したいけど何から始めたら良いのか…」 と⼿を出せずにいる⼈を歩き出しやすくする
• ⾕⼝ 禎英 (@ravelll ) • ~ 2017/12 GMOペパボ株式会社 •
バックエンドエンジニア(PHP, Ruby) • 2018/1 ~ さくらインターネット株式会社 • フロントエンドエンジニア(Vue.js) • 内定時点で Vue.js 含むフロントの FW ほぼ未経験
(余談)さくらのフロントエンド…? • 各種サービスのコンパネなど • ⽣態系が多様:Vue.js, React, Ember, Angular... • その他の技術スタックが知りたい⼈はお話しましょう
• ⾊々仕事ありますよ!!ジョイナス!!
本題‛
• ⼊社後は Vue.js でコンパネを再実装するプロジェクトに 参加することが決まり、まずはある程度独習することに ‣ ⾊々分からないことはあるけど Vue.js をやることは 分かったので公式ドキュメントを⾒ることにしよう
⼊社した
Vue.js https://vuejs.org/
• 説明が丁寧+サンプルコードも載っていて さほど js を知らなくても読み進められる • 翻訳されているので英語がつらい⼈でも安⼼ • 最初は「基本的な使い⽅」の項だけでも ‣
ルーティングは別のライブラリで実現するの がよいとのこと ⇢ Vue Router へ やったこと その1 Vue.js の公式ページのガイドを読む + 写経する
Vue Router https://router.vuejs.org/
• Vue.js 同様、説明が丁寧+サンプルコードも 載ってるし翻訳もされている • コードは vuejs/awesome-vue リポジトに あるプロダクトを幾つか眺めてみる やったこと
その2 Vue Router の公式ページのガイドをざっと読む + Vue Router を使っているコードを読んで雰囲気をつかむ ‣ Vue.js のドキュメントに状態管理のための ライブラリがどうとか…? ⇢ Vuex へ
Vuex https://vuex.vuejs.org/
• Vue Router 同様、(以下略) • コードは vuejs/awesome-vue (以下略) やったこと その3
Vuex の公式ページのガイドをざっと読む + Vuex を使っているコードを読んで雰囲気をつかむ ‣ Vue の機構がそれなりに分かった気がするけど 本当に…? ⇢ 素振りアプリ開発へ
• 習得した知識を確認・補完する • ⾃分では簡単な⽇報アプリ(バックエンドなし、 データの永続化なし) を書いた • このタイミングで Babel 公式の
Learn ES2015 ページで ES2015 の機能を調 べたりも やったこと その4 Vue, Vue Router, Vuex を使った素振りアプリを書いてみる
• Babel, webpack の役割、設定⽅法を調べ、js をトランス パイルして webpack-dev-server 上で動かすよう設定し てみる •
vue/awesome-vue にあるリポジトリの package.json や webpack.conf.js を眺めて分からない設定を調べてみ る やったこと その5 作ったアプリに Babel, webpack を導⼊する
• 社内ツール → プロダクトへとコミット • 特に⼤きく困ることなくタスクを消化できた • ここまでで10⽇くらい • 未経験の分野を仕事にするまでの流れとしては
まずまず上⼿くいったのでは?? 〜 そして実践へ… 〜
ルートふりかえり
1. Vue.js の公式ドキュメント読む + 写経 2. Vue Router の公式ドキュメント読む +
写経 3. Vuex の公式ドキュメント読む + 写経 4. サンプルアプリ書く 5. 周辺ツールの公式ドキュメント読む + 設定
だいたい公式、シンプルなルート! もちろん全部無料今から可能! だいたい⽇本語で読める! 必要な事前知識も少なめ!
ところで今⽇はPHP勉強会
こんな書籍がありますぞ
所感 • 「知識のない分野にとりあえず⾝を置いてみる」というのは 学習の戦略として良かった • 余暇での学習に⽐べて否が応でも⻑時間、実践していくこと になるので短期間で知識がつく • 諸般の事情から家で勉強ができない⼈は特に良さそう •
パラダイムの異なる⾔語を学ぶのは良い • いつもの⾔語も他を知ることで異なる視点・視座から⾒れる ようになり解決できる問題が増える
所感2 • Vue を⼀通りやったことで未知の FW やツールなどを 相対的に⾒れるようになった • 「これ Vue
で⾔うアレで、差はこれじゃん」 • React やりたいんだけど…と⾔いつつも歩き出せてい ない⼈は⼀旦 Vue で動き出すのもその後の学習がスムー ズになって良いですよ *
まとめ • フロントエンドの第1歩として Vue(.js|Router|x) の 公式ドキュメントを巡るのは良かったですよ • js ⾃体の知識も少ないところから始めて プロダクト作るところまで10⽇で進めた
• 未経験の分野を仕事にすると勢い良く知識が付きますよ • 家で勉強しづらい⼈は業務で勉強するのも⼿では