Nuxt.js チームは足場ツール create-nuxt-appを実行すると、あわせてインストールするフレームワークなどを色々質問してきます。
選択するものは決めてはいますが、知らなかったものもあり、それらを曖昧なままで選ばないでおく・・というのは気持ち悪いので念のため、調べてまとめてみます。
サーバーサイドのフレームワーク
Node.jsというブラウザの外部でJavaScriptを実行するJavaScriptランタイム環境をベースにして、サーバーサイドでの開発をサポートするフレームワークの主だったものがリストされてます。
個人的には、ここはとりあえず「None (Nuxt default server)」でいいかなと思ってるのですが、Nuxt.jsと組合せることで、なんらかのプラスがあるので質問の選択肢にはいっているのでしょうから、慣れてきたら、少しずつ試したいなと思ってます。
Express
Node.js用の高速で独創的な、ミニマリストのWebフレームワークがうたい文句です。
Node.js上で、サーバーと通信経路を管理するためのミドルウェアとして機能します。
たとえば、REST APIの開発などで簡潔に記述できるメリットを生かせるようです。
Koa
Expressの開発チームが設計した新しいWebフレームワークです。
Expressより小さく、より表現力があり、より堅牢な基盤を目指しているようです。
非同期関数を利用して、コールバックが必要な処理を、コールバックなしに書くことができたり、強力なエラー処理機能を持っていたりするのが特徴ですね。
Hapi
アプリケーションのプログラムインターフェイス開発に利用するNode.js Webフレームワークで、スクリプト全体の管理作業が容易であると言われています。
認証やキャッシュ処理、強力な入力バリデーションを持つなど、非常に人気のあるフレームワークです。
軽量で、強力なプラグイン機構をもっていて、プラグインを追加することで機能を強化できるという点にも特徴があります。
Feathers
リアルタイム性に特化したフレームワークです。
データベース、WebSocket、REST API設計、認証、ファイルアップロードなどのWebアプリケーション開発で必要なものはプラグインとして揃っていて、クライアントサイドでも動作する特徴があります。
Micro
asyncとawaitで使用するように設計されているミドルウェアなしのフレームワークです。
コード全体で約260行とか、依存関係全部含めても1MB以下という超軽量で、機能も単一目的向けのシンプルなものになっています。
シンプルで超高速・・というのは、とても魅力なのですが、今のところ情報がすくないな・・というところはあります。
Adonis (WIP)
adonis.js(アドニス)はLaravelフレームワークの影響を強く受けていて、Laravelライクに作られています。
つまり。
PHPフレームワークのLaravelライクの書き方が好きな人は、この一択ってことです。
UI フレームワーク
ユーザインタフェースのデザインに大きく影響する部分です。
ここは、自分としては「Buefy」を選択することに決めてます。
理由は。
BuefyはBulmaとVue.jsを組み合わせた、シンプル・軽量・使いやすいと良いとこどりしたようですなUIコンポーネントだということと、デザインが自分好みだからです。
こんな感じのTimeピッカーとか。
とはいえ、いちおう、各フレームワークの特徴をあげておきます。
Bootstrap
Twitter社で開発された、再利用性の高いWebパーツや各レイアウトのデザインを整える機能を豊富に備えているUIフレームワークです。
Bootstrap4が現在(2019/05)の最新です。
超有名で、実績も豊富なのですが、自分としては「これはjQueryと使う」イメージがあるので、選択肢からはずしてます。
Vuetify
Vue.jsをベースに構築されたUIフレームワークです。
Googleが提唱したマテリアルデザインの考えにのっとって構成された直感的で使いやすいコンポーネントを手軽に使えて、業務アプリとかの画面に使うと相性が良さそうという感じはあります。
ただ、当然ですが「Googleっぽく」なるので、それを好むか好まないか・・だけです。
Bulma
軽量で、Javascriptを必要とせず、CSSだけで動きます。
Bulmaの特徴はこれにつきます。
ただ、BulmaをベースにVue.jsと組み合わせた「Buefy」が選択肢にあるので、あえて、こちらを選んで自分で工夫する理由もないな・・というわけです。
Tailwind
UI コンポーネントを提供するのではなく、CSS の class を提供するだけというシンプルさが特徴です。
使い方も、class を指定するだけなので簡単で見通しよく複雑な UI を作成できます。
ある程度、デザインとかに自信があって、コンポーネント作成や見た目は好きにするから、 class だけ提供してほしい・・的な人には良いんじゃないでしょうか。
Element UI
Vue.js 2.0ベースのコンポーネントライブラリです。
様々な便利で高機能なUIコンポーネントがたくさん含まれていて、高機能なUIを今すぐに組み込めるところが特徴です。
そういうものが必要な画面を作るなら、良いのではないでしょうか。
Ant Design Vue
元々、React用だったものの、Vue.js対応版です。
ビジネスやブランドによるUIの多様性のニーズを満たすために、基本的なデザインの側面をカスタマイズできたりするところが特徴です。
Buefy
これについては最初に書いているのでリンクだけ。
テスティングフレームワーク
Jest
Facebookが開発したオールインワンなテストフレームワークです。
アサーションやテストダブルなどが用意されているのはもちろん、ライブブラリの依存関係がシンプルで、 JSDOMのエミュレータ上でテストを実施するのでテスト実行が高速である・・などの特徴があります。
AVA
軽量で高速、シンプルな文法でテストが書けるだけでなく、テストを並列で同時実行することができることが特徴です。
自分はしばらく、こっち(AVA)を使ってみようかな・・と思ってます。
理由は、テストの書き方が自分好みに近いから・・だけですけど。
非同期通信
選択肢ではないですが、「axios module」も追加します。
これは、HTTP通信を簡単に行えるモジュールで、Ajax(XML HttpReqest)を簡単に生成できたり、カスタムヘッダーやBasic認証など、いろいろなオプションが手軽にできるなど、WEB-APIを使う時には、絶対必要だからです。
まとめ
とりあえず、ざっくり整理しました。
これで何とか、「よくわからないけど・・スキップ」の気持ち悪さは解消できたかなと思いますし、ちょっと、新しいフレームワーク等の知識も増えた感じはしますね。
ではでは。