BootstrapをAngularに導入して、初心者でも簡単にかっこいナビゲーションバーを作る

ナビゲーションバーをかっこいいデザインにしたい

前回の記事でComponentの理解をしながらナビゲーションバーの骨格だけ作成したが、実際に使えるものとは程遠いものでした
今回は、そのナビゲーションバーを使えるものに変えていこうと思います 最終的にはこんなナビゲーションバーが作成できることを目指していきます

Webアプリケーションを簡単にかっこよくするには？

webページのデザインはcssで定義していくが、一からデザインを指定していくのは労力・スキル・センスが必要になる
そこで、簡単にwebページをデザインするcssライブラリなるものが存在している
一番、有名で多く利用されているものがBootstrapなのだが、今回のwebアプリ開発ではこれを利用していく

AngularにBootStrapを導入する方法

すでに作成したAngularアプリのディレクトに移動したうえで、bootstrapをインストールする

npm install --save bootstarp jquery popper.js

次に、angularのアプリケーションがbootstrapのcssやjqueryを読み込めるようにする angular.jsonを開き、以下のを追加

"styles": [
    "client/styles.scss",
    "node_modules/bootstrap/dist/css/bootstrap.min.css" //追加
],
"scripts": [
    "node_modules/jquery/dist/jquery.slim.min.js",　//追加
    "node_modules/popper.js/dist/umd/popper.min.js",　//追加
    "node_modules/bootstrap/dist/js/bootstrap.min.js"　//追加
],
...

これでbootstarpを利用する準備が整った

Nav.component.htmlの編集

現状だとナビゲーションバー自体にも枠しかないので、内容を書き換えていく
まずは、サンプルコードをbootstrapの公式サイトをコピーし、nav.component.htmlに貼り付け、書き換えていく 書き換えた結果は以下のとおり

<nav class="navbar navbar-expand-lg">
    <!-- 1.アプリのアイコンと名称 -->
    <a class="navbar-brand" href="#"> 
        <img src="assets/img/iconmonstr-calculator-1.svg" width="30" height="30" class="d-inline-block align-top" alt="">
        App Name
    </a>
    <!-- 2.メニュー枠 -->
    <div class="collapse navbar-collapse" id="navbarNav"> 
        <!-- 3.メニュー内容 -->
        <ul class="navbar-nav mr-auto">
            <!-- 4.メニューの構成要素 -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
                    Home<span class="sr-only">(current)</span>
                </a>
                <!-- 5.dropdown -->
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <h6 class="dropdown-header">Home</h6>
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
                    Planning Tools<span class="sr-only">(current)</span>
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <h6 class="dropdown-header">Planning Tools</h6>
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
                    Data Registory<span class="sr-only">(current)</span>
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <h6 class="dropdown-header">Data Registory</h6>
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
                    Admin<span class="sr-only">(current)</span>
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <h6 class="dropdown-header">Admin</h6>
                    <a class="dropdown-item" href="#">User Management</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown">
                    {{user}}<span class="sr-only">(current)</span>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                    <h6 class="dropdown-header" href="#">Profile</h6>
                    <a class="dropdown-item" href="#">Sign Out</a>
                    <a class="dropdown-item" href="#">User Profile</a>
                </div>
            </li>
        </ul>
  </div>
</nav>  

この一つの内容の記載を覚える必要はない。コメントアウトされている1~5の構成を抑えておき、必要に変更していく
アイコンの画像は一般的にAssetsディレクトリに格納しておき、それを読み込むように指定する

Nav.component.scssの編集

最後に画面のスタイルを変更する。テキストカラーやハイライトを変更する

.navbar{
    background-color: #ddd;
}
a {
    color: black;
}

Angularを起動して確認

コマンドラインでng serve --host 0.0.0.0 --port 8080 --disableHostCheckを入力し、Angularを起動させる 起動後、ナビゲーションバーが機能していることが確認できる

補足

