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
330
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
新しいモバイルアプリ勉強会(仮)について
uetyo
1
250
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
270
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
350
AIのメモリー
watany
12
1.2k
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
0
150
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.7k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
710
実践 Dev Containers × Claude Code
touyu
1
120
Reactの歴史を振り返る
tutinoko
1
170
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7.3k
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
DataformでPythonする / dataform-de-python
snhryt
0
150
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
Designing for Performance
lara
610
69k
Fireside Chat
paigeccino
38
3.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
RailsConf 2023
tenderlove
30
1.2k
Done Done
chrislema
185
16k
Docker and Python
trallard
45
3.5k
Building Adaptive Systems
keathley
43
2.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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⽇で進めた
• 未経験の分野を仕事にすると勢い良く知識が付きますよ • 家で勉強しづらい⼈は業務で勉強するのも⼿では