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

わけがわからないAngular5

「結局どうすればいの?」

AngularにあるチュートリアルをやってみてざっくりどんなものかがわかってきたAngular!

しかし、これWEBサイト製作にどう組み込めばいいの?

Angularで作ったサイトをAngular提供の仮想ローカル環境でサイト作成したとしてもサーバーに上げてみて、同じように表示されるかがまったくわからない。

ワードプレスみたいに別途サーバーに何かをインストールする必要があるの?

本当に超初心者だから、フレームワークから入るのが間違っているのだと思い本を漁ってみる。

レビューを見てみたわけだけど、「結局公式を見てくれって感じ」というレビューを見かけて、ふと別のソフトウェアを使っていたときのことを思い出した。

そのソフトでわからないことがあれば公式のヘルプを検索していたと!

そこで、じっくり公式を読んでみようと思ったわけです。

ということで・・・

しっかりと翻訳してみようと思います。

以下、angularの公式サイトのGETTING STARTEDを日本語訳(意訳多め)し、angularの扱い方をしっかりと読み解こうと思います。(google翻訳使用)

QuickStart

URL:https://angular.io/guide/quickstart

優れたツールを使用すると手作業よりも、アプリケーション開発が迅速かつ容易になります。

Angular CLIは、以下はさまざまな進行中の開発タスクを実行できるコマンドラインインターフェイスツールです。

このAngularガイドの目的は、Angular CLIを使用してTypeScriptの簡単なAngularアプリケーションを構築して実行することです。

この章の最後では、CLIを使用した開発の基礎について説明します。

用語をおさえる!

わからない言葉が多すぎて、よくわからない。

一度目はスルーしたわけだけど、スルーしようとも何度も赤線の単語が邪魔して、理解が深まらない・・・

とのいうわけで一つづつ調べてみる。

Angular CLI

Angular CLI = Angularのコマンドラインインターフェイス
コマンドラインインターフェイス(CLI) = キーボードからコマンドと呼ばれる命令語を打ち込んでパソコンを操作すること。つまりコマンドプロントを使うあれ。
Angular CLIコマンド
  • ng new
    • Angular CLIを使用すると、すぐに使えるアプリケーションを簡単に作成できます。
  • ng generate
  • ng serve
    • 開発中にアプリをローカルで簡単にテストできます。
  • Test, Lint, Format
    • あなたのコードを本当に輝かせる。 ユニットテストエンドツーエンドテストをコマンドのそよ風によって、公式のAngularLinterClangFormatを実行します。
コンポーネント=構成要素。部品。
ルート=基のやつ?
サービス=コンテンツ?
パイプ=変数を設定すること
シェル=外殻。特定のコンポーネントの周辺に構築された要素
ユニットテスト↓(wiki)
コンピュータプログラムモジュールが使用に適しているかどうかを決定するために、関連する制御データ、使用手順、操作手順とともにテストする手法
コンポーネントとモジュールの違い↓
コンポーネントは、それだけで完結した部品。
モジュールは、ソースコードの中の部品。
エンドツーエンド(a.k.a:E2E)↓
「両端で」「端から端まで」という意味の英語表現。通信・ネットワークの分野で、通信を行う二者、あるいは、二者間を結ぶ経路全体を意味する。()
lint↓(wiki)

主にC言語のソースコードに対し、コンパイラよりも詳細かつ厳密なチェックを行うプログラムである。

  • 型の一致しない関数呼び出し
  • 初期化されていない変数の参照
  • 宣言されているが使われていない変数
  • 同じ関数を参照しているが、戻り値を使う場合と使わない場合がある
  • 関数が戻り値を返す場合と返さない場合がある

など、コンパイラではチェックされないが、バグの原因になるような曖昧な記述についても警告される。

ClangFormat↓

ソースコードの整形を行うプログラム
バンドル=パッケージ化されてまとめられたもの
デプロイメント↓(wiki)
ソフトウェアシステムを利用可能にする活動全般を指す用語である。 デプロイメント(Deployment)とは「展開、配備、配置」などの意。

TypeScript

TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語である。TypeScriptはJavaScriptに対して、省略も可能な静的型付けクラスベースオブジェクト指向を加えた厳密なスーパーセットとなっている。C#リードアーキテクトであり、DelphiとTurbo Pascalの開発者でもあるアンダース・ヘルスバーグが TypeScript の開発に関わっている。TypeScriptはクライアントサイド、あるいはサーバサイド (Node.js) で実行されるJavaScriptアプリケーションの開発に利用できる。

TypeScriptは大規模なアプリケーションの開発のために設計されている。

TypeScriptはJavaScriptのスーパーセットであるため、既存のJavaScriptプログラムは、全て有効なTypeScriptプログラムとなる。

TypeScriptは型定義ファイルをサポートしており、既存のJavaScriptライブラリに型情報を付与して利用できる。既存のオブジェクトファイルの構造を記述できるC/C++ヘッダファイルとよく似た仕組みである。これによって、その型定義ファイル内で定義された値を、他のプログラムがあたかも静的に型付けされたTypeScriptエンティティであるかのように利用することができるようになる。jQuery、MongoDB、D3.jsのような人気のあるライブラリのための、サードパーティーのヘッダファイルがある。Node.jsベーシック・モジュールのためのヘッダも入手可能で、Node.jsプログラムの開発もTypeScriptの中で行える。

TypeScript – Wikipedia

