Tweet
Tweet

Slide 1

Slide 1 text

PHPer が フロントエンドエンジニアに なってみた 第125回 PHP勉強会＠東京

Slide 2

Slide 2 text

バックエンドからほぼ未経験でフロントエンドに転向して
 1Q過ごした実体験をベースに、
 フロントエンドに⼊⾨するルートの1つを紹介 これから話すこと ねらい 「フロントエンド⼊⾨したいけど何から始めたら良いのか…」 と⼿を出せずにいる⼈を歩き出しやすくする

Slide 3

Slide 3 text

• ⾕⼝ 禎英 (@ravelll ) • ~ 2017/12 GMOペパボ株式会社 • バックエンドエンジニア（PHP, Ruby） • 2018/1 ~ さくらインターネット株式会社 • フロントエンドエンジニア（Vue.js） • 内定時点で Vue.js 含むフロントの FW ほぼ未経験

Slide 4

Slide 4 text

（余談）さくらのフロントエンド…？ • 各種サービスのコンパネなど • ⽣態系が多様：Vue.js, React, Ember, Angular... • その他の技術スタックが知りたい⼈はお話しましょう • ⾊々仕事ありますよ！！ジョイナス！！

Slide 5

Slide 5 text

本題‛

Slide 6

Slide 6 text

• ⼊社後は Vue.js でコンパネを再実装するプロジェクトに 参加することが決まり、まずはある程度独習することに ‣ ⾊々分からないことはあるけど Vue.js をやることは
 分かったので公式ドキュメントを⾒ることにしよう ⼊社した

Slide 7

Slide 7 text

Vue.js https://vuejs.org/

Slide 8

Slide 8 text

• 説明が丁寧+サンプルコードも載っていて
 さほど js を知らなくても読み進められる  • 翻訳されているので英語がつらい⼈でも安⼼ • 最初は「基本的な使い⽅」の項だけでも ‣ ルーティングは別のライブラリで実現するの がよいとのこと ⇢ Vue Router へ やったこと その1 Vue.js の公式ページのガイドを読む + 写経する

Slide 9

Slide 9 text

Vue Router https://router.vuejs.org/

Slide 10

Slide 10 text

• Vue.js 同様、説明が丁寧+サンプルコードも 載ってるし翻訳もされている • コードは vuejs/awesome-vue リポジトに あるプロダクトを幾つか眺めてみる やったこと その2 Vue Router の公式ページのガイドをざっと読む + Vue Router を使っているコードを読んで雰囲気をつかむ ‣ Vue.js のドキュメントに状態管理のための
 ライブラリがどうとか…？ ⇢ Vuex へ

Slide 11

Slide 11 text

Vuex https://vuex.vuejs.org/

Slide 12

Slide 12 text

• Vue Router 同様、(以下略) • コードは vuejs/awesome-vue (以下略) やったこと その3 Vuex の公式ページのガイドをざっと読む + Vuex を使っているコードを読んで雰囲気をつかむ ‣ Vue の機構がそれなりに分かった気がするけど
 本当に…？ ⇢ 素振りアプリ開発へ

Slide 13

Slide 13 text

• 習得した知識を確認・補完する • ⾃分では簡単な⽇報アプリ(バックエンドなし、 データの永続化なし) を書いた • このタイミングで Babel 公式の
 Learn ES2015 ページで ES2015 の機能を調 べたりも やったこと その4 Vue, Vue Router, Vuex を使った素振りアプリを書いてみる

Slide 14

Slide 14 text

• Babel, webpack の役割、設定⽅法を調べ、js をトランス パイルして webpack-dev-server 上で動かすよう設定し てみる • vue/awesome-vue にあるリポジトリの package.json や webpack.conf.js を眺めて分からない設定を調べてみ る やったこと その5 作ったアプリに Babel, webpack を導⼊する

Slide 15

Slide 15 text

• 社内ツール → プロダクトへとコミット • 特に⼤きく困ることなくタスクを消化できた • ここまでで10⽇くらい • 未経験の分野を仕事にするまでの流れとしては
 まずまず上⼿くいったのでは？？ 〜 そして実践へ… 〜

Slide 16

Slide 16 text

ルートふりかえり

Slide 17

Slide 17 text

1. Vue.js の公式ドキュメント読む + 写経 2. Vue Router の公式ドキュメント読む + 写経 3. Vuex の公式ドキュメント読む + 写経 4. サンプルアプリ書く 5. 周辺ツールの公式ドキュメント読む + 設定

Slide 18

Slide 18 text

だいたい公式、シンプルなルート！ もちろん全部無料今から可能！ だいたい⽇本語で読める！ 必要な事前知識も少なめ！

Slide 19

Slide 19 text

ところで今⽇はPHP勉強会

Slide 20

Slide 20 text

こんな書籍がありますぞ

Slide 21

Slide 21 text

所感 • 「知識のない分野にとりあえず⾝を置いてみる」というのは
 学習の戦略として良かった • 余暇での学習に⽐べて否が応でも⻑時間、実践していくこと になるので短期間で知識がつく • 諸般の事情から家で勉強ができない⼈は特に良さそう • パラダイムの異なる⾔語を学ぶのは良い • いつもの⾔語も他を知ることで異なる視点・視座から⾒れる ようになり解決できる問題が増える

Slide 22

Slide 22 text

所感2 • Vue を⼀通りやったことで未知の FW やツールなどを 相対的に⾒れるようになった • 「これ Vue で⾔うアレで、差はこれじゃん」 • React やりたいんだけど…と⾔いつつも歩き出せてい ない⼈は⼀旦 Vue で動き出すのもその後の学習がスムー ズになって良いですよ *

Slide 23

Slide 23 text

まとめ • フロントエンドの第1歩として Vue(.js|Router|x) の
 公式ドキュメントを巡るのは良かったですよ • js ⾃体の知識も少ないところから始めて
 プロダクト作るところまで10⽇で進めた • 未経験の分野を仕事にすると勢い良く知識が付きますよ • 家で勉強しづらい⼈は業務で勉強するのも⼿では