WEBエンジニア奮闘記

日々の業務から思ったこと、学んだことを書き連ねていきます。

Riot.jsのcliツールを作りたいなぁというお話。(協力者募集中)

Riot.js Advent Calendar 2017 の3日目の記事になります! 今回もあまりRiot.js(以下Riot)の書き方やtipsなど、テクニカルなプログラミングの話ではありませんのでご注意ください。

qiita.com

Riot以外のフレームワークやライブラリのCLI

いくつかピックアップして調べてみました。 Angular, Ionicなどのフレームワークや、React, Vue.jsなどのライブラリのCLIと、RiotCLIには差があります。 簡単ですが、まとめてみました。

Name version generater Overview
angular-cli 1.5.5 あり いわゆるフレームワークCLI。devサーバー起動、ビルド、各コンポーネントの作成など必要なものは全て備わっている。
ionic-cli 3.19.0(*1 あり angular-cliと同等の機能を備えつつ、各プラットフォームへのビルドやIonic社独自のサービスとの連携機能も実装されている。
create-react-app 1.4.3 なし プロジェクトの雛形作成のみ。
vue-cli 2.9.2 なし プロジェクトの雛形作成のみ。(*2
riot-cli 3.0.4 なし tagファイルのコンパイルに関する機能のみ。

ReactCLIを探してみましたが、create-react-app以外は有志の方が個人で開発されたCLIしか見当たりませんでした。(もしあれば教えていただけると幸いです)

こうしてみると、RiotのCLIは最低限の機能のみですが、CLIには開発を手助けする機能が備わってほしいなと思い、自分で開発しようと思いたちました。 一旦名前はcreate-riot-app(仮)にしようと考えています。

riot-create-appに欲しいと思う機能

想定している機能をざっと書き出します。

  • 対話型のプロジェクト雛形作成
    • riot-route
      1. 必要
      2. 不要
    • ES6のトランスパイラ
      1. Babel
      2. Buble
    • バンドラの選択
      1. Webpack
      2. Rollup
    • テストフレームワークの選択
      1. 不要
      2. Ava
      3. Jasmine
      4. Mocha
    • ESLint
      1. 必要
      2. 不要
  • 雛形の作り方
    • 各組み合わせのソース一覧を圧縮してどこかのサーバーに保持
      • node_modulesも含める
      • CLIのバージョン毎に圧縮ファイルを用意
    • node_modules以外のファイルはCLIのソースに含める
      1. package.jsonにそれぞれの組み合わせのモジュールを書き出す
      2. node_modulesは雛形作成後に、npm installを実行してもらう

「こんな機能も欲しい!_とか、「いやこれはいらんだろ」とかご意見ありましたら是非コメントなり、私宛にメールくだされば善処します!(※もちろん共同開発するというお声も大歓迎ですw)よろしくお願いします(`・ω・´)ゞ

終わりに

Riotを使い始めて自分もそろそろ3年目に突入しました。当たり前ですがRiotがフロントエンド界隈の最高のツールではないです。他のフレームワークやライブラリには存在する素晴らしい機能がRiotには備わっていない(例えばtwo way data-binding)ことがよくありました。しかし、Riotの哲学は公式ページにTOPにも記載があるように

 Simple and elegant component-based UI library

です。すなわち、「軽くてミニマル、それでいてパワフルなAPIを備えた、UIをデザインするライブラリ」なのです。最低限必要な機能を実装しつつ、その上で軽さ・小ささを追い求めた結果今の形になったのだと思います。

もちろん今もRiotは進化し続けています。今までのRiotは遅いと言われ続けてきましたが、今のRiotはかなり速度改善がなされ、劇的に速くなりました。(手前味噌ですが)また来年には、待望のv4のリリースが来ると思います。(v4については別の日にまたブログを書きます)

色んなフレームワークを触ってみましたが、やっぱり自分はRiotは好きですし、書きやすいなーと思います。大規模向けではないですが、入門の敷居が低くサクッと作れる、かつ従来のhtml, css, JavaScriptの構成そのままの書き方ができるものはRiotだけだと思います。

ではでは(*・ω・)ノ


*1:ionic-cliはいくつかのライブラリに分けられており、公式としてはIonic Frameworkのバージョンと同じとしているようです。

*2:helpを見るとbuildは削除された模様。このコマンドを削除することで初期インストールを最適化しスリムに下とのこと。