こんにちは。サイオステクノロジー技術部 木村です。de:code2019のセッションレポートをお届けします。
今回は以下のセッションになります。
こちらはEXPOオープンシアターで行われたセッションで、通常のブレイクアウトセッションが50分なのに比べ、セッション時間が20分と少し短い時間でのセッションになります。
こちらセッション開始15分前に会場に行った際にはすでに超満員で、横の方からの立ち見になりましたため、写真が見づらい角度となっております。
本セッションはVue.jsのことは知っているけれど、まだあまり使ったことがないといった初心者向けのセッションのようです。
Vue.jsとは
JavaScriptフレームワークのひとつ。普及の加速度でいうとここ1年ナンバーワンで、非常に人気がある。
一番の特徴はプログレッシングフレームワークであること。そのため、本格的なWEBアプリから簡単な一部の機能実装まで幅広い規模に対応できる。
公式サイトも日本語化され書籍も充実している。
2019年に3.xへのメジャーバージョンアップが予定されている。Vue Fes Japan 2019 では、3.xの内容がふんだんに紹介される予定だそうなので、要チェックです！
がんばらない開発
セッションのタイトルにもなっている「がんばらない」という言葉ですが、ネガティブな意味のがんばらないではなく、「余計なことにはがんばらないで開発に集中する」という意味だそうです。
サーバーレスにしかり、開発者が開発に集中できるような環境が増えていくのは開発者にとっては嬉しい限りです。
そしてVue.jsでがんばらずすぐに開発をはじめたい、意味のあるとことだけやりたいという方には、「Visual Studio Code + TypeScript」の組み合わせで開発をするのが鉄板とのこと。
また、その場合Vetur拡張機能を入れることも必須です。
Veturを入れないと、色が何もつかないただのテキストファイルのようになってしまいますが、Veturを入れることによりソースがかなり見やすくなります。他にも文脈に合わせた補完機能など開発しやすくなる機能が色々と備えられています。
横からのアングルの写真で見づらいですが、こちらの写真の画面は後ほど公開されるセッション資料にも載っていますのでそちらを見ていただければ良いかと思います。
では実際にVue.jsをどうはじめるかというと、ここでもがんばらないポイントがたくさん出てきました。
Vue CLI
Vue CLIは、Vue.jsの開発環境を整えてくれる公式のコマンドラインツールで、プロジェクトの作成からデモを見せていただきました。
vue createコマンドでプロジェクトを作成すると、内部的にnpmからのモジュール取得やwebpackの設定処理などが自動で走りはじめ、早くもがんばらなくていい感じを醸し出しています。
しかもCLIなのにUIもあるというのがいいですね。
Vue CLI プラグイン
Vue.jsに機能を追加したくなった時に、がんばらないために使えるのが「Vue CLI プラグイン」。
HTTPクライアントであるaxiosの導入を例にデモを見せていただきました。
vue addコマンドを実行すると、インストールが走りnpmからパッケージの取得を行います。インストールするパッケージによって、設定ファイルの有無や依存関係の有無などそれぞれ違いますが、自動で必要なものを集めてきて設定してくれます。今まではそれらを自分でやらなければならなかったので、Vue CLI プラグインによりかなりがんばらなくて良くなっているのがわかりました。
UI ライブラリ
UIをゼロから自分で考えるとなると大変ですが、UIライブラリがいくつもあるので、UIの作成でもかなりがんばらなくて良くなります。
Vue.jsに最適化された主なライブラリ
Elementを例にデモを見せていただきました。デザインを考える手間がかなり省けそうです。
Nuxt.js
最後はNuxt.jsの紹介。
Nuxt.jsは、Vue.js アプリケーションを構築するためのフレームワークですが、サーバーサイドレンダリング（ユニバーサルSSR）するアプリケーションの開発のために必要な設定があらかじめセットされているのが特徴のようです。
最後に
20分という短い時間でのセッションでしたが、その中ではたくさんがんばらないポイントが紹介され、Vue.jsを使ったことがない人でも「Vue.jsを使ってみよう！」という気になるのではと思われる内容でした。
がんばらない開発いいですね！！
