ゼロからAngularでSPAを作ってみた(1) はじめてのアプリ編
- 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 をインストールします。(途中でキー入力やパスワード入力が必要になることがあるので、表示されるメッセージに注意してください)
1 |
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" |
nodebrew と node.js のインストール
ここやここを参考に nodebrew と node.js をインストールして設定します。
1 2 3 4 5 6 |
$ 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 をインストールします。
1 |
$ npm install -g @angular/cli |
これで準備ができました。
はじめてのアプリを作って動かす
次のコマンドを打ってアプリの雛形を作ります。(dac-angular
は名前なので適当なものを使ってください)
1 |
$ ng new dac-angular |
作成したアプリのディレクトリに移動して ng serve
を実行すると、サーバでアプリが動くので localhost:4200
を開くと雛形のアプリが表示できます。
1 2 |
$ cd dac-angular $ ng serve |
チャットアプリを作る
ここから、雛形のソースコードを編集してチャットアプリを作っていきます。ソースコードの編集にはVisual Studio Codeを使うといいでしょう。
TypeScriptの変更
Angular では、JavaScript に型とクラス定義ができるようした TypeScript を使ってプログラムを書きます。わからない人はだいたい JavaScript だと思っておけばいいです。
以下のコードでは、チャットメッセージが流れる timeline
を string
の配列で定義して、最初のメッセージとして 'Hello!'
を入れています。また、メッセージが送信された時のメソッドとして add
を定義して、そのなかで受け取った timeline
に追加するようにしています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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
)で表示するようにしています。
1 2 3 4 5 6 7 8 9 |
<div> <input type="text" #input> <button (click)="add(input.value)">Send</button> </div> <ul> <li *ngFor="let item of timeline"> {{ item }} </li> </ul> |
スタイル(CSS)の追加
とりあえずul
の行頭の●を消すスタイルを追加しています。
1 2 3 |
ul { list-style-type: none; } |
まとめ
これで、入力して「Send」ボタンを押すと、入力したものが一覧に追加されていく画面が作れました。
ここまでのサンプルはここからダウンロードできます。
次回は、Firebase を使ってデプロイ・公開する予定です。

関連記事
-
-
Burpの使い方!
こんにちは、第二ソリューション開発部の谷口です。 受託開発の部署で開発を担当してます。 APIを扱う機会が多く、今回は通信内容を確認するためのローカルプロキシツール「Burp」について書かせて頂きます。 Burpとは Webアプリケーション開発時の検証において、Webサーバとブラウザ間の通信内容を確 …
-
-
クラウド電話API “Twilio”で起こされてみた
どうも、開発部のクラヴマガです。 弊社サービスも最近はAWSの様なクラウド環境でサービスを構築することが多くなりました。 そこで問題になるのが、障害などによる深夜対応・・・。 データセンターに物理サーバをおいていた頃は、データセンターから障害発生時に 電話連絡をもらっていたのですが、クラウド環境では …
-
-
AWSにRailsアプリをデプロイする(準備編)
今回は、せっかくRailsで開発したアプリをAWS上に公開してみたいので その構築方法をまとめていきたいと思います。 (前回の記事:初心者がRailsで開発 – deviseでユーザー認証設定 ) AWSの設定はすでに社内で使用できるようになっていたので割愛します。 ★やりたいこと Gitlabでコ …
-
-
Tableauを利用してMySQLとRedshiftのクロスDBジョインを実現する
はじめに RedshiftやTreasureDataなどのデータマート用のDBにはID単位の解析結果が格納され、ローカルのMySQLにはIDに紐づいた名称マスタが管理されている構成の場合、データマートのクロス集計結果に対してIDに紐づいた名称を付与したいことがあります。 データマート用に用意したDB …
-
-
【クラウド初心者向け】Google Cloud Platform(GCP)でWebサイトを公開してみよう!
はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 背景 わたくしは最近プライベートで開発したWebサービスをインターネット上に公開しまし …
-
-
最強のSQLクライアント(GUIツール)「TeamSQL」を使ってみた!
はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 エンジニアの皆さん、SQLクライアント(GUIツール)って何使ってます? わたくしはこ …
-
-
Selenium × PHP でテスト自動化!【環境構築編】
はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 テスト自動化の背景 わたくしが担当するXmediaOneでは品質担保のために①コードベ …
-
-
MacのSSHポートフォワーディングツール「autossh」と「Coccinellida」をご紹介!
はじめに みなさんこんにちは、プロダクト開発本部の亀梨です。 普段はXmediaOneというメディアプランニング・広告運用管理・トラッキング・マーケティング分析を行う 統合プラットフォームの開発を担当しています。 さて、皆さんはSSHポートフォワーディングするときにどんな方法で行っていますか? わた …
-
-
いまさらですが… GNU screen チートシート
最近はローカル環境で開発するようになってきたので、screen コマンドを使う機会も少なくなって来たような気がします。で、使ってないと忘れてしまうので、チートシートを作ってみました。 参照サイト GNU screen [quick_reference] 起動 コマンド 動作 screen -S &l …
-
-
初心者がRailsで開発 – deviseでユーザー認証設定 –
こんにちは、2年目のYukaです。 開発部所属でありながら実は、、 実際に自分で手を動かして開発する機会がなかなかありませんでした。。 しかしついに、、、 開発初心者がRailsでWebアプリの開発に挑戦します!! 今回のゴールは社内でも使用しているGoogleアカウントで簡単にログインができるよう …