[超初心者が行く] Angular5 QuickStartしてみた2

Angular5 QuickStart

Angular – QuickStart : https://angular.io/guide/quickstart を翻訳(意訳多め)しています。

[超初心者が行く] Angular5 QuickStartしてみたの続き

前回はAngularの基本とそのまわりの必要知識についてざっくりやりました。

今回は、Angular環境構築からブラウザ表示までやっていきます。

ここからが翻訳になります。

ビックリマークの部分は個人的にわからない用語の意味を載せています。

これは、Angularのサイトには記載のない情報です。

では、Angularやっていきましょう!

Angular環境のセットアップ

何かできるようになる前に開発環境をセットアップする必要があります。

Node.js®とnpmインストールします。

npm
npmとはパッケージ管理システムの1種。英: Node Package Managerの意。
Node.jsは、サーバ上で動作するJavaScriptであるが、Node.jsを使ったツールが開発されるようになると、これらを管理するバージョン管理システムの必要性が生まれた。
npmは、Node.jsのツールやパッケージ(モジュール)をインストール、管理するだけでなく、パッケージを扱うためインターフェイスを備えている。リポジトリ機能も備えており、必要とするパッケージ(モジュール)の検索、ダウンロード、インストール、アップデートが行えたり、開発したパッケージ(モジュール)を他者に公開できる。

インストール後、ターミナルまたはコンソールウィンドウで「node -v」と「npm -v」を実行して、少なくともノード6.9.xとnpm 3.x.xを実行していることを確認します。 古いバージョンではエラーが発生しますが、新しいバージョンで問題ありません。

Angular CLIをグローバルにインストールします。
コマンド npm install g @angular/cli
マシン全体で共有されるモジュール。
標準設定のままnpmをインストールしていれば、/usr/local/node_modules/以下にモジュールがインストールされる。
npm install -g <モジュール名> = グローバルインストール

新しいプロジェクトを作成する

ターミナルウィンドウを開きます。

次のコマンドを実行して、新しいプロジェクトとスケルトンアプリケーションを生成します。

コマンド  ng new myapp

複雑だが、ほとんど同じ手続きを繰り返し使うような場合に、決まり切った手続き部分をあらかじめ記述しておき、これに対して必要な変更を加えることがよくある。スケルトン(skeleton)は「骨格」という意味で、このような場合に、あらかじめ記述しておき、元となるデータをスケルトンと呼ぶことがある。

たとえば、C++言語でWindowsアプリケーションを開発するときには、すべてのプログラムにおいて、Windowsアプリケーションとして振る舞うための、最低限必要な手続きを記述しなければならない。このような記述を毎回ゼロから行うのは厄介なので、開発環境の多くは、決まり切った手続き部分を自動的に生成する機能を用意している。このとき生成されるものがスケルトンである。スケルトンには、決まり切った一連の手続きがすでに記述されているので、プログラマは、アプリケーション独自の処理のみを新たにスケルトンに対して追加すればよい。

Insider’s Computer Dictionary:スケルトン とは? – @IT

新しいプロジェクトを作成するには少々時間がかかります。

そのほとんどはnpmパッケージのインストールに費やされます。

ブラウザ表示

プロジェクトディレクトリに移動し、サーバーを起動します。

コマンド(それぞれ実行)
cd my-app
ng serve –open

ng serveコマンドはサーバーを起動し、ファイルに基づきアプリケーションを構築します。

また、ファイルを監視しているので変更があれば、アプリケーションを再構築します。

–open(またはjust -o)オプションを使用すると、自動的にhttp:// localhost:4200 /にブラウザが開きます。

あなたのブラウザに「Welcome to app!!」と表示されているでしょう。

Angular componentを編集してみる

CLIが最初のAngularコンポーネントを作成しました。 app-rootという名前のルートコンポーネントを ./src/app/app.component.ts で見つけることができます。

コンポーネントファイルを開き、titleプロパティを「Welcome to app!」から「Welcome to My First Angular App」に変更してみましょう。

src/app/app.component.ts
export class AppComponent {
title = ‘app’;
}

src/app/app.component.ts
export class AppComponent {
 title = ‘My First Angular App’;
}

タイトルが変更されると、ブラウザは自動的にリロードします。

次に、src / app / app.component.cssを開き、コンポーネントにスタイルを与えます。

 src/app/app.component.css
h1 {
 color: #369;
 fontfamily:
 Arial, Helvetica, sansserif;
 fontsize: 250%;
}
フォントの色、形式、サイズが変わったことでしょう。
これで基本的なAngular環境の構築と簡単な編集ができるようになりました。

プロジェクトファイルを見てみる

読むべき最初のファイルはREADME.mdです。my-appのルートフォルダに格納されています。CLIコマンドの使用方法に関する基本的な情報があります。