今回 Bootstrapの詳細は省力してしまったが、もう少し詳しく詳しく知りたい方は、以下を参照いただきたい

1. Bootstrap公式ページ
   Bootstrapでできることとそのソースコードがすべて紹介されているので、自分のやりたいことにマッチするものがないか一通り確認してみて下さい
2. Bootstrap 4 フロントエンド開発の教科書
   こちらは初心者の方でもBootstrapが学べるようになっております。私も一読しました

【Angular超入門】ホーム & ナビゲーションバーの枠づくり ~Componentをざっくり理解する~

はじめに

非エンジニアが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つの領域で分かれている。

1. import部分: これはこのComponentを動作させるために読み込むライブラリを指定している。もしも追加でライブラリが必要ならここに追加していく
2. @Component{・・・}部分: これはComponetとしての設定を表している。
   1. Selector: htmlファイルでの呼び名を指しており、htmlファイル内で<app-home></app-home>というタグ出てきたらこのComponentを指すことを表している。
   2. templateUrl: このComponentファイルが対象にするhtmlファイルを表している。
   3. styleUrls: 上記のhtmlファイルに適用対象にするstylesheetファイルを表している
3. 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;
}

Angularを再起動すると、以下のような画面になる

次回の記事

今回はナビゲーションバーとホーム画面の骨格を作成しながら、Componentの基礎理解をしたので、bootstrapを利用してナビゲーション機能に装飾を加える

【入門者でもわかる！】 Angularの構造をざっくり理解する

はじめに

非エンジニアがWebアプリケーション開発に挑戦した道筋をこのブログに残しております

当ブログでは初学者向けということもあり、今 学ばなくてもよいものは極力省略し、学ぶべきポイントを絞ってお伝えしております

今回は開発環境にAngularのコマンドを使ってひな形のアプリを作成し、その内容を見ながらAngularを理解していきます

まだ開発環境が整備できていない方は過去記事を参照することをお勧めします

businessman-learn-coding.hatenablog.com

Angularのアプリケーションひな形作成

フルスタックと呼ばれるAngularは、コマンドで簡単にアプリケーションのひな形（プロジェクト)が作れるようになっている。まず、開発を始めるときはそのコマンドを利用するとよい

ng new sscp-v4(←アプリ名) --routing=true

Style Sheetの記述方法を確認される。scssがcssの上位互換なので、scssを選択する

Angularのアプリケーションのプロジェクトを知る

アプリケーションを開発する上で、まずはひな形がどんなものなのかを確認してから学習を進める。

一般的にはあまりない学習アプローチかもしれないが、初学者にとってはこれを知ることがWebアプリケーションを知ることにつながるので、一読されることをお勧めする

• e2e : 開発したアプリケーションを複数ブラウザで自動でテストするためのファイルが格納されている。すぐには利用しない

• node_module : Angularで利用する機能（モジュール）やライブラリが格納されている。参照することはあっても利用することはない

• src : Angularのアプリケーションの中身が格納されているフォルダ。この中身を変更して開発を進めていく

• その他 各種ファイル : Angularのコンパイル（開発コードを実行コードへ変換する処理）やAngularのコマンドの設定について記載されたもの。アプリ開発の初期で多少変更する

次に、開発でよく利用するsrcディレクトリの内容を確認するとAngularの理解が進むので、一読することをお勧めする

• app : アプリのコードが格納されるフォルダ。開発者が主に利用していく。

• assets : Webアプリケーションで利用する画像などを格納するフォルダ。

• environment ：実行コードのステージ管理の設定をするファイルが格納されたフォルダ。初学者は存在を知る必要があるが、内容は細かく知らないくてよい

• その他 各種ファイル : 一般的なWebページを構成するファイルが並ぶ。AngularでWebページの内容をapp内に格納されたコードで変更するので、そこまで頻繁に利用するものではない

Angularの基本の仕組み

Webアプリケーションの骨格はappフォルダにあり、ここに追加したい機能をコーディングして開発していくことになる。

ただ、Angularはフルスタックと呼ばれるだけあり、構成に一定の規定があり、それを理解できないと実際には開発ができないので、まずはそれを理解していく

Angularの構成は大きくModule, Component, Serivce, Routing, Guardがある。もちろんこれ以外もあるが、まずはこれから覚えることが大切。

• Module: 一定の機能をまとめた機能群。初学者は利用するのは難しいが、以下のComponentなどを動作させる元となる機能を提供する。
• Component: 画面の構成要素。簡単なページであれば1コンポーネントが1画面になる。複雑なものだと、複数のコンポーネントで画面を作成することになる。Componentの開発ができるようになるが、Angular開発の第一歩。
• Service: 外部とのデータ通信などを担う。外部通信はComponentやGuardで共通して利用するものが多いので、機能を切り離しておけるようになっている。
• Routing: Webページ（Component）の切り替えをコントロールする。中身は理解できてなくとも簡単に利用できるので、最初はあまり気にしなくてよい。Guard: ユーザのチェック機能。ログインしてないユーザにはWebアプリケーションは表示されないようにしたりするための機能。ログイン機能を作成する際に学習する。これも、Componentなどが理解できていればそこまで気にしなくてよい

これらの機能を追加・組み合わせていくことでWebアプリケーションが作成できる。一般の書籍だとdirectiveやpipeについて説明しているものがあるが、最初は上記があることを理解していればそれでよい。

今後、実際のアプリケーションを作成していきながら、各機能についての学習を進めていく。

次回の記事

ナビゲーションバーの作成を通じて、Componentについて理解する

AWS Cloud9を利用してAngularの開発環境を整える

はじめに

非エンジニアがWebアプリケーションを開発する上でたどる、学習の道筋をこのブログに残しております

本日はAngularを学習する際の開発環境を整える方法をご紹介します

Angularを学習するのにそもそも、前提知識が足りているか不安な方は過去の記事を確認されることをお勧めします

businessman-learn-coding.hatenablog.com

AWS Cloud9

プログラミングをする際には、Angularを動作させる整備をしなければらなず、普通は自分のPCにいくつかツールをインストールしたり、そもそも性能の低いPCだと買い替えなければならなかったりする。

入門者にとってはこの整備が難解だったり、成功しないとやたらと時間がかかったりするので、できれば避けたいことである

また、非エンジニアの方はプログラミングの学習は個人所有のPC、仕事は会社支給のPCと、時によって使うPCが変わったりすると、仕事の空き時間があったとしても仕事用PCしか持っておらずプログラミングの学習が進められなかったりし、効率的ではない

そういう方に推奨なのが、AWS Cloud9だ。クラウドの開発環境でブラウザから利用でき、すでにほとんどの言語がインストールされており、すぐに使い始められることや、PCのスペックに影響しないこと、複数の端末からアクセスできるメリットがある

aws.amazon.com

上級者の方でなければこれでほとんど問題ない。もし、処理が遅いと思った場合はあとから増強できるので心配ない。

ただし、利用時間と環境のスペックに応じて課金されることがあるので注意してほしい。

参考に私の場合だと月300円ほどで済んでいるのであまり気にしないでもいいだろう。使わなければ課金されないのでそこまで神経質になる必要もない

AWS Cloud9の始め方

まずは、AWSにログインする。AWSへの登録・ログインについて知りたい人は以下のリンクを参照し欲しい

AWS アカウント作成の流れ | AWS

AWS コンソールにログイン後、検索ボックスにCloud9とタイプすると、AWS Cloud9のサービスが表示されるので、選択する

ページが切り替わった後、Create Your Enviromentボタンを押し、開発環境を作成する

自分が設定したい環境の名称をつける。必要に応じてこの環境の説明を入れる。AWS Cloud9はいくつかの環境を分けて作成できるので、もし別用途で全く違ったツールを使いたい時などは別の環境を用意することをお勧めする

名前を入力したら、Next Stepを押す

