Angular5入門

[超初心者向け] Angular5を使えるようになるまで

このページではAngular未経験から少し使えるようになった流れをまとめています。

また、Angularがなにができるのか、React等とどう違うのかというところには触れずに、私がたどったAngular入門者のための学習の道標を紹介する記事になります。

対象スペック

  • HTML・CSSは見れば何となく分かる(書いたことはほぼない)
  • Javascriptは知らない、Angularではtypescriptを使うので
  • 英語は基本機械翻訳、訳がおかしいときはちょっと時間がかかるけど読めないことはない
  • サイト制作をしたことがない

等、何故かAngularからサイト制作を始めようと思った人向け。

サイト制作しているけどAngularに触れたことないみたいな人にとっては、

粗い解説が多いと思います。

「とりあえず動けばいい!!!」という人なら

おそらく見ていてもイライラしないと思います。

数ヶ月でどこまでのサイトが作れるか

知りたいという方もいると思うので、参考までに

私が作ったサイトを載せておきます。

作ったサイト

Angularをはじめて3ヶ月でいくつかサイトを作成しました。

サラッと見れば、私のレベルが分かると思います。

この記事は下のような簡単なサイトをAngularで作るまでの道筋になります。

作った順。

Now Remind:名言メモWEBサービス(未完成)
THE TOP:アウトライナー整理用WEBサービス
(自分でも使っていないほど利便性低い)
Playlist-Match:itunesのプレイリスト共有サイト
(基本機能だけ)
ヤルカミ:todoアプリの新しい形を提案するWEBサービス
   ・追加先:(構想だけ)

まずはAngularクイックスタート

Angularの日本のコミュニティの有志で翻訳したサイトが

あるので参考にしてみましょう。

Angular – クイックスタート

上のリンクのように公式URLの

「io」を「jp」にすれば日本語のサイトになります。

https://angular.io/guide/quickstart

https://angular.jp/guide/quickstart

(全てが訳されているわけではありません。)

私は日本語サイトの存在を知らなかったので公式のサイトを機械翻訳しながら

クイックスタートとして、Angularを自分の環境で動かしました。

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

https://angular.jpにはチュートリアルまでは翻訳されているので、

なに言っているか分かる方にはおすすめ

ただし、アプリケーションシェルのような単語が分からない人は、

少しとっつきにくいと思います。

私のサイトでは アプリケーションシェル ・・・のように解説をだしているので、

Web制作にあまりなれていない人は私のサイトを参考にしてみてください。

次はAngularチュートリアル

チュートリアルでは次のサイトを作ります。

AngularTourOfHeroes

これは実際に私がつくったものです。

このサイトが作れるようになればチュートリアルの名の通り、

Angularの基礎的なところが分かるようになります。

もちろん、ほんの少し分かるだけなので、

まだまだ知ることはたくさんあります。

公式:Angular – Tutorial: Tour of Heroes

公式翻訳:Angular – チュートリアル: ツアー・オブ・ヒーローズ

私の機械翻訳:

[超初心者が行く] Angular5 Tutorialしてみた – まんくつ

[超初心者が行く] Angular5 Tutorialしてみた2 – まんくつ

[超初心者が行く] Angular5 Tutorialしてみた3 – まんくつ

[超初心者が行く] Angular5 Tutorialしてみた4 – まんくつ

[超初心者が行く] Angular5 Tutorialしてみた5 – まんくつ

[超初心者が行く] Angular5 Tutorialしてみた6 – まんくつ

[超初心者が行く]ルーティング編 Angular5 Tutorialしてみた7 – まんくつ

[超初心者が行く]HTTP編 Angular5 Tutorialしてみた8 – まんくつ

ここまでやってみて、もっとAngularを使ってみたいと思うなら、

少し実用的なサイトを作ってみるべきでしょう。

Angularでチャットアプリを作る

ここまでやってみて、本格的なサイトを作りたいと思いましたが、

Web制作未経験のため何をどうやっていいかわかりませんでした。

そこで、UdemyというサイトでAngularのコースを

1000円ちょっとで購入しました。

【最新v5対応】はじめてのAngular入門 実践シングルページアプリケーション(SPA)構築 | Udemy 

Udemyは定価2万円のものを常時セールしている意味不明サイトです。

「2万円の価値があるものを千円で買える・・・ラッキー」

と思わせてくれるサイトです。

私にとって、二万円の勝ちがあるとは思いませんが

千円代であればめちゃ安なコースでした。

ただ、超初心者向けではなく、そして初心者に手打ちを強要してくるので、

不便でした。もちろん、実際に使っている人が用意したコースなので、

すげぇためになりました。

コースの中のチャットアプリを作る所の雰囲気だけ記事にしたので購入の参考にしてみてください。

Angular5+Firebaseでチャットアプリを作る① モックデータ反映編 – まんくつ

Angular5+Firebaseでチャットアプリを作る② Firebase連携編 – まんくつ

Angular5+Firebaseでチャットアプリを作る③ 編集・削除編 – まんくつ

Angular5+Firebaseでチャットアプリを作る④ 新規ユーザー登録編 – まんくつ

Angular5+Firebaseでチャットアプリを作る⑤ 完成編 – まんくつ

これが作れればAngularのことが少しは分かっていることでしょう。

Angularを更に使う

ここからは自分が作りたいサイトをどうやれば作れるのかを、

調べながら作っていれば次第に実力はつくでしょう。

ですが、やっていくうちにWeb制作の基本的なことを知らないことを

思い知らされるでしょう。

HTMLとCSSだけでサイトを作ったことがない!!

javascriptを知らない!!

Angularを使うにはHTMLやCSSやjavascriptは避けられないようです。

ということで、

CSS設計を勉強しています。

Angularまとめリンク

Angularを使う上で色々とおぼえておくことがあります。

でも、忘れることも結構あります。

そこで役に立つことをまとめてくれているサイトリンクを載せておきます。

(随時投入予定)

逆引き Angular テンプレート – Qiita

シェアする

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

フォローする