de:code 2019レポート 〜 【セッション】がんばらない Vue.js 〜 Visual Studio Code + TypeScript でクールに Vue.js の開発をしよう!

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
【3/22開催】テックブログを書こう!アウトプットのススメ
1年で100本ブログを出した新米エンジニアがPV数が伸びなくてもTech Blogを書き続ける理由とは?
https://tech-lab.connpass.com/event/312805/

【4/18開催】VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜
Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。
https://tech-lab.connpass.com/event/311864/

こんにちは。サイオステクノロジー技術部 木村です。de:code2019のセッションレポートをお届けします。

今回は以下のセッションになります。
vue4
こちらは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を入れることによりソースがかなり見やすくなります。他にも文脈に合わせた補完機能など開発しやすくなる機能が色々と備えられています。
vue2
横からのアングルの写真で見づらいですが、こちらの写真の画面は後ほど公開されるセッション資料にも載っていますのでそちらを見ていただければ良いかと思います。

では実際にVue.jsをどうはじめるかというと、ここでもがんばらないポイントがたくさん出てきました。

Vue CLI

Vue CLIは、Vue.jsの開発環境を整えてくれる公式のコマンドラインツールで、プロジェクトの作成からデモを見せていただきました。
vueproject
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を使ってみよう!」という気になるのではと思われる内容でした。
がんばらない開発いいですね!!

アバター画像
About 木村 29 Articles
Azureなどのクラウドでの稼働を主としたアプリケーション開発を行なっています。
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる