Angular version4からやって見た

f:id:marctech:20170807110647j:plain

皆さん、こんにちは。フロントエンドを担当しておりますセイです。

今回はjavascriptのフレームワークであるAngularをチュートリアルを通して勉強したのでご紹介したいと思います。

Angularを押さえればwebアプリなども開発出来るのでワックワクしながら進めて見ましょう！

1. Angular

2. Tour of Hero

3. Setup

Angular

f:id:marctech:20170807105745p:plain

Angular 、または AngularJS（アンギュラージェイエス）は、Googleと個人や企業のコミュニティによって開発されている、完全にJavaScriptで書かれたオープンソースのフロントエンドWebアプリケーションフレームワークである。MIT Licenseでライセンスされたフリーソフトウェアである。シングルページアプリケーションの開発において直面する多くの問題に取り組んでいる。JavaScript コンポーネントは、クロスプラットフォームなモバイルアプリ開発用フレームワークであるApache Cordovaを補完する。クライアントサイド用のMVCおよびMVVMアーキテクチャを、リッチインターネットアプリケーションで一般的に用いられるコンポーネント群とともに提供することにより、そのようなアプリの開発とテストを簡単にすることを目的としている。 https://ja.wikipedia.org/wiki/AngularJS

Angularはgoogle中心となって開発しておりフルスタック、コンポーネント指向、双方向データバインディングなどが特徴のJavascript フレームワークです。以前はAngularJSと呼ばれていたのですが、現在はAngularが正式名称となっております。

最新バージョンは2017年3月にリリースされたAngular 4となっており、6ヶ月ごとにメジャーバージョンアップを行う予定となっているそうで、2017年9月(もうあと一月後ですね）にはAngular 5が公開される予定です。

Tour of Hero

Angularを始めるにあたって、どういったロジックなのか、どのような機能があるかなどを学べるように公式サイトには、Tour of Hero というチュートリアルが用意されております。

f:id:marctech:20170807122644p:plain

https://angular.io/tutorial

Tour of Hero 。。。直訳すると英雄ツアーなんですが、これはチュートリアルをこなしてヒーローになれといういうことなのか。。笑

Tour of Hero の各章で行う内容をもう少し詳しく見て見ましょう。

1. Introduction: チュートリアルの概要です。live exampleからチュートリアルの完成品を確認することが出来ます。
2. The Hero Editor: ローカル開発環境を構築し、AppComponetというコンポーネントを編集してブラウザにTour of Heroというタイトルとヒーローの名前、IDを表示させます。また双方向データバインディング使用しヒーローの名前を編集出来るところまで進めます。
3. Master/Detail: HEROESという配列を作り、前章で使ったAppComponentにそのHEROESという配列を用いてリストを作成します。またヒーローリストを選択出来るように、作成したリストにクリックイベントを設定します。
4. Multiple Components: 今までAppcomponet内で複数の機能を実装してきましたが、より使いまわせるように機能ごとのComponentを作成し、AppComponentの中にまとめて行きます。
5. Services: 更に機能を分割していきます。AppComponent内に含まれていたHEROESというモックデータを別ファイルに切り分け、そのファイルからデータを読み取りAppComponentにデータを受けわたす、 hero.serviceという機能を作成します。
6. Routing: Router機能を用いてAppComponentに内に表示するComponentを切り替えます。
7. HTTP: サーバーからデータを取得出来るようにしたり、データを追加、保存出来るようします。

すごい濃厚なチュートリアルで、これを終わらせるとwebアプリで必要とされる基本的な機能を網羅出来るので頑張っていきましょう！

Setup

Tour of Heroの2.The Hero Editor内にあるsetupのページを参考に進めていきます。

※今回はMac OS Sierraで作業しております。

※セットアップにはnodeとnpmが必要となりますのでこれらがインストールされてない場合は用意して下さい。

・Node.js / npmをインストールする（for Windows） - Qiita

・Macにnode.jsをインストールする手順。 - Qiita

チュートリアルで使うquickstartというデータをgitからクローン、またはダウンロードします。

Clone

$ git clone https://github.com/angular/quickstart.git quickstart

Download

こちらからダウンロードし任意のフォルダに解凍して下さい。

用意出来ましたらprojectディレクトリに移動し、$ npm installで必要なパッケージをインストールし、$ npm start でローカルサーバーを立ち上げます。

$ cd quickstart
$ npm install
$ npm start

無事にローカルサーバーが立ち上がりますと『Hello Angular』と表示されるのでこれでセットアップは終わりです。

f:id:marctech:20170807162719p:plain

お疲れ様でした！！

内容が長くなるので今回はここまでで、次回からチュートリアルを進めていきたいと思います。

参考サイト

・ FN1704013 | Angular 4: とにかくAngular 4でコードを書いて動かす | HTML5 : テクニカルノート

ではまた！