みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!
Angularの解説シリーズです。
今回はデータと画面を紐付ける方法について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- 画面にデータを表示させる事ができる
Angularを使いこなそう!
画面にデータを表示しよう
作りたいもの
今回作りたいものは、TypeScriptで持つ値をブラウザ上に表示するアプリケーションです。
初期設定
※PCにnpm、nodeがインストールされている前提で記述します。
yarn等をお使いの方は読み替えてください。
環境がない人はcodesansboxを使ってね!
アプリケーションの作成
ng new アプリケーション名
ルーティングの質問
? Would you like to add Angular routing?(y/N)
拘りがなければNo
使いたいCSSの形式
? Which stylesheet format would you like to use?
拘りがなければCSS
✔ Packages installed successfully.
Successfully initialized git.
Successfully initialized git.
と表示されたらOKだよ!
アプリケーションの起動
npm start
http://localhost:4200/
にアクセスし、 このような画面が表示されたら初期設定は完了です。
TypeScriptファイルを編集しよう!
app.component.ts
初期画面を構築するTypeScriptファイルは以下に格納されています
MY-APP/src/app/app.component.ts
画面データに値を表示したいので、
app.component.tsを編集しましょう。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
// 対応するHTMLファイルのパス
templateUrl: './app.component.html',
// 対応するスタイルシートのパス
styleUrls: ['./app.component.css'],
})
// app.component.htmlに渡す変数
export class AppComponent {
title = 'ページタイトル';
name = 'サメハック';
message = 'hello angular!';
}
AppComponentクラスのプロパティを画面に表示するよ!
HTMLファイルを編集しよう!
app.component.html
初期画面のHTMLは以下に格納されています。
MY-APP/src/app/app.component.html
マスタッシュ構文{{ }}で値を受け取ろう!
{{ 変数名 }}
HTMLにAppComponentクラスの値を表示するには、
このような記述が必要となります。
<h1>{{ title }}</h1>
<p>こんにちは、{{ name }}です!</p>
このように記述することで、画面にTypeScriptで定義した値が表示できました。
マスタッシュ構文{{ }}にJavaScript式を記述しよう!
マスタッシュ構文{{ }}内はJavaScriptの世界なので、
JavaScriptの関数等も使用することができます。
messageを大文字に変換して動作確認してみましょう
<h1>{{ title }}</h1>
<p>こんにちは、{{ name }}です!</p>
<!-- 元のmessage -->
<p>message・・・ {{ message }}</p>
<!-- JavaScriptの関数を使って大文字に変換 -->
<p>message.toUpperCase()・・・ {{ message.toUpperCase() }}</p>
このように、JavaScript関数が使える事がわかりました!
toUpperCase()は小文字を大文字にする関数だよ!
まとめ
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