目次
[超初心者向け] Angular5を使えるようになるまで
このページではAngular未経験から少し使えるようになった流れをまとめています。
また、Angularがなにができるのか、React等とどう違うのかというところには触れずに、私がたどったAngular入門者のための学習の道標を紹介する記事になります。
対象スペック
- HTML・CSSは見れば何となく分かる(書いたことはほぼない)
- Javascriptは知らない、Angularではtypescriptを使うので
- 英語は基本機械翻訳、訳がおかしいときはちょっと時間がかかるけど読めないことはない
- サイト制作をしたことがない
等、何故かAngularからサイト制作を始めようと思った人向け。
サイト制作しているけどAngularに触れたことないみたいな人にとっては、
粗い解説が多いと思います。
「とりあえず動けばいい！！！」という人なら
おそらく見ていてもイライラしないと思います。
数ヶ月でどこまでのサイトが作れるか
知りたいという方もいると思うので、参考までに
私が作ったサイトを載せておきます。
作ったサイト
Angularをはじめて３ヶ月でいくつかサイトを作成しました。
サラッと見れば、私のレベルが分かると思います。
この記事は下のような簡単なサイトをAngularで作るまでの道筋になります。
作った順。
まずはAngularクイックスタート
Angularの日本のコミュニティの有志で翻訳したサイトが
あるので参考にしてみましょう。
上のリンクのように公式URLの
「io」を「jp」にすれば日本語のサイトになります。
https://angular.io/guide/quickstart
⇩
https://angular.jp/guide/quickstart
(全てが訳されているわけではありません。)
私は日本語サイトの存在を知らなかったので公式のサイトを機械翻訳しながら
クイックスタートとして、Angularを自分の環境で動かしました。
[超初心者が行く] Angular５ QuickStartしてみた
https://angular.jpにはチュートリアルまでは翻訳されているので、
なに言っているか分かる方にはおすすめ
ただし、アプリケーションシェルのような単語が分からない人は、
少しとっつきにくいと思います。
私のサイトでは アプリケーションシェル ・・・のように解説をだしているので、
Web制作にあまりなれていない人は私のサイトを参考にしてみてください。
次はAngularチュートリアル
チュートリアルでは次のサイトを作ります。
これは実際に私がつくったものです。
このサイトが作れるようになればチュートリアルの名の通り、
Angularの基礎的なところが分かるようになります。
もちろん、ほんの少し分かるだけなので、
まだまだ知ることはたくさんあります。
公式：Angular – Tutorial: Tour of Heroes
公式翻訳：Angular – チュートリアル: ツアー・オブ・ヒーローズ
私の機械翻訳：
[超初心者が行く] Angular５ Tutorialしてみた – まんくつ
[超初心者が行く] Angular５ Tutorialしてみた２ – まんくつ
[超初心者が行く] Angular５ Tutorialしてみた３ – まんくつ
[超初心者が行く] Angular５ Tutorialしてみた４ – まんくつ
[超初心者が行く] Angular５ Tutorialしてみた５ – まんくつ
[超初心者が行く] Angular５ Tutorialしてみた６ – まんくつ
[超初心者が行く]ルーティング編 Angular５ Tutorialしてみた７ – まんくつ
[超初心者が行く]HTTP編 Angular５ Tutorialしてみた８ – まんくつ
ここまでやってみて、もっとAngularを使ってみたいと思うなら、
少し実用的なサイトを作ってみるべきでしょう。
Angularでチャットアプリを作る
ここまでやってみて、本格的なサイトを作りたいと思いましたが、
Web制作未経験のため何をどうやっていいかわかりませんでした。
そこで、UdemyというサイトでAngularのコースを
１０００円ちょっとで購入しました。
【最新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を使う上で色々とおぼえておくことがあります。
でも、忘れることも結構あります。
そこで役に立つことをまとめてくれているサイトリンクを載せておきます。
（随時投入予定）