http://aurelia.io/
Angularと、どちらにするかで悩みましたが、まずは、モダンな方（Aurelia）を勉強して、だめなら、保守的な選択（Angular）をすれば良いと考えてのことです。
また、JavaScriptを知っているといっても、これからは、新しい記述方法に移行していく必要があります。
TypeScriptと、ES6の選択でも悩みました。
型で制約を受けるというだけでも、TypeScriptの方が魅力的ですが、ES6を知らずに、TypeScriptを学んでも意味が無いと思い、ES6を選択しました。
勉強のスタートは、本家のHPが一番です。
本や、日本語の紹介サイトでは、雰囲気は学べますが、既に、古い情報になっていることが多く、本家が間違いありません。
まずは、＜Get Started＞を学びます。
適当（ここでは、ある意味、手抜き）に読んでいるため、間違いがあるかもしれません。間違いがあれば、コメントいただけると助かります。
最初の一歩は、ダウンロード。
基本的なプロジェクトをダウンロードし、プロジェクトフォルダに展開します。
ルートに、index.html、jsconfig.json。
scriptsフォルダに、スクリプトファイル。
srcフォルダに、プログラムファイル。
が配置されています。
最初は、srcフォルダは、空です。
firefoxで、index.htmlを表示させましたが、白紙でした。
環境の設定
index.htmlファイル内のスクリプトを修正することで、TypeScriptと、ES6のどちらにするかを決めるようです。
ES6を使うので、
<script src="scripts/config-typescript.js"></script>
を
<script src="scripts/config-esnext.js"></script>
にします。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
</head>
<body aurelia-app="src/main">
<script src="scripts/system.js"></script>
<script src="scripts/config-esnext.js"></script>
<script src="scripts/aurelia-core.min.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
プログラムを記述
srcフォルダに、次の４つのファイルを作ります。
todo.js
保存データのモデルです。
export class Todo {
constructor(description) {
this.description = description;
this.done = false;
}
}
app.js
アプリケーションのモデルです。
import {Todo} from './todo';
export class App {
constructor() {
this.heading = "Todos";
this.todos = [];
this.todoDescription = '';
}
addTodo() {
if (this.todoDescription) {
this.todos.push(new Todo(this.todoDescription));
this.todoDescription = '';
}
}
removeTodo(todo) {
let index = this.todos.indexOf(todo);
if (index !== -1) {
this.todos.splice(index, 1);
}
}
}
app.html
アプリケーションのビューです。
<template>
<h1>${heading}</h1>
</template>
main.js
最初に呼ばれるところ。
export function configure(aurelia) {
aurelia.use.basicConfiguration();
aurelia.start().then(() => aurelia.setRoot());
}
これで、firefoxのブラウザに、「Todos」と表示されます。
詳細に見ていくと、
index.htmlの<body aurelia-app="src/main">タグの部分に、プログラムの内容が表示されます。
タグに、aurelia-app属性を付けると、そこに表示されるようです。
これなら、Webの機能を分割して、配置したり、取り除いたりすることが、簡単にできそうです。
"src/main"のため、main.jsが呼び出される。
app.jsは、どこで呼ばれるのでしょう。別の名前に変更できるのでしょうか。
この点は、不明です。
とりあえず、今は、暗黙の内に、app.jsが呼ばれると考えておきます。
app.jsと、app.htmlは、自動的に、密接に結びつけられるようです。
htmlに、${heading}と記述すれば、ここに、Appクラスのheadingプロパティが表示されます。
firefoxで、index.htmlファイルを表示させましたが、Webサーバーを使って表示させる方法もあります。
その場合、NodeJSがインストールされていれば、次のコマンドで、Webサーバーがインストールされます。
$ npm install http-server -g
実行は、プロジェクトのフォルダで、
$ http-server -o -c-1
これで、ブラウザが自動的に起動し、プログラムが表示されます。
終了するには、ターミナルで、Ctrlを押しながら、cを押します。（Ctrl+c）
0 件のコメント:
コメントを投稿