こんにちは、フロントエンドエンジニアのライダーです。
ひと昔前は「フロントエンドは技術の進歩や流行が早い」といわれていましたが、それもずいぶんと落ち着いてきた気がしています（一方で、最近デザインツールめっちゃ出てない……？）。
突然ですが、今回はタイトルにもある通り「Vue.js」に助けてもらったという話をしたいと思います。
目次
なんとなく悶々としていた
入社1年目の当時、僕はしばらく悶々としていました。その理由をあえて言語化すると、「なんか流行りに乗れてなさそう 」という、とてもとても表面的なものでした。主にフロントエンド技術周りの話です。
LIGのWeb事業部は主軸に受託のWeb制作を置き、事業を展開しています。
作るものは主にWebサイトです。コーポレートサイトやメディアサイト、キャンペーンサイトなどなど……、その種類は多岐に渡りますが、ほとんどがWordPressサイト。コーディング時に、 フロントエンド フレームワーク論争にあがるようなライブラリやフレームワークがフロントエンドとして採用されることはあまり多くはありません。
とはいえ、それを使わなくてもいいWebサイトをたくさん作っている自負はあります。というか、そもそもこれは技術選定の話であって、プロダクトそのものの良し悪しの話ではありません。
……そんなことわかってはいるんですが、「で、でも……！ わかってるけど……！」 と、僕は少し悶々としていました。
「Vue.js」の差し出す手を掴んだ
そんな悶々とした日々を送っていた僕に手を差し伸べてくれたのが、Vue.jsでした。
Vue (発音は/vjuː/、viewと同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。
（引用元：https://jp.vuejs.org/v2/guide/index.html）
Vue.jsは日本語のドキュメントやコミュニティが整っており、とっつきやすいフレームワークだとよく言われます。僕もまったくその通りだと思っていて、環境を作るのに便利なVue CLIもさることながら、ドキュメントの充実度とユーザーフレンドリーなコミュニティ運営は特筆すべきものです。
ドキュメント
公式ドキュメントの充実っぷり、本当にすごいですよね。言語数が多いだけでなく、ちゃんとした日本語になっているのでヘンに惑わされることもありません。Vue.js本体はもちろん、多くの周辺技術のドキュメントもしっかり整備されているのでありがたい……。とっかかりやすさは本当にナンバーワンだったと思います。
また、個人的に思っていることなのですが、Vue.jsのドキュメントってすごくわくわくするんですよね。
公式ドキュメント内のサンプルを見ていると、わかりやすく軽妙な文体で書かれているし、iframeによって動かせるようになっていたりするし、とにかく見ているだけでおもしろい！ 何かを始める上で、このわくわくする気持ちってすごく大事ですよね。
コミュニティ
Vue.jsの日本コミュニティがSlackにあるのですが、その場で一度質問を投げたことがありました。すると5分もしないうちに回答を頂けて、問題は無事解決。
こうしたサービスはもちろんVue.jsに限った話ではないでしょうが、僕のような初学者には心強いし、とても嬉しいことです。また、こうしたコミュニティで発言するのってどうしても敷居が高いイメージがありますが、だれでも気軽に発言しやすい雰囲気をコミュニティ運営の方々がうまく作ってくださっていると思います。
Vue CLI のとっつきやすさ
Vue CLIでプロジェクトを作成すると次のようなコンポーネントを表すファイルがみられます。上からそのコンポーネントのHTML、JavaScript,、CSSを書く場所になっています。
その拡張子は `.js` ではなく `.vue` で、これでもかというほどシンプル。
<tempalte>
<!-- ここに HTML をかく -->
</template>
<script>
// ここに JavaScript をかく
</script>
<style>
/* ここに CSS をかく */
</style>「コンポーネント」という概念を知るために、この構造はとてもわかりやすいです。最近v3がリリースされてから、プロジェクトの雛形の守備範囲が大幅に広がりました。
これは単に技術の話ではあるのですが、勉強を続けていくモチベーションにもなりました。
そんな環境で、「Vue.js」を使う練習をした
その後は掴んだ手を離さずに自分のものにすべく、「とにかく作る」という方針でVue.jsをたくさん使いました。
最近作ったのは、ポートフォリオサイトと、フォトギャラリーサイトです。
作ったものはふたつですが、それぞれ以下のように「ロジックをそのまま、環境を置き換える」作業をしていきました。この作業が、思ったよりいい経験になったと思います。
- Vue CDN → Vue CLI → Nuxt
悶々としていた気持ちは興味だった
このへんになって、ようやく当時のその気持ちの意味を理解できました。
置いていかれたわけでもなく、技術力が下がったわけでもなく、ただ興味の方向が変わっただけでした。そんな心変わりに気づかなかった僕を正しい方向に導いてくれた「Vue.js」とそれを構成するコミュニティの方々に感謝しています。
次は自分が誰かに手を差し伸べる番だと思って、技術に拘泥することなくいい気持ちでいいものを作っていきたいと思います。ライダーでした。
※今回の記事は、先日開催された Vue.js Tokyo v-meetup #8 で、LT発表した内容をもとに執筆しました
▼Vue.jsを取り扱った最近の記事 Vue.js + Firebaseでチャットアプリを脳死しながら作ってみよう！〜セットアップ編〜 SPAだけじゃない！Vue.js[1] jQueryをVue.jsに書き換えてみる
はっちゃん
つっちー
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
