Aurelia入門の軌跡

はじめに

JavaScriptは昔少し触っただけなのですが、Webアプリが作りたくなり、Aureliaに手を出し始めました。
早速つまづき始めているので、その記録を含め、書いていきたいと思います。

前提として、この記事は以下のような人が以下のような環境で試しながら書いています。

• 人: C++、C#あたりは詳しいがJavaScriptは初心者。Haskellは好き
• OS: OS X El Capitan
• ブラウザ: Firefox 43.0.3

なぜAureliaか

ちょっと作りたいアプリがあり、Webアプリが適しているだろうと思い、一発やってみるかと思い立つ。
何年前だったか、Webアプリフレームワークは幾つか触ってみたことがあるものの、時代は大きく変わっているらしい。
というわけで、今は何で作るのがナウいのか調べてみたところ、AngularJSやReact.jsなど最近よく目にする単語が並んでいました。
この辺りを使うのが良いのかな……などと考えていたところ、Aureliaの文字が。
そういえば、Web関係に詳しい知人がこれからはAurelia……かもしれないと語っていたような気が！
そのようなわけで、多分一番ナウいであろうAureliaを使ってみようということになったのです。

最近は世の中はMVVMなんです？
WPFでMVVMはやっていたので、なんとかなるかも！
と前向きになる。

Getting Started!

http://aurelia.io/docs.html#/aurelia/framework/latest/doc/article/getting-started
に「Getting Started」があったので、ここから開始。
左側に自分が何者か選べるので、躊躇なく

I am new to web dev or SPA

を選択。……SPA？？　あ、知ってる知ってる！　おじさん向けの週刊誌だよね。
ググってもそれしか出てこないし間違いない。
うん。読んだことないし、new to です。

次に、どの言語で書くか選んで「Kit」をダウンロードするらしい。
ES 2016 (ECMAScript 2016) かTypeScriptが選べるらしい。
正直どちらがいいのかわからないが、左側がオススメだろうということで、ES 2016を選択。
C++の世界ではC++11の対応が徐々に広まって、部分的に使えるかな？　というレベルなのに、2016なんて未来のものを使って良いのかたいへんに心配です。
ボタンをクリックするとアーカイブが落ちてくるので、適当なところに展開っと。

次は「server-side technology」を選べとな。
まずVisual Studio。うん。Macなのでないな。
次にNodeJS。おお聞いたことある。ただなんかサーバーをちゃんと用意するのも少し面倒そうだな……。
今回Webアプリは作りたいのですが、ブラウザ内で完結させればいいかと考えており、特にサーバーはいらないかなと思っているのです。
3つ目の選択肢はFirefox。楽そうなのでこれでいくか。
常日頃は充電を長持ちさせると噂のSafariを使っているのですが、SafariではHTTPを通さないと、Kit に入っていたindex.htmlが正しく表示されないことを確認しているので、残念ながらFirefoxをインストールしなければならないようです。
最近、大したものはインストールしていないはずのSSDの容量が心もとなくなってきたのですが、涙を飲んでFirefox 43.0.3をインストール。
使っていないChrome消そうかな…。

最初のつまづき

Getting Started を読みながら「Creating Your First Screen」「Adding Navigation」と進めていきます。
なんだか昔書いていたHTMLと別物になっている気が。
恐ろしい。HTMLは恐ろしい子だ。

ここで初めてのつまづきが。
なぜかブラウザの画面が真っ白のまま表示がされない。
どこか書き間違えたかな？　と思い、ドキュメントのコードをコピペしてみるが変化なし。
Webコンソールには

TypeError: Unexpected anonymous AMD define

との表示が。
いろいろ試すものの変化なし。
諦めかけたその時、Googleの海の底で「開発ツールを閉じなよ」との声が聞こえる。
（残念ながら該当サイトは今探すと見当たらず）
開発ツールを一度「×」ボタンで閉じてページを再読み込みすると、難なく表示。
おお。よかった。

しかし、今同じように試してみても、上のエラーは再現せず……。
JavaScriptの世界にはまだわからないことがたくさんだ……。

VimでHTMLとJS

少しずつ進めていますが、どうにもVimでHTMLやJSが書きづらい。
とりあえず

• http://www.vim.org/scripts/script.php?script_id=2075
• http://www.vim.org/scripts/script.php?script_id=3227

は入れてみたものの……。
うーむ。

続く。