ゼロからAngularでSPAを作ってみた(1) はじめてのアプリ編

2018/03/06 - UI/UX, 開発ツール Angular, Javascript, TypeScript, プログラミング, 開発

はじめに

Single Page Application （SPA）って知っていますか？
Webサイトでコンテンツのリンクをクリックした時に妙に表示が早いな〜というとき、実はページを移動するのではなくてページの一部のみを書き換えていたりします。
こういったサイトの作り方を Single Page Application （SPA）といって、最近ではメディアでも採用する例が出てきました。
SPAは古のHTMLとは違って、JavaScriptを使ってページを大胆に書き換えていくので、一般にフレームワークを使います。フレームワークとしては React や Vue.js などがありますが、今回は Angular を使ってみます。

必要なものをインストールする

誰でも（プログラミング初級者でも？）できるように＆自分用の覚書を兼ねて、まっさらな macOS High Sierra 上に開発環境を作っていきます。（Windows の人はごめんなさい。適宜読み替えてください）

Homebrew のインストール

ここを参考にして、Homebrew をインストールします。（途中でキー入力やパスワード入力が必要になることがあるので、表示されるメッセージに注意してください）

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

1	$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

nodebrew と node.js のインストール

ここやここを参考に nodebrew と node.js をインストールして設定します。

$ brew install nodebrew
$ /usr/local/opt/nodebrew/bin/nodebrew setup_dirs
$ echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> .bash_profile
$ source ~/.bash_profile
$ nodebrew install-binary stable
$ nodebrew use stable

$ brew install nodebrew

$ /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

$ echo "export PATH=$HOME/.nodebrew/current/bin:$PATH" >> .bash_profile

$ source ~/.bash_profile

$ nodebrew install-binary stable

$ nodebrew use stable

Angular CLI のインストール

ここを参考に Angular CLI をインストールします。

$ npm install -g @angular/cli

1	$ npm install -g @angular/cli

これで準備ができました。

はじめてのアプリを作って動かす

次のコマンドを打ってアプリの雛形を作ります。（dac-angular は名前なので適当なものを使ってください）

$ ng new dac-angular

1	$ ng new dac-angular

作成したアプリのディレクトリに移動して ng serve を実行すると、サーバでアプリが動くので localhost:4200 を開くと雛形のアプリが表示できます。

$ cd dac-angular
$ ng serve

1 2	$ cd dac-angular $ ng serve

Angularの雛形アプリをブラウザで表示

チャットアプリを作る

ここから、雛形のソースコードを編集してチャットアプリを作っていきます。ソースコードの編集にはVisual Studio Codeを使うといいでしょう。

Visual Studio Code の画面

TypeScriptの変更

Angular では、JavaScript に型とクラス定義ができるようした TypeScript を使ってプログラムを書きます。わからない人はだいたい JavaScript だと思っておけばいいです。
以下のコードでは、チャットメッセージが流れる timeline を string の配列で定義して、最初のメッセージとして 'Hello!' を入れています。また、メッセージが送信された時のメソッドとして add を定義して、そのなかで受け取った timeline に追加するようにしています。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  timeline:string[] = ['Hello!'];

  add(value: string) {
    this.timeline.push(value);
  }
}

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

timeline:string[] = ['Hello!'];

add(value: string) {

this.timeline.push(value);

}

また、HTMLテンプレートに app.component.html、スタイルに app.component.css を使うように定義してあるので、これらのファイルも編集していきます。

HTMLテンプレートの変更

input に入力した内容（input.value）を button をクリックした時に add メソッドの引数で渡すようにしています。また timeline 配列の中身を Forループ（*ngFor）で表示するようにしています。

<div>
  <input type="text" #input>
  <button (click)="add(input.value)">Send</button>
</div>
<ul>
  <li *ngFor="let item of timeline">
    {{ item }}
  </li>
</ul>

<div>

</div>

<ul>

</li>

</ul>

スタイル（CSS）の追加

とりあえずulの行頭の●を消すスタイルを追加しています。

ul {
  list-style-type: none;
}

ul {

list-style-type: none;

}

まとめ

