Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PHP がフロントエンドエンジニアになってみた // from PHPer to Frontend

PHP がフロントエンドエンジニアになってみた // from PHPer to Frontend

2018/04/25 第125回PHP勉強会東京でのLT資料です

Yoshihide Taniguchi

April 25, 2018
Tweet

More Decks by Yoshihide Taniguchi

Other Decks in Programming

Transcript

  1. • ⾕⼝ 禎英 (@ravelll ) • ~ 2017/12 GMOペパボ株式会社 •

    バックエンドエンジニア(PHP, Ruby) • 2018/1 ~ さくらインターネット株式会社 • フロントエンドエンジニア(Vue.js) • 内定時点で Vue.js 含むフロントの FW ほぼ未経験
  2. • 説明が丁寧+サンプルコードも載っていて
 さほど js を知らなくても読み進められる  • 翻訳されているので英語がつらい⼈でも安⼼ • 最初は「基本的な使い⽅」の項だけでも ‣

    ルーティングは別のライブラリで実現するの がよいとのこと ⇢ Vue Router へ やったこと その1 Vue.js の公式ページのガイドを読む + 写経する
  3. • Vue.js 同様、説明が丁寧+サンプルコードも 載ってるし翻訳もされている • コードは vuejs/awesome-vue リポジトに あるプロダクトを幾つか眺めてみる やったこと

    その2 Vue Router の公式ページのガイドをざっと読む + Vue Router を使っているコードを読んで雰囲気をつかむ ‣ Vue.js のドキュメントに状態管理のための
 ライブラリがどうとか…? ⇢ Vuex へ
  4. • Vue Router 同様、(以下略) • コードは vuejs/awesome-vue (以下略) やったこと その3

    Vuex の公式ページのガイドをざっと読む + Vuex を使っているコードを読んで雰囲気をつかむ ‣ Vue の機構がそれなりに分かった気がするけど
 本当に…? ⇢ 素振りアプリ開発へ
  5. • 習得した知識を確認・補完する • ⾃分では簡単な⽇報アプリ(バックエンドなし、 データの永続化なし) を書いた • このタイミングで Babel 公式の


    Learn ES2015 ページで ES2015 の機能を調 べたりも やったこと その4 Vue, Vue Router, Vuex を使った素振りアプリを書いてみる
  6. • Babel, webpack の役割、設定⽅法を調べ、js をトランス パイルして webpack-dev-server 上で動かすよう設定し てみる •

    vue/awesome-vue にあるリポジトリの package.json や webpack.conf.js を眺めて分からない設定を調べてみ る やったこと その5 作ったアプリに Babel, webpack を導⼊する
  7. 1. Vue.js の公式ドキュメント読む + 写経 2. Vue Router の公式ドキュメント読む +

    写経 3. Vuex の公式ドキュメント読む + 写経 4. サンプルアプリ書く 5. 周辺ツールの公式ドキュメント読む + 設定
  8. 所感2 • Vue を⼀通りやったことで未知の FW やツールなどを 相対的に⾒れるようになった • 「これ Vue

    で⾔うアレで、差はこれじゃん」 • React やりたいんだけど…と⾔いつつも歩き出せてい ない⼈は⼀旦 Vue で動き出すのもその後の学習がスムー ズになって良いですよ *