設定画面がでてくるが基本的にはすべてデフォルトでよい。内容だけ簡単に紹介すると

Environment Type : 利用環境。すでに稼働しているサーバーかEC2を選択できる。EC2はAWS内のクラウドコンピューティングサービスで、特にサーバーなどもってない方はこちらをそのまま選ぶと、勝手にサーバーを作成してくれる

• Instance Type: EC2を設定した際に出てくるもの。クラウドコンピューティングサービスの性能を決める。後から変更できるので、一番性能が低いものに設定すればよい。性能が低ければ安いので、今後必要に応じて性能をあげることを検討する
• Platform : OSの選択。AmazonがカスタムしているLinuxかUbuntsuが選べる。入門者にとってはどちらも変わらないので、Amazon Linuxをそのまま選択すればよい
• IAM Role : AWSの権限設定。Cloud9を操作する権限が自動で作成されます。こちらもデフォルトで構わない

Next Stepを押して次へ進む

Reviewの画面になったら、Create Environmentを押し、実際の開発環境を作成する

すると、AWS Cloud9のIDE（開発環境）に自動的に切り替わる。最初は2,3分待つ。

IDEは大きく5つで構成されており、一般的なIDEと同様な機能が提供されている

1. メニューパネル : Cloud9内でできるファイル操作／検索／アプリケーションの実行コマンドが入っている
2. ディレクトリパネル : 作成した開発環境のディレクトリ（フォルダ／ファイル）が表示されている
3. エディタタブ : コードを記述するエディタの部分。ディレクトリのファイルをダブルクリックするとタブが追加される
4. コンソール : コマンドの実行ができる。言語やライブラリのインストール／Angularのコンパイル（編集したコードを実行可能な形式にする処理）を実行する
5. ツールパネル : Cloud9の表示設定や他AWSサービスへの連携設定ができる

※ 正式な名称はわからないので、勝手に呼称している

最初は2,3をほとんど利用するので細かく機能を知る必要はない

AWS Cloud9でAngularを利用できるようにする

残りはAngularを設定するだけだ。Cloud9ではほとんど言語、パッケージがインストールされているが、私が利用した際はAngularは標準でインストールされていなかった

Angularを導入するためには、node.js／npmをインストールする必要があるので、これらが初期インストールされているか確認する

node -v

npm -v

どちらもインストール済なのでAngularのみをインストールすればよい。npmはnodeの統合パッケージ管理ソフトでこれを利用するとAngularをインストールできる

通常）Npm install -g @angular/cli

バージョン指定) Npm install -g @angular/cli@8.1.3

その他 v8の最新版) Npm install -g @angular/cli@v8-lts

途中で、Angularの利用状況をgoogleに連携するかしないかを問われますが、私はどちらでもよいのでYesにしています

実際にAngularが利用できるか一つプロジェクト作成してみる

Ng new (アプリ名）

するとAngularのアプリの骨格が作成され、ディレクトリが作成される

作成したディレクトリに移動し、アプリを起動してみる

Cd (アプリ名)

ng serve --host 0.0.0.0 --port 8080 --disableHostCheck

Compiled Successfullyがでたらコンパイルが完了しているので、Webページを確認してみる

メニューバーのPreview⇒Preview Running Applicationを選択する

Webページが立ち上がり、Angularの初期テンプレートアプリが表示される

これにて完了。

次回の記事

本日はAngularの開発環境を整えた。次回はAngularを学習していく。

Angular学習前に学ぶべき3つのこと

はじめに

非エンジニアがWebアプリケーションを開発する上でたどる、学習の道筋をこのブログに残しております

基本はコーディングはやって覚えるのが大切とはいえ、Angularでコーディングを始める際に最低限知らないと学習が難しくなるポイントを紹介します

なぜ、SPAのフレームワークとしてAngularを選択するか悩んでいる方は以下の過去記事を読むことをお勧めします

businessman-learn-coding.hatenablog.com

Angularを利用するために必要な知識

いざ、Angularを使い始めるとなって、いろいろ書籍／サイトを見ても中々進められない。Angularは一定の知識レベルの方が利用するようなフレームワークになっており、各種文献もそれを前提にしているので、以下の3つがわからない方は書籍・サイトなどで先に学習することをお勧めする

1.html,css

基本的webページを作るときに必ず使うのがhtml（Hyper Textmark-up Langage）とcss（cascading Style Sheet)。深くまで理解する必要はないが、簡単なホームページ作成ができるぐらいの知識が必要になる。

