ゼロから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 を使ってデプロイ・公開する予定です。

: kubernetes の全ノード上で同じコンテナを動かす

今回は、kubernetes上で同一コンテナを全ノードで動かす方法を紹介したいと思います。kubernetes自体の起動方法はここでは割愛します。はじめに以前、CoreOSのFleet上でmackerel-agentを動かすということを行いました。今回は、kubernetes上で同じようにクラス …

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

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

: Charlesを使ってスマホアプリ(iOS)のUAを調べてみた

はじめにここ最近のスマホアプリには、Webブラウザの機能を実装したものが少なくありません。 (“スマホアプリ内で立ち上がるブラウザ「アプリ内ブラウザ」”の機能は「WebView」というコンポーネントを用いて実装されています。) 昨今のWebサイト、サービス運営に於いて、「通 …

: 自社サービスのDocker化(後編)

こんにちは。インフラ開発部の上田です。前回、前編としてDockerについて書き、早半年も経ちました。前編はこちらです今回は後編として、以下について書いてみたいと思います。 ■複数プロセス起動前編で書いた通り、通常のOS起動時とは異なり、コンテナ上で個別にプロセスを起動する必要があります。 …

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

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

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

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

: Scala入門準備編「開発環境構築」 – PHP使いからScala使いへ転身！

はじめにみなさんこんにちは、今月入社しましたプロダクト開発本部の亀梨です。普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う統合プラットフォームの開発を担当しています。 XmediaOneの開発で採用しているプログラム言語はS …

: クラウド電話API “Twilio”で起こされてみた

どうも、開発部のクラヴマガです。弊社サービスも最近はAWSの様なクラウド環境でサービスを構築することが多くなりました。そこで問題になるのが、障害などによる深夜対応・・・。データセンターに物理サーバをおいていた頃は、データセンターから障害発生時に電話連絡をもらっていたのですが、クラウド環境では …

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

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

: AWSにRailsアプリをデプロイする(公開編)

次にデプロイするため“aws rails デプロイ”でググってみるとunicorn、nginxというキーワードがでてくるのでとりあえずこれを設定していきます。アプリのsecret_key_baseの設定 [crayon-5db0ec76d63b4826300 …

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