"BOKU"のITな日常

還暦越えの文系システムエンジニアの”BOKU”は新しいことが大好きです。

Nuxt.js「create-nuxt-app」の選択肢にでてくる各種フレームワークについて

Nuxt.js チームは足場ツール create-nuxt-appを実行すると、あわせてインストールするフレームワークなどを色々質問してきます。

選択するものは決めてはいますが、知らなかったものもあり、それらを曖昧なままで選ばないでおく・・というのは気持ち悪いので念のため、調べてまとめてみます。

f:id:arakan_no_boku:20190509225541p:plain

 

サーバーサイドのフレームワーク

 

Node.jsというブラウザの外部でJavaScriptを実行するJavaScriptランタイム環境をベースにして、サーバーサイドでの開発をサポートするフレームワークの主だったものがリストされてます。

個人的には、ここはとりあえず「None (Nuxt default server)」でいいかなと思ってるのですが、Nuxt.jsと組合せることで、なんらかのプラスがあるので質問の選択肢にはいっているのでしょうから、慣れてきたら、少しずつ試したいなと思ってます。

 

Express

 

Node.js用の高速で独創的な、ミニマリストのWebフレームワークがうたい文句です。

expressjs.com

Node.js上で、サーバーと通信経路を管理するためのミドルウェアとして機能します。

たとえば、REST APIの開発などで簡潔に記述できるメリットを生かせるようです。

 

Koa

 

Expressの開発チームが設計した新しいWebフレームワークです。

Expressより小さく、より表現力があり、より堅牢な基盤を目指しているようです。

koajs.com

非同期関数を利用して、コールバックが必要な処理を、コールバックなしに書くことができたり、強力なエラー処理機能を持っていたりするのが特徴ですね。

 

Hapi

 

アプリケーションのプログラムインターフェイス開発に利用するNode.js Webフレームワークで、スクリプト全体の管理作業が容易であると言われています。

hapijs.com

認証やキャッシュ処理、強力な入力バリデーションを持つなど、非常に人気のあるフレームワークです。

軽量で、強力なプラグイン機構をもっていて、プラグインを追加することで機能を強化できるという点にも特徴があります。

 

Feathers

 

リアルタイム性に特化したフレームワークです。

データベース、WebSocket、REST API設計、認証、ファイルアップロードなどのWebアプリケーション開発で必要なものはプラグインとして揃っていて、クライアントサイドでも動作する特徴があります。

docs.feathersjs.com

 

Micro

 

asyncとawaitで使用するように設計されているミドルウェアなしのフレームワークです。

コード全体で約260行とか、依存関係全部含めても1MB以下という超軽量で、機能も単一目的向けのシンプルなものになっています。

github.com

シンプルで超高速・・というのは、とても魅力なのですが、今のところ情報がすくないな・・というところはあります。

 

Adonis (WIP)

 

adonis.js(アドニス)はLaravelフレームワークの影響を強く受けていて、Laravelライクに作られています。

つまり。

PHPフレームワークのLaravelライクの書き方が好きな人は、この一択ってことです。

adonisjs.com

 

 

 UI フレームワーク

 

ユーザインタフェースのデザインに大きく影響する部分です。

ここは、自分としては「Buefy」を選択することに決めてます。

理由は。

BuefyはBulmaとVue.jsを組み合わせた、シンプル・軽量・使いやすいと良いとこどりしたようですなUIコンポーネントだということと、デザインが自分好みだからです。

こんな感じのTimeピッカーとか。

f:id:arakan_no_boku:20190508004138p:plain

とはいえ、いちおう、各フレームワークの特徴をあげておきます。


Bootstrap

 

Twitter社で開発された、再利用性の高いWebパーツや各レイアウトのデザインを整える機能を豊富に備えているUIフレームワークです。

Bootstrap4が現在(2019/05)の最新です。

超有名で、実績も豊富なのですが、自分としては「これはjQueryと使う」イメージがあるので、選択肢からはずしてます。

getbootstrap.com


Vuetify

 

Vue.jsをベースに構築されたUIフレームワークです。

Googleが提唱したマテリアルデザインの考えにのっとって構成された直感的で使いやすいコンポーネントを手軽に使えて、業務アプリとかの画面に使うと相性が良さそうという感じはあります。

ただ、当然ですが「Googleっぽく」なるので、それを好むか好まないか・・だけです。

vuetifyjs.com

 

Bulma

 

軽量で、Javascriptを必要とせず、CSSだけで動きます。

Bulmaの特徴はこれにつきます。

ただ、BulmaをベースにVue.jsと組み合わせた「Buefy」が選択肢にあるので、あえて、こちらを選んで自分で工夫する理由もないな・・というわけです。

bulma.io

 

Tailwind

 

UI コンポーネントを提供するのではなく、CSS の class を提供するだけというシンプルさが特徴です。

使い方も、class を指定するだけなので簡単で見通しよく複雑な UI を作成できます。

ある程度、デザインとかに自信があって、コンポーネント作成や見た目は好きにするから、 class だけ提供してほしい・・的な人には良いんじゃないでしょうか。

tailwindcss.com

 

Element UI

 

Vue.js 2.0ベースのコンポーネントライブラリです。

様々な便利で高機能なUIコンポーネントがたくさん含まれていて、高機能なUIを今すぐに組み込めるところが特徴です。

そういうものが必要な画面を作るなら、良いのではないでしょうか。

element.eleme.io

 

Ant Design Vue

 

元々、React用だったものの、Vue.js対応版です。

ビジネスやブランドによるUIの多様性のニーズを満たすために、基本的なデザインの側面をカスタマイズできたりするところが特徴です。

vue.ant.design

 

Buefy

これについては最初に書いているのでリンクだけ。

buefy.org

 

テスティングフレームワーク


Jest

 

Facebookが開発したオールインワンなテストフレームワークです。

アサーションやテストダブルなどが用意されているのはもちろん、ライブブラリの依存関係がシンプルで、 JSDOMのエミュレータ上でテストを実施するのでテスト実行が高速である・・などの特徴があります。

jestjs.io


AVA

 

軽量で高速、シンプルな文法でテストが書けるだけでなく、テストを並列で同時実行することができることが特徴です。

github.com

自分はしばらく、こっち(AVA)を使ってみようかな・・と思ってます。

理由は、テストの書き方が自分好みに近いから・・だけですけど。

 

非同期通信

 

選択肢ではないですが、「axios module」も追加します。

github.com

これは、HTTP通信を簡単に行えるモジュールで、AjaxXML HttpReqest)を簡単に生成できたり、カスタムヘッダーやBasic認証など、いろいろなオプションが手軽にできるなど、WEB-APIを使う時には、絶対必要だからです。

 

まとめ

 

とりあえず、ざっくり整理しました。

これで何とか、「よくわからないけど・・スキップ」の気持ち悪さは解消できたかなと思いますし、ちょっと、新しいフレームワーク等の知識も増えた感じはしますね。

ではでは。