html／cssを題材にした書籍／オンラインコースは数限りなくあるが、私は「Html&CSSとWebデザインが1冊できちんと身につく本」をお勧めする

HTML&CSSとWebデザインが 1冊できちんと身につく本

 サンプルの例がわかりやすく、ホームページを作りながら学べ、デザインの基本が抑えられるので、簡単に一読するとよいと思う

これ以外の書籍でもいいのだが、html5以降に対応している書籍を選ぶとよい。最新だと一部画面に動きを出す際にcssで指定できたりするが、古い書籍だとこの部分に全く触れられていないので注意が必要である

2.javascript

画面変更やサーバー通信のロジックはjavascriptが担うことになる。ただし、Angularはjavascriptをさらに発展させたTypescriptを採用しており、メインはそちらを利用することになるので、どんな書き方をするのかを簡単に知れればよい。

AngularではTypescriptで書いた言語を自動でjavascriptに変換してくれるので、javascriptの学習はTypescriptを学ぶ1ステップになる。

javascriptを題材にした書籍／オンラインコースは数限りなくあるが、私は「javascript 超入門」を読んだ。

確かな力が身につくJavaScript「超」入門 第2版

 ただ、これは別の書籍でも構わないので、入門書を1冊読破することをお勧めする

3.Typescript

Angularでメインのロジックを書く際に利用する言語。ただ、javascriptの発展させたものなので、javascriptを簡単に学んだあとに書籍をざっと読めば理解はそんなに難しくないだろう

Typescriptについては、上記2つに比べてぐっと扱っている書籍／オンラインコースが減るので、わかりやすいものは少ない。

私は「速習 Typescritp」を一読したが、入門者にわかりやすくなっているわけではない。それ故に、一度javascriptの勉強を済ませておくことが肝要になる。

速習 TypeScript 第2版 速習シリーズ

書籍を選んだ理由も他と違い、Amazon Unlimitedの対象だったというだけなので、他にいい学習方法／書籍を探してもいいかと思う。

 次回の記事

本日紹介した3つの学習を終えた前提で、実際にコーディングを利用する環境を構築する

【SPA開発を始める方へ】SPAのメリットとフレームワークの比較

はじめに

非エンジニアがWebアプリケーションを開発する上でたどる、学習の道筋をこのブログに残しております

本日は、クライアント側に画面表示の機能を持たせるSingle Page Applicationについて整理します

Web開発を始める方で、そもそもSPAを学習するかどうか迷っている方はこちらの記事を事前にご覧ください 

businessman-learn-coding.hatenablog.com

シングルアプリケーションとは？

シングルページアプリケーションとは、それまではサーバー側で行っていた画面処理をクライアント側で行うアプリケーションの設計方法。

一般的なWebアプリケーションとの違いは以前掲載した

クライアント側で画面処理を行い、データのみをサーバーから取得することで、データ通信量を下げることができ、アプリの動作スピードを上げることができる。

一つのウェブページ内の表示を変更することでアプリを動作させることからシングルページアプリケーションと呼ばれる。

シングルアプリケーションのメリットを理解する

ここではシングルページアプリケーションのメリットをもう少し明らかにしたい。

データ量が減るとはどういうことかを理解するには、Webアプリケーション画面をもう少し深く理解する必要がある

普通のWebアプリの画面は大きく3つの種類のファイルから構成される

