新米プログラマーの備忘録#01Angular編


新米プログラマーの備忘録in Angular


新米プログラマーの備忘録へようこそ。

ここでは新米プログラマーの私が忘れないように、成長するために書き記していきます!

Angularてなんだろう?

AngularJSにはパフォーマンス面と機能の分かり易さについて多くの欠点があったため、AngularJSを構築した開発チームが1年かけて1からコードを書き直した[3]。一部の機能や名称は引き継がれているが、基本的に別のフレームワークである。

Angularはコンポーネントベースのアーキテクチャを採用している。すべてのAngularアプリケーションには、ルートコンポーネントと呼ばれる少なくとも1つのコンポーネントがある。各コンポーネントには、ビジネスロジックの処理を担当する関連クラスと、ビューレイヤを表すテンプレートがある。複数のコンポーネントを積み重ねてモジュールを作成することができ、各モジュールはそれ自体で機能単位を形成する。

https://ja.wikipedia.org/wiki/Angular

より

ん~わからん。

これで分かる人いたら教えてほしい。

さて、新米なりに頭を捻りに練って図に表してみた大体こんな感じらしい。

Angularの考え方

Angularはコンポーネントと呼ばれるHTMLテンプレートを組み合わせてページを作成できる!

ファイルを作成しよう!

開発環境構築は別の方の記事を見てくださいね。

さて、Angularの環境か構築できた前提で書きます。

まずはコマンドプロンプトを開いて構築のさいに作成したアンギュラのファイルに

cdコマンドで指定します。

例 cd C:\tmp 

*”tmp”の値は作成したファイル名に変更してください!

これで指定しました。

次は新規プロジェクトを作成しましょう!

今回は”angular-app”と名前を付けました。

なお、出ているコマンドを打ってもエラーを吐かれます。

こんな風に。(訳、newなんてコマンドは知らん)

しっかりと入力すると

こんなのが出てきます。

ここでは「y」と入力しましょう(Zは入力間違い)

エンターキーを押すと

こんな項目が出てきますキーボードの矢印キーで選択してエンターで決定です。

今回は"SCSS"を選択しましょう記述はCSSと同じなので安心してください。

すると…

めっちゃダウンロードして最後に"√"の文字が出れば完了です

指定したフォルダにAngularの開発ファイルができていますよ!

やっとコーディング

先程作成したフォルダをVScodeで開きましょう

おっと、VScode

”Angular Language Service”と"THML CSS Support"をダウンロードしましょう

これがないと大変ですよ!

フォルダを開くと

こうなっています。ファイルが多いですね

でも安心してください主に編集するのはsrcのappのcomponentとついたファイルだけです。

さて、まずはindex.htmlを開いてみましょう

headの所にいろいろ書いていますが今は置いておきましょう

さて、bodyの所に見慣れない文があります<app-root></app-root>

実はこれがAngularの書き方です。index.thmlを編集することはほぼなく、

componentファイルを編集してページを作っていくのです。

ではcomponentファイルはどうなっているのでしょうか

app.component.htmlを開くと

...何やら書いてありますね。

ですが、ここに書いてあるのは全部消してしまいましょう

消しても問題ないです。

もしプロジェクトフォルダが黄色になったり 「M」と表示される場合はgitのソース管理がNOになっているだけです放置しても大丈夫ですが不安な人はコミットしておきましょう。

消し後は写真のように入力します

見慣れない{{message}}がありますがAngularの書き方です

messageの中にある文字を表示するだけの簡単なものです

本体はtsファイルに書き込みます

implements OnInit

必ず必要ですこれがないと先程の{{message}}にHell-appが表示されません

message:string|undefined

messageという入れ物を作るものですstring|undefindは初期化子です

|undefind がないとコンパイルエラーになります

初期化なら何でもKOですがね

ngOnInit(): void {
      this.message='Hell-app';
  }

 これでmessageに”Hell-app”を格納します

これでapp.component.thmlに表示されるわけですね

もちろん{{}}の中には例えばcount()のような関数も入れ込めますよ

Angularの注意事項

Angularは非常に更新速度が速いです現在執筆中の2022/06/017日でも

ほんの9日前にアップデートによりAngular14になっています。

そのため参考書を使ってコードを書いてもエラーになることが、割と頻繁に起こります。なので現在私が見つけた書式を書き記します。

setInterval

AngularではsetIntrvalを止めるにはwindow.が必要になります

処理式は

window.setInterval(

() =>{任意の処理}

);

となり、停止させるにはclearIntrvalを使います。

なぜwindw.setIntrvalでしか止まらないのかというと

元々setIntrvalはsetIntrvalの文なのでAngularで使用すると返す値が変わってしまいます

なのでしっかりと期待する値を返すようにwindw.setIntrvalで指定して止めるのです。

10秒ピッタリゲームを作ってみよう!

先程のsetIntrvalを使ったミニゲーム簡単作れるので作ってみましょう

tsファイル


考え方としてはsetIntrvalを使って変数に1を100分の1秒ごとに加算して加算したものを100で割ると1秒が出てくるこれなら0以下の値も表現できる。

setIntrvalの中にif文があるのは5秒たったら非表示にするためこれがないとゲームとしては味気ない。

ファンクションをifで囲っているのはボタンを一つで制御するため

始めは”スタート!”と表示されてボタンが押されると”ストップ!”に..といった感じ

ストップボタンを押したときそれまで”0秒”と表示されていたカウンタに値を代入して正解を表示させる。

そのためだけにリセット機能とは別に書く。

thmlファイル

htmlは以外にもこれだけ単にtsファイルからの値を表示しているだけ。

SCSS

これを付けるとおしゃれになるdivのclassはなくてもいい。

そしてこれをこのまま書き写すとコンパイルエラーが起きる

何故?だって変数の定義書いてないから。

例えば

message: string | undefind;

とか

数字だったら

count: unmber =0 ;

とか

注意としては必ず初期化子を入れると。

これがないとコンパイルエラーになる。


あとがき

ここまで読んでいただき誠にありがとうございます。

新米プログラマーの備忘録#01いかがでしたでしょうか

もし詰まっていたものがとれたなら幸いです。

Angularはまだ学びの途中で拙い部分があるかと思いますが

どうか暖かい目で見ていただけると幸いです。

それでは、また会える日まで

さようなら

 

2022/06/17 金曜日。