$30 off During Our Annual Pro Sale. View Details »
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
310
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
530
ISUCONのすゝめ // OUR ISUCON
gs3
3
1.3k
オブジェクト指向設計とデザインパターンの基礎 / Basics of object oriented design and design pattern
gs3
2
100k
1人から始める大規模Webアプリケーションの言語バージョンアップ / version up PHP in large scale application
gs3
20
5k
PHP 5.4 ~ 5.6 での追加機能のおさらいとバージョンアップへの誘い / php54 to 56 and version up
gs3
1
2.3k
あの日見たバグを僕達はまだ公式ドキュメントで見れない / The bug we saw that day
gs3
1
1.5k
ペパボを支える大統一CI基盤と人々
gs3
2
4k
PHP 5.3.x のアプリを PHP 7.0.x で動かすためにした n 個のこと
gs3
1
1.5k
今までやってきたこと これからやりたいこと
gs3
0
2.3k
Other Decks in Programming
See All in Programming
tidymodelsによるtidyな生存時間解析 / Japan.R2024
dropout009
1
590
新規学習のハードルを下げる方法とは?/ How to Make Learning Something New Easier?
nobuoooo
1
130
Welcome JSConf.jp 2024
yosuke_furukawa
PRO
0
3.1k
複雑な仕様に立ち向かうアーキテクチャ
myohei
0
130
5分ぐらいで分かる、トリミング機能の作り方
tsutsuitakumi
0
210
コンテンツの主権を守るため(?)、高機能画像CDNからAWS自前対応に乗り換えた話
lengthtail
1
120
Remix on Hono on Cloudflare Workers
yusukebe
2
400
Seamless Flutter Native Integration: FFI & Pigeon - Dreamwalker (JaichangPark / 박제창) @FlutterKaigi2024
itsmedreamwalker
0
120
HTTP compression in PHP and Symfony apps
dunglas
2
1.4k
Full stack testing :: basic to basic
up1
1
880
カンファレンスの「アレ」Webでなんとかしませんか? / Conference “thing” Why don't you do something about it on the Web?
dero1to
2
160
AWS認定資格を勉強した先に何があったか
satoshi256kbyte
2
190
Featured
See All Featured
The Cult of Friendly URLs
andyhume
78
6.1k
The Cost Of JavaScript in 2023
addyosmani
45
6.9k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Rails Girls Zürich Keynote
gr2m
94
13k
Embracing the Ebb and Flow
colly
84
4.5k
The Invisible Side of Design
smashingmag
298
50k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Why Our Code Smells
bkeepers
PRO
334
57k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
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⽇で進めた
• 未経験の分野を仕事にすると勢い良く知識が付きますよ • 家で勉強しづらい⼈は業務で勉強するのも⼿では