ymyzk’s blog

Neutrino

モダンフロントエンド開発環境のセットアップに Neutrino を利用してみた話

—

by

Yusuke Miyazaki
in ,

mypy Playgroud のフロントエンドはこれまで生の (トランスパイル等をすることのない) JavaScript と jQuery 等のいくつかのライブラリで実装されていました．今後の機能追加等を考慮するとこのまま開発を続けていくのは面倒だと感じたため，フロントエンド部分を React で書き直すことにしました．

当初は React 開発環境の整備に Create React App を利用するつもりでいましたが，今回の目的により適していそうな Neutrino というツールを利用することにしました．Neutrino のユーザー体験が良かったものの日本語の記事が見当たらなかったため簡単に紹介します．

Neutrino とは

Neutrino はモダンな Web アプリケーションの開発環境を簡単に作成することができる柔軟なツールです．プロジェクトを始める際に面倒な webpack の設定の記述などを行うことなく，必要最小限の依存関係を導入することで開発をスタートできるようにしてくれます．

Neutrino の特徴

Neutrino はボイラープレートを生成するのではなく Neutrino 本体のパッケージ + プリセットのパッケージ + ユーザーによるカスタム設定 + ユーザーの書いたコードという構成になっています．このため，機能の追加やアップデートをプリセットのパッケージのインストール・アップデートで簡単に行うことができます．

Neutrino のプリセットはコミュニティ提供のものも含め様々なものが npm に公開されています．このため React を用いた Web アプリケーションだけではなく，ライブラリやコンポーネントの作成にも利用できます．また React・Preact・Vue などのフレームワークや Karma・Mocha・Jest などのテストフレームワークを選択して利用することができます．

Neutrino + React での Hello World

Neutrino で React を使った Web アプリケーションを作成する方法を簡単に紹介します．まずプロジェクトを作成し，必要なライブラリを導入します:

$ npm init
$ npm add --save react react-dom
$ npm add --save-dev neutrino @neutrinojs/react

次に src/index.jsx に React で hello world を描画するためのコードを書きます．

import { render } from 'react-dom';

render(<h1>Hello world!</h1>, document.getElementById('root'));

最後に以下のコマンドを実行すると開発用のサーバーが起動し http://localhost:5000 から出力を確認できます．

$ npx neutrino start --use @neutrinojs/react

Create React App との比較

Create React App は Facebook が提供していることもあり，React を用いた開発環境のセットアップに広く使われていますが，いくつか欠点があります．

  • React 以外のフレームワークに対応していない
  • アプリケーション内で使うパッケージを選びづらい (例: 違うテストフレームワークの利用)
  • 変更したい設定内容によっては “eject” せざるを得ない状況になることがあるが，一度 “eject” すると，以後の Create React App (react-scripts) のアップデートに追従できない．

基本的に Neutrino の方がより柔軟なツールと言えそうですが，初期設定する際に若干多くの知識を要求すると言えそうです．ちなみに Neutrino は create-react-app の README でその代替としても紹介されています．

まとめ

モダンな Web アプリケーションの開発環境を簡単に整備することができるツール Neutrino について簡単に紹介しました．また Create React App との簡単な比較も行いました．Create React App に不満がある場合は Neutrino を代替として検討してみても良いかもしれません．

興味を持たれた方は公式のドキュメントが充実しているため，まずはそちらを参照してみてください．

関連