PHPエンジニアがVue.jsをはじめてみた。

　仕事でPHPを書いているエンジニアの多くは、HTMLやCSS、JavaScriptを触ることも多いと思います。最近まで（今もですが）リッチな動きのWEB画面を作るときは、主にjQueryを用いました。ところが最近ではVue.jsというJavaScriptフレームワークが人気です。Vue.jsは、昔jQueryが登場したときのような勢いがあります。大人気ですね！

Vue.js公式サイト
https://jp.vuejs.org/

Vue Fes Japan 2020
https://vuefes.jp/2020/

　※Vue.jsファンの集まるフェスが2020年11月14日に予定されていましたが、今年は残念ながら開催見送りになってしまいました。

　PHPエンジニアにはReact.js、Angular.js、Vue.jsに興味を持たない人も多かったのですが、Laravelの登場と人気で、それと同時にVue.jsに興味を持つ人が増えました。簡単ですが、Wantedlyのブログを通じて、PHPエンジニア向けのVue.jsネタを何本か書こうと思ってます。

今回はまずVue.jsを書く準備をしようと思います。

まず、エディタはPhpStormよりVSCodeの方が良いかもしれません。

VSCode（Visual Studo Code）
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

　VSCodeを知らない人は少ないと思いますので、ここではインストール方法などは割愛しますが、Vue.jsを書くにあたって機能拡張で「vetur」と「prettier」あたりを入れておくと良いでしょう。シンタックスハイライトや規約に沿ったESLintのフォーマットに自動でしてくれます。

　わたしが入れて良かったなと思った理由の1つは、HTMLの属性ごとに改行してくれる点があったからです。Vue.jsを書くにあたって非常に書きやすかったです。

実際にBootstrap4のNaviバーのHTMLを自動改行させてみましょう。

ソースの元ネタは、
https://getbootstrap.com/docs/4.0/components/navbar/

Bootstrap4のNaviバーのHTML（標準）

よくも悪くも見慣れたHTMLですよね。これを自動改行すると以下のようになります。

Bootstrap4（自動改行ON）

　classやtypeといった属性ごとに改行されて、読みやすくVue.jsでの開発がやりやすくなります。Vue.jsを利用しないPHPエンジニアでもこの改行は、viewでテンプレートエンジンを使用して書く場合にありですね！

僕たちと一緒に学びながら働くPHPエンジニアを大募集しています！