また、Angular CLIがどのように機能するかについてもっと知りたいときは、Angular CLIリポジトリWikiを必ず訪れてください。

今回生成したファイルの中の、中身を見ていきましょう。

srcフォルダ

srcフォルダにはすべてのAngularコンポーネント、テンプレート、スタイル、画像、およびアプリに必要なすべてのものがここに配置されています。 このフォルダの外にあるファイルは、アプリケーションの構築をサポートするためのものです。

src
├[app]
│├app.component.css
│├app.component.html
│├app.component.spec.ts
│├app.component.ts
│├app.module.ts
├[assets]
│├.gitkeep
├[environments]
│├environment.prod.ts
│├environment.ts
├favicon.ico
├index.html
├main.ts
├polyfills.ts
├styles.css
├test.ts
├tsconfig.app.json
├tsconfig.spec.json
├typings.d.ts

ファイル 役割
app/app.component.{ts,html,css,spec.ts} AppComponentでHTMLテンプレート、CSSスタイルシート、単体テストとともに定義します。 これは、アプリケーションが進化するにつれてネストされたコンポーネントのツリーのルートコンポーネントです。
app/app.module.ts アプリケーションとして組み立てる方法をAngularに伝えるルートモジュールAppModuleを定義します。 今はAppComponentだけを宣言しています。 コンポーネントが増えれば、宣言する要素が増えるでしょう。
assets/* アプリケーションをビルドするときに、画像を置いておき、他のフォルダにコピーすることでもできるフォルダ。
environments/* このフォルダーには、各宛先環境ごとに1つのファイルが含まれています。各ファイルは、アプリケーションで使用する単純な構成変数をエクスポートします。 ファイルは、アプリケーションをビルドするときにオンザフライで置き換えられます。 プロダクション用のAPIエンドポイントとは別のAPIエンドポイントを使用したり、異なるアナリティクストークン用のAPIエンドポイントを使用することもできます。 いくつかの模擬サービスを使用することさえあります。 いずれにしても、CLIでカバーしています。(よくわからないため直訳)
favicon.ico サイトがブックマークバーでかっこよく見えるファビコン
index.html 他のユーザーがサイトにアクセスしたときに表示されるメインのHTMLページ。 ほとんどの場合、編集する必要はありません。 CLIは、アプリケーションをビルドするときにすべてのjsファイルとcssファイルを自動的に追加するので、手動で<script>タグまたは<link>タグを追加する必要はありません。
main.ts アプリのメインエントリポイント。 アプリケーションをJITコンパイラbootstrapsコンパイルし、アプリケーションのルートモジュール(AppModule)をブラウザで実行します。 また、-aotフラグをng buildおよびng serveコマンドに追加することで、コードを変更せずにAOTコンパイラを使用することもできます。
polyfills.ts ブラウザの種類によって、Web標準のサポートレベルが異なります。 Polyfillsはこれらの違いを正規化するのに役立ちます。 core-jsとzone.jsでかなり完璧に正規化しますが、詳細については、ブラウザサポートガイドを確認してください。
styles.css グローバルスタイルはここに書きます。 ほとんどの場合、メンテナンスを容易にするためにコンポーネントはローカルスタイルを使用したいと考えていますが、すべてのアプリに影響を与えるスタイルはここに書く必要があります。
test.ts これは単体テストのメインエントリポイントです。 あなたには馴染みのないカスタム設定がいくつかありますが、編集する必要はありません。
tsconfig.{app|spec}.json Angularアプリケーション(tsconfig.app.json)と単体テスト(tsconfig.spec.json)のTypeScriptコンパイラ構成
 ネスト
構造化プログラミングにおけるネスティング(英: Nesting)、ネスト、入れ子とは、プログラムの構造が再帰的に繰り返されて記述されること。このような構造をネスト構造(英: Nested structure)、入れ子構造と呼ぶ。
エントリポイント
コンピュータプログラムを構成するコードのうち、最初に実行することになっている位置のこと。
ウェブサイトやWebアプリケーションを作成するフロントエンドWebアプリケーションフレームワークである。 タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。Bootstrap – Wikipedia
タイポグラフィ
活字(あるいは一定の文字の形状を複製し反復使用して印刷するための媒体)を用い、それを適切に配列することで、印刷物における文字の体裁を整える技芸である。
コンパイラとは、いわゆる「プログラミング言語」(=人間が理解しやすい言語や数式でプログラムを記述可能な人工言語)で書かれたプログラムを、コンピュータ(のCPU)が直接的に実行できる機械語(あるいは、元のプログラムよりも低いレベルのコード。たとえばバイトコードなどの中間言語)に変換するプログラムのことである。
コンパイラによって変換される前のプログラムを「ソースコード」を呼び、変換後の機械語(や中間言語のプログラム)などを「オブジェクトコード」と呼ぶ。 コンパイラによる変換することを動詞で「compile コンパイル」と呼ぶ。(なお、コンパイラによっては、変換することを「build ビルド」と呼んでいるものもある。ただし、厳密には「コンパイル」は「ビルド」の一工程である。)。直接バイナリコードを出力するものもあるが、コンパイラ自体はアセンブリ言語によるコードを出力するにとどまり、その先、それをバイナリに変換する作業はアセンブラに任せているものも多い。

事前コンパイラ (Ahead-Of-Timeコンパイラ、AOTコンパイラ)とは、アプリケーション実行前に事前にコンパイルするコンパイラのこと。主に、Javaのバイトコード、.NET CIL、IBM System/38 や System i の “Technology Independent Machine Interface” コードといったシステムから独立した(プロセス仮想機械)のバイナリである中間言語のコンパイルで使われる言葉である。対義語は、実行時コンパイラ(Just-In-Timeコンパイラ、JITコンパイラ)。

プロセス仮想機械の中間言語のコンパイル方式としては実行時コンパイラ (JITコンパイラ) が性能強化手段としてよく知られている。これは大まかに言えば、実行中に中間言語コードをネイティブの機械語コードにコンパイルするもので、場合によってはアプリケーション性能を低下させることもある。AOTコンパイラは実行時のコンパイルの必要を無くし、ソースコードから中間言語コードを生成した後に、ネイティブの機械語コードも生成してしまう方式である。

事前コンパイラ – Wikipedia

プロジェクトでJavaScriptへのコンパイルが必要となるファイルと、それらのコンパイルオプションなどを指定するファイル

tsconfig.json(TypeScript構成ファイル):Dev Basics/Keyword – @IT

ルートフォルダ

 srcフォルダは、プロジェクトのルートフォルダの1つにすぎません。 その他のファイルは、アプリケーションの構築、テスト、保守、文書化、および展開に役立ちます。
my-app
├[e2e]
│├app.e2e-spec.ts
│├app.po.ts
│├tsconfig.e2e.json
├[node_modules/…]
├[src/…]
├.angular-cli.json
├.editorconfig
├.gitignore
├karma.conf.js
├package.json
├protractor.conf.js
├README.md
├tsconfig.json
tslint.json
ファイル 役割
e2e/ e2eのフォルダ内ファイルでエンドツーエンドのテストを実行します。
node_modules/ Node.jsがこのフォルダを作成し、package.json内にリスト化されているサードパーティのすべてのモジュールをそのフォルダ内に配置します。
.angular-cli.json Angular CLIの設定。このファイルは、いくつかのデフォルトを設定することができ、プロジェクトの作成時にどのファイルが含まれるかを設定することもできます。 あなたがもっと知りたいなら、公式文書をチェックしてください。
.editorconfig このプロジェクトをエディタで開くための基本設定です。ほとんどのエディタは.editorconfigファイルをサポートしています。 詳細はhttp://editorconfig.orgを参照してください。
karma.conf.js karmaテストランナーのユニットテスト構成。ng test実行時に使用されます。
package.json プロジェクトが使用するサードパーティのパッケージをリスト表示したnpmの設定。 ここに独自のカスタムスクリプトを追加することもできます。
protractor.conf.js 開発者のためのエンドツーエンドのテスト構成。ng e2eの実行時に使用されます。
README.md CLIコマンド情報があらかじめ入力されているプロジェクトの基本ドキュメンテーション。ドキュメントを読んだ人がアプリを構築できるように、書きましょう!
tsconfig.json IDEがピックアップして便利なツールを提供するためのTypeScriptコンパイラの設定。
tslint.json ng lintを実行しているときに使用されるCodelyzerと一緒にTSLintの設定をLintingします。 Lintingは、コードスタイルの一貫性を維持します。
  karmaテストランナー
テストランナーの一つ
IDE

統合開発環境(とうごうかいはつかんきょう)、IDE (Integrated Development Environment) は、ソフトウェアの開発環境。

従来、コンパイラ、テキストエディタ、デバッガなどがばらばらで利用していたものをひとつの対話型操作環境(多くはGUI)から利用できるようにしたもの。統合開発環境 – Wikipedia

Codelyzer
Angular TypeScriptプロジェクトの静的コード解析用の一連のtslintルール。
TSLint
TSLintは、可読性、保守性、機能性のエラーをTypeScriptコードでチェックする拡張可能な静的解析ツールです。

次のステップ

Angularが初めての方は、このチュートリアルを続けてください。
既にAngular CLIセットアップを使用しているので、「セットアップ」ステップをスキップできます。

次回はチュートリアル

さて、今回はというよりも今回もわからないことずくめでしたが、

最初のうちの試練として少しずつおぼえていきたいですね。

ようやく次から、Angularで何ができるのか見えてきそうです。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする