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

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

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

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

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

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

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

f:id:BusinessManBlogForBusinessMan:20200520164427p:plain

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

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

f:id:BusinessManBlogForBusinessMan:20200520164446p:plain

e2e : 開発したアプリケーションを複数ブラウザで自動でテストするためのファイルが格納されている。すぐには利用しない
node_module : Angularで利用する機能（モジュール）やライブラリが格納されている。参照することはあっても利用することはない
src : Angularのアプリケーションの中身が格納されているフォルダ。この中身を変更して開発を進めていく
その他各種ファイル : Angularのコンパイル（開発コードを実行コードへ変換する処理）やAngularのコマンドの設定について記載されたもの。アプリ開発の初期で多少変更する

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

f:id:BusinessManBlogForBusinessMan:20200520164454p:plain

app : アプリのコードが格納されるフォルダ。開発者が主に利用していく。
assets : Webアプリケーションで利用する画像などを格納するフォルダ。
environment ：実行コードのステージ管理の設定をするファイルが格納されたフォルダ。初学者は存在を知る必要があるが、内容は細かく知らないくてよい
その他各種ファイル : 一般的なWebページを構成するファイルが並ぶ。AngularでWebページの内容をapp内に格納されたコードで変更するので、そこまで頻繁に利用するものではない

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

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

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

f:id:BusinessManBlogForBusinessMan:20200520164531p:plain

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