これで、入力して「Send」ボタンを押すと、入力したものが一覧に追加されていく画面が作れました。

チャットアプリ画面（1）

ここまでのサンプルはここからダウンロードできます。
次回は、Firebase を使ってデプロイ・公開する予定です。

: Tableauを利用してMySQLとRedshiftのクロスDBジョインを実現する

はじめに RedshiftやTreasureDataなどのデータマート用のDBにはID単位の解析結果が格納され、ローカルのMySQLにはIDに紐づいた名称マスタが管理されている構成の場合、データマートのクロス集計結果に対してIDに紐づいた名称を付与したいことがあります。データマート用に用意したDB …

: fastavroとjqでAVRO形式のファイルからデータを取得しよう

AVRO形式のファイルを取り扱いたい AVROとはApacheプロジェクトのひとつとして開発されているデータ交換形式です。　コンパクトなバイナリで高速なシリアライズ・デシリアライズが行えるため、サーバーログなどに利用されています。弊社内での一部システムのログデータにも利用されているのですが、専用の …

: x-callback-urlを使ってみた

x-callback-urlとは？ iOSのアプリ間連携の仕様の一つみたいです。簡単に言うと、ディープリンクを行うためにカスタムURLスキームを利用するが、アプリ毎にバラバラな規則でURLスキームを設定するとアプリ間連携をスムーズに行うことができないため、どのような規則でURLスキームを設定するかを …

: Bootstrapのモーダル機能で多重表示する際に解決しなければならない2つの問題

はじめにみなさんこんにちは、プロダクト開発本部の亀梨です。普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う統合プラットフォームの開発・保守を担当しています。エンジニアの皆さん、デザインってどうしてます？わたくしはプライベートでとあるW …

: ゼロからAngularでSPAを作ってみた(3) CI: 継続的インテグレーション編

前回までのおさらいと今回やること前々回（はじめてのアプリ編）と前回（デプロイ・公開編）で、作成した Angular のチャットアプリを Web に公開するところまでいきました。でも、デプロイするのに、毎回決まったコマンドを打つのって面倒ですよね。今回は GitHub でソースコードを管理して、 …

: いまさらですが… GNU screen チートシート

最近はローカル環境で開発するようになってきたので、screen コマンドを使う機会も少なくなって来たような気がします。で、使ってないと忘れてしまうので、チートシートを作ってみました。参照サイト GNU screen [quick_reference] 起動コマンド動作 screen -S &l …

: 初心者がRailsで開発 – deviseでユーザー認証設定 –

こんにちは、2年目のYukaです。開発部所属でありながら実は、、実際に自分で手を動かして開発する機会がなかなかありませんでした。。しかしついに、、、開発初心者がRailsでWebアプリの開発に挑戦します！！今回のゴールは社内でも使用しているGoogleアカウントで簡単にログインができるよう …

: 【HTML5】4ツール出力ファイルサイズ比較

こんにちは、近江です。前回もHTML5のSwiffyについて書かせて頂きましたが、まだまだHTML5について調査しています。今回はSwiffyを含めた4つのHTML5系ツールで、同じ素材で同じアニメーションを作成した時のファイルサイズを比較したいと思います。何故ファイルサイズの比較をするかと言 …

: Vagrantの機能を使って開発環境の効率をあげてみた。

プラットフォーム・ワンのシステムの運用・保守担当のエンジニアです。保守の仕事に関わると、ユーザからのお問い合わせだったり、監視アラートによる検知からシステムを調査することがあります。ログとソースコードを見て、不具合を特定し改修する。すぐできればカッコいいですが、「本番環境に反映して別のエ …

: MacのSSHポートフォワーディングツール「autossh」と「Coccinellida」をご紹介！

はじめにみなさんこんにちは、プロダクト開発本部の亀梨です。普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う統合プラットフォームの開発を担当しています。さて、皆さんはSSHポートフォワーディングするときにどんな方法で行っていますか？わた …

PREV: MacのSSHポートフォワーディングツール「autossh」と「Coccinellida」をご紹介！
NEXT: ゼロからAngularでSPAを作ってみた(2) デプロイ・公開編