えとーのプログラミング解説#3

こんにちは、えとーです!

今回はずっと先延ばしになっていたプログラミング講座の第三回をやりたいと思います!

今回は前回構築した環境で、実際にローカルで動作するサイトを作っていきます!

Angularは頻繁にアップデートが来るため、バージョンはブログ掲載時の最新バージョンで行います。

今回のバージョンは 6.1.3 です。

えとーは前回

/home/eto/Document/example/HelloWorld

に新しいプロジェクトを作成しました。

まず前回構築した開発環境のディレクトリを端末で開き、cdコマンドで移動します。

Angularにはデフォルトでサンプルプロジェクトが用意されているので

npm start

と入力するとアプリが起動します。

しばらくするとこのような表示が出てくるので、ブラウザで http://localhost:4200 を開いてみましょう。

おそらくこのような画面が出てきたと思います。

これでアプリを構築する準備ができました。

あとはコードを変更するとリアルタイムで反映されるようになります。

このページのコードは

/src/app/app.component.html

に保存されていますが、こちらのHTMLは通常のHTMLと少し違うので説明していきます。

まず、Angularにはスコープと呼ばれる機能が付属していて、ここで言うスコープは

Welcome to {{ title }}!

この部分になります。

前回プロジェクトを作成した時に HelloWorld と指定したと思うのですが、その指定した名前がここに入っている形になります。

そして、この名前を指定しているファイルが

/src/app/app.component.ts

というファイルです。

.tsという拡張子を見たことがない人もいると思いますが、Angularで言う .ts は TypeScriptファイル のことになります。

また、全く同じ拡張子でビデオファイルを指す場合もありますが、Angularではビデオファイルではないので注意してください。

このTSファイルは通常のサイトで言うJavaScriptの役割を書くファイルになります。

もし今まで通常のJavaScriptを触っていたのならばおそらく戸惑うことも多いと思いますが、その際は

「JavaScript TS」や「○○(やりたいこと) TS」等で調べてみましょう。

とりあえす今回は難しいことは考えずに

 

title = "HelloWorld";

と書いている場所を

title = "世界";

にしてみましょう。

 

このような感じになれば大成功です!

しかし、Webサイトで1ページだけというサイトは珍しいですよね?

Angularなら複数のページの管理をもっと楽にする方法があります。

次回はその方法について記事を書こうと思います!

今回はこれで終わりです、えとーでした!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です