はじめに
非エンジニアがWebアプリケーション開発に挑戦した道筋をこのブログに残しております
私自身が初学者なため、今 学ばなくてもよいものは極力省略し、できるだけ平易な言葉で説明を残しています。そのため、内容が物足りないと思う方は別ソースをあたっていただければ幸いです。
今回はアプリケーションの骨格を設計しながら、Componentをざっくり理解していきます。
また、今回の記事は以下の過去記事の内容を実施した前提で記載されています。
今回作成するもの: ホーム画面 & ナビゲーションバー
今回はまず初めに骨格だけ、ホーム画面とナビゲーションを作成する。ログイン後のホーム画面は以下のようになる想定。
ナビゲーションバーは次回 Bootstrapを導入して、簡単に仕上げていくのでここでは簡単に枠だけ用意する Angularは画面ごとにComponentを作成していくことになるので、ホーム画面のためにHomeComponentを作成する。
ただ、HomeComponetのなかにナビゲーションバーを作成してしまうと、ホームから移動した際にナビゲーションが消えてしまうので、ナビゲーションはホーム画面と別にNavComponentを作成する
各内容の精査は後回しにすることにして、まずはこの部分だけの開発を進める
ホーム機能/ナビゲーションのComponentを作成する
実際に画面を作成していく。まずは2つのComponentを作成する。
ng g component home ng g component common/nav
ナビゲーションは共通機能にあたるので、わかりやすいようにcommonフォルダにComponentを作成している 作成されたcomponentはいくつかのファイルがフォルダにまとめられてできている。例としてHomeComponentのフォルダの中を確認すると、以下のようなファイルが作成されている。
- home.component.html : ホーム画面のhtmlファイル。画面に見せるテキストや画像の情報を記載する
- home.component.scss : ホーム画面のscssファイル。背景色やテキストの色を変更する。
- home.component.spec.ts : ホーム画面のテストファイル。ここにテストコードを記載しておくと、自動でテストを実行してくれる。本来なら、開発していきながらテストコードを書くべきなのだが、そもそも自分で開発したコードの理解度が低いとテストコードすらかけないので、ある程度自分の実現したいことがすぐにコーディングできるようになってから書けばよい。
- home.component.ts : ホーム画面のロジックを定義するファイル。Angularのコンポーネントの肝。これを理解しておくことが重要。
もし、html, css(ここではscss)の理解に自信がない方は過去記事を参照いただきたい。お勧めの書籍を紹介している。
まずはhome.coponent.htmlとhome.component.tsを確認しよう。
home.Component.html
<p>home works!</p>
これは単純に、画面にhome works!と表示するだけになっている。
home.Component.ts
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss'] }) export class HomeComponent implements OnInit { constructor() { } ngOnInit() { } }
こちらはやや複雑だが、大きく3つの領域で分かれている。
- import部分: これはこのComponentを動作させるために読み込むライブラリを指定している。もしも追加でライブラリが必要ならここに追加していく
- @Component{・・・}部分: これはComponetとしての設定を表している。
- Selector: htmlファイルでの呼び名を指しており、htmlファイル内で<app-home></app-home>というタグ出てきたらこのComponentを指すことを表している。
- templateUrl: このComponentファイルが対象にするhtmlファイルを表している。
- styleUrls: 上記のhtmlファイルに適用対象にするstylesheetファイルを表している
- export class HomeComponent implements Onint{・・・} 部分: 実際の画面処理について記載する部分。implementsには、画面を開くとき・閉じるときの処理を入れるときに使うもので、タイミングを記載する。ここでは、Oninitなので初期化時点となっている。今後、また出てきたときに詳しく学習する
今後は1,3の部分に書き加えて、アプリケーションを作っていくことになること理解できればまずはよい
Componentが画面に表示される仕組みを理解する
再度 Angularを起動して(起動済ならそのままでよい)URLを開く。
起動コマンドは ng serve --host 0.0.0.0 --port 8080 --disableHostCheck
※ Cloud9の場合
このままでは何も変わっていないことが確認できる。
AngularはComponentを作っただけでは初期画面が変わることはない。
これはAngularが複数のComponentを切り替えながら動作するアプリケーションだからであり、その表示処理を理解しておかないと開発することが難しい
まずは、現在表示されている画面がどのように表示されているかを確認していく。
appフォルダの中身を確認すると、ここにもComponentのセット一式があることが確認できる。
最初にひな形を作成した際に一緒に作成されたComponentであり、現在表示されている画面のComponentになっている。
app.component.htmlを見ると大量のコードが記述されており、これが先ほどの画面の内容になっている。
ここからわかるように、Angularでは必ず最初のAppComponentが表示されており、ここからComponentが切り替わっていくことになる。
app.component.html
の最後の行を見ると、
<router-outlet></router-outlet>
のコードがあると思うのだが、これが内容が切り替わる部分になっている。そのため、AppComponent自体は必ず呼び込まれており、その中の<router-outlet></router-outlet>
部分が切り替え(Routing)ていくことになる。
今はそれ以外のコードは必要ないので、<router-outlet></router-outlet>
以外を削除する。単純にコードをDelete, BackSpaceで消せばよい。
HomeComponentに切り替えられるように設定する
切り替え設定を変更するためにはapp-routing.modules.ts
の内容を変更する必要がある。
app-routing.modules.ts
に開くと以下のようなコードが記載されている。
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
"const routes: Routes = [];"
の部分が実際にどのように切り替えるかを表しており、今は何も設定がない。
ここにHomeComponent
に切り替えができるように設定を追記する
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './home/home.component'; //追加[1] const routes: Routes = [ { path: 'home', component: HomeComponent }, //追加[2] { path: '**', redirectTo:'home', pathMatch: 'full'} //追加[3] ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
詳細の説明は省くが 1. 切り替え先のコンポーネントを追加 2. URLがhomeになったらHomeCoponentを表示 3. このアプリケーションのどのURLを指定しても、homeに移動する(redirect)
以上のように設定されている
これで、最初にアプリケーションにアクセスすると必ずhomeに移動し、HomeComponentが表示されるようになる
実際に、Webページをリフレッシュ(F5を押す)してみると、画面が変わっていることがわかる
もしも、画面が切り替わっていない場合、コマンドラインで Ctrl + C
を押しAngularを停止させ、再度ng serve --host 0.0.0.0 --port 8080 --disableHostCheck
で起動しなおす
切り替えが不要なナビゲーションバーを追加する
一方で、アプリケーションの全画面共通で利用するようなナビゲーションは切り替えないので、app.component.html
の<router-outlet></router-outlet>
の外に追加する
Componentを直接指定する場合は、Componentのセレクタを指定すればよかったので、以下のように書き換える
app.component.html
<app-nav></app-nav> //追加 <router-outlet></router-outlet>
念のため、確認しておくと、NavComponentのselectorと追加したタグの名前が一致していればよい
nav.component.html
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-nav', //⇐ タグの名前と一致 templateUrl: './nav.component.html', styleUrls: ['./nav.component.scss'] }) export class NavComponent implements OnInit { constructor() { } ngOnInit() { } }
わかりやすいようにnav.componet.scss
で簡単に装飾を加えておく
p { margin: 10px; background-color: black; color: white; }
次回の記事
今回はナビゲーションバーとホーム画面の骨格を作成しながら、Componentの基礎理解をしたので、bootstrap
を利用してナビゲーション機能に装飾を加える