• html : 画面の構成を表すファイル。ページのテキストや入力フォームを設定できる
• css : テキストの色やフォームの形などを設定できる
• javascript : html,cssで記述されている画面の構成やテキストの色等をロジックで変更でき、アニメーションなどを実現できる

一般的なアプリケーションではページを更新するたびにhtmlのタグなども一式サーバーから送付される

一方で、SPAだとユーザのブラウザでjavascriptがhtml,cssを書き換えられる。サーバーに保管されているデータにアクセスが必要なときだけ、サーバと通信するのでら送付されるので、アプリの動作スピードを上げることができる

SPAを実現するライブラリ／フレームワーク

javascriptで画面を書き換えるといっても簡単ではない。単に、文字を書き換えるだけならまだしも、アプリとして機能を作成しようとすると非常に難しくなる

全てを一からコーディングしようとするのは難しすぎるため、SPAを実現するコード集（ライブラリ／フレームワーク）が発明され、広く利用されている

このコード集（ライブラリ／フレームワーク）はオープンソースとして、誰でも利用できるようになっているため、積極的に活用することをおすすめする

現在、広く使われているのはAngular／React／Vueの3つです。特徴をまとめると以下になる。

	Vue	React	Angular
リリース	2014/3	2013/3	2016/9
提供元	Evan You	Facebook	Google
基本機能	UI	UI	フルスタック
開発規模	小	中～大	大
学習コスト	中	低 ～ 中	高

Reactがバランスがよく、Vueが小規模なアプリ向け、Angularは大規模なアプリ向けといえる。

 今回採用するライブラリ／フレームワーク

今回は以下2点を考慮し、Angularを利用してWebアプリケーションを開発していく

• 作成しようとしているのが業務アプリケーションに近く、一定の規模になることが予想される
• 基本機能が最初から提供されるほうが学習しやすい

 次回の記事

Angularを学習する上での前提知識を整理する

businessman-learn-coding.hatenablog.com

【Web開発 未経験者向け】Single Page Application／サーバーレスアーキテクチャをざっくり理解する

はじめに

普段、丸の内でコンサルタントとして、自分の論理的思考力・業界知見・業務知見を駆使して、戦略策定／構想策定／業務改革を支援している

現状、Webアプリの開発を自分自身が担当することはないが、戦略の実現／改革の実現にIT・Digitalテクノロジーの活用が必須になり、それを広く利用できるようにするWebアプリケーションの構築・展開も必須になっている

コンサルタントとして、自分自身がWeb開発ができなくとも問題にならないのだが、戦略の意図を理解し、適切にテクノロジーを活用できる人材も少なく、戦略や改革が立ち消えになることも多々ある

そこで、いつかは"テクノロジーの活用"・"アプリ開発"含めて戦略・改革の実現を支援できるコンサルタントを目指し、Webアプリ開発の学習を始める

今回は初回として、Webアプリケーションの仕組みを理解しながら、最近注目されているSingle Page Application／サーバーレスアーキテクチャをざっくり理解していく

Webアプリケーションの仕組み

理系の大学院を出ていることもあり、授業でJavaでのコーディングをしたことはあるが、実践的なアプリケーション自体をしたことがないので、そもそも何を学習するかを見定めなければならない

Webとは何かなどの概念の知識は理解しているとして、Webアプリケーションを動く仕組みを理解したうえで、学習範囲を定めていきたい

一般的なWebアプリケーションの仕組み

少しでも興味がある人は一度は調べたことがあるかもしれないが、簡単に一般的なWebアプリケーションの仕組みを整理する

ざっくりいうと

• ❶最初にクライアント（ユーザのPC）が画面を操作する
• ❷画面の更新がサーバーへリクエストされる
• ❸ ~ ❾リクエストをアプリのサーバー群で処理した結果がサーバーからレスポンスとしてクラアインとに送信される
• ❿クライアントの画面が更新される

と単純に、処理依頼に応えて、処理結果を返信しているだけのものである

ただ、この処理を返すまでの仕組みが難しい。

たいていのアプリケーションはWebサーバー／アプリケーションサーバー／データベースサーバーのてい介してリクエストが処理されて、処理結果が返送される。

• Webサーバー（窓口）: クライアントからの入力を受け付けたり、アプリケーションサーバーの処理結果を表示する。言ってしまえば窓口。
• アプリケーションサーバー（作業場）: 実際の情報処理を担う。言ってしまえば作業班。
• データベースサーバー（保管庫）：情報が格納される。言ってしまえば保管庫

このように役割をはっきりさせることで、システムの管理をしやすくすることができる、企業の業務システムの構築などに多く採用されている

シングルページアプリケーション

上記のようなクライアント・サーバーの役割分担は、管理がしやすく一般的なアプリケーションの構成だったが、クライアントからのリクエスト／レスポンスのデータ量が大きくなってしまい、アプリケーションの動作が遅くなることが問題になっていた

近年はクライアント側に一定の画面処理をさせ、必要なデータのみをサーバーから取得することで、アプリケーションの動作を改善する”シングルページアプリケーション”というアプローチが採用されている。

普通のアプリケーションはサーバーから毎回 画面全体が送信されており、”マルチページ”なのだが、このアプローチでは画面全体の読み込みは最初1回で、その後は画面の一部しか更新されないので”シングルページ”に見えることから、シングルページアプリケーションと呼ばれる

Gmail, Alibaba, Netflix, Airbnbなど世界を席巻するIT企業が採用している。

サーバーレスアーキテクチャ

クライアントとサーバーの役割分担だけでなく、3層に連なるサーバー群も見直されている。

サーバーはもともとは物理的なコンピュータで構成されていたため、自分でハードウェアを購入し、OSをセットアップし、不具合が起きていないか監視をしたりする必要があった。そのため、管理が大変でWebアプリケーションを運営するコスト・スキルも非常に高くなっていた。

そこで、サーバーを仮想化してWeb上で提供するAWS,GCPなどのIaaSが登場し、サーバーの運営をサービスに委ねることでコスト・スキルが低減された

しかしながら、アプリケーションの機能とは関係ないサーバーの追加・削減などの管理業務は残っており、Webアプリケーションとして付加価値を生まない部分にコストが費やされていた。

そこで、さらに進んでサーバー管理を全くする必要がなく、処理が実行できるサーバーレスコンピューティングサービスが登場した。

始めは部分的な機能しか提供されたいなかったサーバーレスコンピューティングサービスも次第に充実しており、これらを組み合わた”サーバーレスアーキテクチャ”と呼ばれるWebアプリケーションの構造が考案された。

サーバーレスアーキテクチャでは、サーバーの管理をIaaSベンダーに委ねることで、Webアプリケーションの機能に集中でき、付加価値の高いサービスを作成できることになった。

現在は様々なサービスが提供されており、一部のWebアプリケーションの機能までをカバーするようなサービスも提供されている

tracpath.com

 今回採用するWebアプリケーションのパターン

自身が開発するWebアプリケーションだが、学習目的であることもあり、レスポンスの速度などを気にしたくない、可能な限りIaaSサービスを利用したいので、SPA + サーバーレスことを検討する

もちろんサーバー管理を勉強するために、一般的な構成を採用してもよいのだが、IT技術はいまだ勃興中であることもあり、将来のWebアプリケーションの開発にサーバー管理の知識が必要なくなる可能性が高く今後の学習する範囲からは除外する

次回の記事

まずはSPA構成する技術要素を確認しながら、利用可能なフレームワークの比較検討していく

businessman-learn-coding.hatenablog.com

引用記事

【入門編】サーバーとは？役割や種類をわかりやすく解説！

クライアントサーバの3階層システムの基本 - ponsuke_tarou’s blog

AWS Lambda（イベント発生時にコードを実行）| AWS

AWS 導入事例：株式会社 日本経済新聞社 | AWS

AWSの全体像をつかむ！Amazon Web Servicesをざっくり解説する | tracpath:Works