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. PHPer が
    フロントエンドエンジニアに
    なってみた
    第125回 PHP勉強会@東京

    View full-size slide

  2. バックエンドからほぼ未経験でフロントエンドに転向して

    1Q過ごした実体験をベースに、

    フロントエンドに⼊⾨するルートの1つを紹介
    これから話すこと
    ねらい
    「フロントエンド⼊⾨したいけど何から始めたら良いのか…」
    と⼿を出せずにいる⼈を歩き出しやすくする

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. • ⼊社後は Vue.js でコンパネを再実装するプロジェクトに
    参加することが決まり、まずはある程度独習することに
    ‣ ⾊々分からないことはあるけど Vue.js をやることは

    分かったので公式ドキュメントを⾒ることにしよう
    ⼊社した

    View full-size slide

  6. Vue.js
    https://vuejs.org/

    View full-size slide

  7. • 説明が丁寧+サンプルコードも載っていて

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

    View full-size slide

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

    View full-size slide

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

    ライブラリがどうとか…? ⇢ Vuex へ

    View full-size slide

  10. Vuex
    https://vuex.vuejs.org/

    View full-size slide

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

    本当に…? ⇢ 素振りアプリ開発へ

    View full-size slide

  12. • 習得した知識を確認・補完する
    • ⾃分では簡単な⽇報アプリ(バックエンドなし、
    データの永続化なし) を書いた
    • このタイミングで Babel 公式の

    Learn ES2015 ページで ES2015 の機能を調
    べたりも
    やったこと その4
    Vue, Vue Router, Vuex を使った素振りアプリを書いてみる

    View full-size slide

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

    やったこと その5
    作ったアプリに Babel, webpack を導⼊する

    View full-size slide

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

    まずまず上⼿くいったのでは??
    〜 そして実践へ… 〜

    View full-size slide

  15. ルートふりかえり

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. ところで今⽇はPHP勉強会

    View full-size slide

  19. こんな書籍がありますぞ

    View full-size slide

  20. 所感
    • 「知識のない分野にとりあえず⾝を置いてみる」というのは

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

    View full-size slide

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

    View full-size slide

  22. まとめ
    • フロントエンドの第1歩として Vue(.js|Router|x) の

    公式ドキュメントを巡るのは良かったですよ
    • js ⾃体の知識も少ないところから始めて

    プロダクト作るところまで10⽇で進めた
    • 未経験の分野を仕事にすると勢い良く知識が付きますよ
    • 家で勉強しづらい⼈は業務で勉強するのも⼿では

    View full-size slide