Aurelia #1:インストールしちゃうぞの巻

どーも!どーもどーも!zkymです。

昨日ついにAurelia 1.0が正式リリースされましたー!Rob Eisenbergさんはじめ開発者のみなさま、お疲れ様でしたー!これからの更新もよろしくお願いいたします。

AureliaはJavaScriptのフレームワークで、デザインだったりコーディングの親しみやすさだったりが気に入って、現在開発中のWebアプリでもアルファ版のころから導入してたんですが、ついに正式リリースされたんですねー。うれしいですねー(*´ω`)

ということで、リリースを記念してAurelia関連の情報を勝手にお伝えしていこうと思います。記念すべき第1回はインストールをやっちゃいます。

事前準備

インストールにあたり、以下のものを用意します。

  • Node.js  4.x以上(公式ページなどからダウンロード&インストールします。Node.jsはバージョン色々あるんで、hokacchaさんが開発しておられるnodebrewを使って管理するのがオススメです。)
  • gitのクライアント(公式ページなどからダウンロード&インストールします。)

ちなみに今回試した環境は以下です。

  • Debian 8.0
  • Node.js 6.3.1

インストール

まず、Aurelia CLIをインストールします。(※環境に合わせてsudoとかつけてください。)

$ npm install aurelia-cli -g

つぎに、Aurelia CLIを使ってAureliaのプロジェクトを作っちゃいます。

$ au new
・・・(Aureliaロゴが表示されます)・・・
Please enter a name for your new project below.

[aurelia-app]>

プロジェクト名を聞かれるので、適当に入れちゃいます。

[aurelia-app]> atwork-web-app

Would you like to use the default setup or customize your choices?

1. Default ESNext (Default)
A basic web-oriented setup with Babel for modern JavaScript development.
2. Default TypeScript
A basic web-oriented setup with TypeScript for modern JavaScript development.
3. Custom
Select transpilers, CSS pre-processors and more.
[Default ESNext]>

すると、設定どうするのー?って聞かれます。カスタマイズ大好きな自分は今回は3番を選んで自分好みの子にしちゃいます。1番はES2015で書いてBabelで翻訳するっていう設定ですねー。2番はTypeScript使っちゃうよっていう設定です。

3番を選ぶと↓のようなことが設定できます。トランスパイラはBabelとTypeScriptしか選べない\(^o^)/。それでもCSSのプリプロセッサーやらテストランナーやらエディタが設定できます。

[Default ESNext]> 3

What transpiler would you like to use?

1. Babel (Default)
An open source, standards-compliant ES2015 and ESNext transpiler.
2. TypeScript
An open source, ESNext superset that adds optional strong typing.
What css processor would you like to use?

1. None (Default)
Use standard CSS with no pre-processor.
2. Less
Extends the CSS language, adding features that allow variables, mixins, functions and many other
techniques.
3. Sass
A mature, stable, and powerful professional grade CSS extension.
4. Stylus
Expressive, dynamic and robust CSS.
5. Post CSS
A tool for transforming CSS with JavaScript.
Would you like to configure unit testing?

1. Yes (Default)
Configure your app with Jasmine and Karma.
2. No
Skip testing. My code is always perfect anyway.

テストランナーの質問への選択肢が面白いっすね。

What is your default code editor?

1. Visual Studio Code (Default)
Code editing. Redefined. Free. Open source. Runs everywhere.
2. Atom
A hackable text editor for the 21st Century.
3. Sublime
A sophisticated text editor for code, markup and prose.
4. WebStorm
A lightweight yet powerful IDE, perfectly equipped for complex client-side development.

デフォルトのエディタはVisual Studioになってるんすけど、Aureliaの開発陣はWindows大好きっ子なのかな。VIsual Studioは自分も大好きですが、今回はWebStormにします。

設定が終わったら↓のようにプロジェクト作っていいかい?って聞かれるのでYesと答えましょう。ちょっと待ってってかたは2番で再設定するか3番で中止にしてください。

[Default ESNext]> 3

・・・(上述した設定のカスタマイズをします)・・・
Project Configuration

Name: atwork-web-app
Platform: Web
Transpiler: Babel
CSS Processor: None
Unit Test Runner: Karma
Editor: WebStorm


Would you like to create this project?

1. Yes (Default)
Creates the project structure based on your selections.
2. Restart
Restarts the wizard, allowing you to make different selections.
3. Abort
Aborts the new project wizard.

[Yes]>

プロジェクトが作成されると依存してるモジュール類もインストールするかどうか聞かれるので、ここではYesにして、必要なものを全部インストールしちゃいます。

Project structure created and configured.

Would you like to install the project dependencies?

1. Yes (Default)
Installs all server, client and tooling dependencies needed to build the project.
2. No
Completes the new project wizard without installing dependencies.

[Yes]>

依存モジュールのインストールが終わったら下記のように表示されます。

Congratulations! Your Project "atwork-web-app" Has Been Created!


Now it's time for you to get started. It's easy. First, change directory into your new project's folder. You can use
cd atwork-web-app to get there. Once in your project folder, simply run your new app with
au run. Your app will run fully bundled. If you would like to have it auto-refresh whenever you
make changes to your HTML, JavaScript or CSS, simply use the --watch flag. If you want to build your app
for production, run au build --env prod. That's just about all there is to it. If you need help,
simply run au help.


Happy Coding!

それではインストールがすべて完了したのでアプリを立ち上げてみましょー!

$ cd atwork-web-app/
$ au run

・・・(ビルドのタスクが走ります)・・・

Application Available At: http://localhost:9000
BrowserSync Available At: http://localhost:3001

表示されるURLにアクセスすると、、、

aurelia-helloworld

表示されましたー!いやー、チョー簡単ですねー!

次回はAurelia CLIの使い方を見ていきたいと思います!バイバイのバーイ!