TypeScriptはマイクロソフトやその外部の顧客たちの間で、JavaScriptで大規模アプリケーション開発をする上での欠点を補うために作られた。複雑なJavaScriptコードを扱うのは困難なことから、JavaScript言語の中でコンポーネント群を開発するのを容易にするための自作ツールが必要になった。

TypeScript – Wikipedia

静的型付け
プログラミング言語で書かれたプログラムにおいて、変数や、サブルーチンの引数や返り値などの値について、その型が、コンパイル時など、そのプログラムの実行よりも前にあらかじめ決められている、という型システムの性質のことである。静的型付け – Wikipedia
プログラムの実行前と後で変わらない
クラスベースとはオブジェクト指向のスタイルのひとつで、「鋳型」となるクラスがあり、その鋳型によってオブジェクトの実体であるインスタンスを生成する、というスタイルである。クラスベースのシステムでは、システム内に、継承のシステムを持っていることが多い。クラスベース – Wikipedia
プログラミング初心者は実行したいプログラムを何も考えなしに、一通り書いてしまうことになる。しかし、いくつもプログラムを作成すれば、「この部分はこのあいだ作成したプログラムからもってこよう」ということがよくある。そして、それぞれの役割を最適なかたちでモジュラー化していくつものプログラムで使いまわすようになる。モジュール同士でデータを受け渡し、一つのプログラムを作り上げる。その考え方である、モジュールを一つのものとして役割を与えることがオブジェクト指向という概念。「あたりまえじゃね?」と思うようなことだがここまで至るまでに数多くの試行錯誤がおこなわれている。少し前にはなかった概念だが、新しい人にしてみれば当然のもの。これからプログラムに関わる人にとってそこまで意識する必要のない言葉。つまり、オブジェクト指向とは先人の研鑽の賜物によって作り上げられた、プログラムの細分化、部分化、に代表されれるモジュールごとに役割をもたせることによってプログラミングする手法。オブジェクト指向プログラミング言語とはオブジェクト指向の考えのもと、オブジェクト化しやすいように設計された言語のこと。オブジェクト指向について、全てを説明しているわけではないが、初心者とってはこのくらいの理解で良い。
スーパーセット
上位互換ともいい、既存のものをすべて含んだ上でより機能が拡張されているもの。
C#
アンダース・ヘルスバーグが設計(デザイン)したプログラミング言語であり、構文(syntax)は(名前にもある通り)C言語や、C言語風に構文が設計されたC++やJavaなどの影響があるが、構文以外についてはヘルスバーグが以前の所属であるBorlandで設計したDelphiからの影響がある。
リードアーキテクト
建設する者、といったような意味の語
プログラミング言語を設計したアーキテクトたちのリード役、統括者としてリードアーキテクトが設計の責任者を担当する。
クライアントサイド
クライアント、つまりユーザーが入力や操作による処理が必要な場合に、ユーザー側で処理を行うこと。
サーバサイド
 サーバーで処理を行うこと、クライアントにはその処理結果が表示される。
Node.js
ほとんどのJavaScriptとは異なり、ウェブブラウザの中で実行されるのではなく、むしろサーバサイドJavaScriptの一種である。
型定義ファイル
TypeScriptはJavaScriptの上位互換であり、JavaScriptを置き換えるものです。とはいえ、現時点ではWebアプリの世界はJavaScriptで成り立っていますし、すでに莫大な資産があります。それらを放り出してしまうのはあまりにもったいないので、TypeScriptでも活用したいものです。そのためにTypeScriptは既存のJavaScript用資産を活用するための仕組みを持っています。それが、型定義ファイルです。
C/C++

Cは、高級アセンブラといわれるぐらい、ハードウェア寄りの記述を行うためのシンプルな言語です。Cを使って(必ずしもハードウェア寄りではない)アプリケーションの開発も可能ですが、開発効率は必ずしも高くありません。しかし、手間はかかったとしても、できないことはほとんどありませんし、できあがったプログラムも、小さく、速くなるのが普通です。

一方、C++は、Cをベースに、オブジェクト指向プログラミングを容易にするクラスや、ジェネリックプログラミングのためのテンプレート、例外処理などの機能を大幅に追加したものです。また、Cよりは厳密に型チェックが行われるなど、バグが発生しにくいように工夫されています。Cに比べれば開発効率は向上していますが、できあがったプログラムは、Cよりも、大きく、遅くなる傾向があります。

CとC++の違い | 株式会社きじねこ

ヘッダファイル
特にC言語やC++でのプログラミングで使われるファイルであり、一般にソースコード形式をしていて、コンパイラが別のソースファイルの一部として自動的に展開して使用する。一般にヘッダファイルは、ソースファイルの先頭部分に書かれたディレクティブによってインクルード(その場に内容を展開)される。インクルードファイル(英: Include file)とも。
ヘッダファイルには、サブルーチンや変数やその他の識別子の前方宣言が含まれていることが多い。複数のソースファイルで宣言する必要のある識別子を1つのヘッダファイルに置き、必要に応じて個々のソースファイルがそのヘッダファイルをインクルードする。
具体的にどんな存在のことをエンティティと呼ぶかは分野や製品によって異なるため一概には言えないが、一つの物事を表すひとまとまりのデータの集合などを意味することが多い
jQuery
ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリ
D3.js
2011年に開発が始まったウェブブラウザで動的コンテンツを描画するJavaScriptライブラリ
サードパーティー
第三者団体

次回に向けて

さて、Anularのことよりもそれ以前のことで「わけわかんね」状態ではありますが、
とりあえず抑えとく基本的なことは調べてみました。
次回は、Anularのquickstartのstep1からです!

シェアする

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

フォローする