Angularプロジェクトの構造を見てみる
おじさんはStackBlitzでAngularプロジェクトを
作成することに成功しました。
ただ何が何やらわかりませんのでゆっくり見ていきましょう。
プロジェクトの構造
srcフォルダ
index.html,main.tsが多分想像するにトップのhtml,起動時に動作する処理でしょう。
srcフォルダ詳細
- index.html
ソースの中はこれだけです。my-appは何のタグが後でわかります。
- main.ts
なにやら呪文のように見える文字がいっぱい書かれています。
*.tsファイルとは、TypeScriptファイルを指しています。
javascriptのソースを見やすくした版らしいです。
おじさんjavascriptも知らないのでまぁそんなもんてことでスキップです。
- style.css
これは空ですが、cssを定義するものですね。
cssはhtmlの見栄えを統一したりする際使用するものらしいです。
- angular.json
これも呪文のように見えますが、よくよくみると環境設定系の記述のように見えます。
なので今回は無視しましょう。設定周りをいじれるレベルになってからで。
- package.json
こちらはライブラリの定義っぽいのでこれもとりあえず無視しましょう。
そうなってくると肝なのは、index.html,main.tsの定義ですね。
my-appの定義、app.moduleがどこにいるか探します。
appフォルダ
フォルダ名からしてアプリケーションのコードが入ったフォルダであることが想像できます。
早速app.moduleがいました。main.tsで出てきてるやつは多分こいつでしょう。
appフォルダ詳細
- app.module.ts
importの定義にapp.component,hello.componentが定義されています。
こいつがアプリケーション定義をまとめてるっぽいです。
- app.component.ts
my-appの定義が出てきました！
index.htmlに出てきた。my-appはこいつのようです。
- app.component.html
書いてある内容を見る限り、表示されている結果はここの内容のようです。
- app.component.css
きっとapp.componentのHTMLを修飾するためのcssファイルでしょう。
- hello.component.ts
これも<h1>Helloが書いてあるので、結果に表示されている情報の
一部を担っているようです。
ここまで見ていくと開発する人はappフォルダに何かしら書いていくんだなと
想像できました。
またAngularというものを理解する上で、
- HTMLの知識
- CSSの知識
- TypeScriptの知識
が必要そうです。
おじさんは1,2は雰囲気でいけるかなと思うので、3だけ何とかなれば
いけそうです。
またAngularフレームワークを利用するにあたって独特の用語が
あるのでそういったものを確認しておきましょう。
こちらに日本語のチュートリアルがありますので、何度かやってみると
少しずつ理解できそうです。
