μ’s2年生と学ぶJavaScript入門 Angular2編

Angulic Angel
 
汎用JavaScriptフレームワーク、Angularの基礎を学びます。Angularはバージョン2.x、言語はTypeScriptを利用します。


穂乃果「おおっ、久しぶりだねっ!」
海未「最近は更新頻度も落ちた上、Aqoursのみなさんがメインになっていますから」
ことり「あのね、更新する気はあるの。ただ、大人の事情でちょっと・・・」
 
海未「前回までで、JavaScriptの文法とNode.jsを使ったサーバサイドJavaScript、AltJSとしてTypeScriptを学んできました」
穂乃果「知恵熱・・・」
海未「今回はJavaScriptの汎用フレームワークであるAngularを取り上げてみたいと思います」
ことり「汎用?」
海未「“One framework. Mobile & desktop.”を標榜していますから、まあ汎用と呼んでいいでしょう」


海未「Angularは、以前はAngularJSという名前でした。バージョン2へのメジャーバージョンアップで単にAngularという名前になっています」
穂乃果「なんで名前変えたの?」
海未「多数の言語への対応とか、開発サイクルの変更とか、バージョン1と2で互換性を破壊したことへの反省とか、いろいろあるようですね」
ことり「タイトルにあるAngular2っていうのは俗称なんだね」
海未「Angular1と区別したいときにあえて使う呼称ですね」


海未「公式サイトはこちらです」
 
One framework. – Angular
 
穂乃果「e」
海未「穂乃果の言うことは聞くまでもありません」
ことり「まあまあ、海未ちゃん・・・」
 
海未「サイトにいろいろ解説はありますが、Angularは様々な種類のアプリケーションを開発する際に、基本的な枠組みを提供する仕掛けです」
ことり「ふんふん、Web、デスクトップ、モバイル・・・なんでもありだね」
海未「言語もJavaScriptに限らず、各種AltJS、たとえばTypeScriptやDartなどを利用できます。公式にはTypeScriptが標準になっているので、今回はTypeScriptを使いましょう」
穂乃果「なんか漠然としすぎてよくわかんないよー」
海未「何でもできるというのは実体を掴みにくいという意味でもありますね。一番よく使われるのはWebアプリケーションのフロントエンドだと思います」
穂乃果「うん、まずそれだけで考える・・・」
海未「では、公式ドキュメントにチュートリアルがありますから、これからそれをやっていくことにしましょう」


ただいま連載中!

Part1: セットアップ

海未「でははじめに、開発環境を作りましょう」 穂乃果「なんか、大変そうなイメージがあるんだけど・・・」 海未「クイックスタートキットのようなものがありますから、簡単ですよ」 海未「まず前提として、Node.jsとGitを[...]

Part2: できあがりイメージ

海未「では、これから作っていくものの完成イメージを見てみましょう」 ことり「何を作るの?」 海未「ええと・・・チュートリアルには”Tour of Heroes”と」 ことり「ヒーロー?」 穂乃果「[...]

Part3: スクールアイドルエディタ

海未「では実際にコードを書いていきましょう」 海未「まずは画面に何か表示してみます。最初に用意したスターターキットの中にsrc/appというディレクトリがありますが、アプリケーションのコードはその中に納まります」 ことり[...]

Part4: 一覧と詳細

海未「今回は複数のアイドルの一覧画面を作ってみましょう」 海未「app.component.tsに、μ’sのメンバーの定義を追加します」 const IDOLS: Idol[] = [ { id: 11, n[...]

Part5: 複数のコンポーネント

穂乃果「どうしよう海未ちゃん!ライブビューイングすらチケット取れないよ~」 海未「私に言われても困ります!恨むならe+を恨んでください」 ことり「Aqoursはファーストライブから大人気ですごいね♪」 穂乃果「これ東京ド[...]

Part6: サービス

穂乃果「LVだけどチケット取れたよっ!」 ことり「明神様のおかげだね♪」 海未「別件で神田明神へ行ったのですが、そこでAqours 1stライブ当選祈願の絵馬を見かけまして・・・」 ことり「今日が一般発売日だって思い出し[...]

Part7: ルーティング

穂乃果「わーい」 ことり「すごーい」 海未「たーのしー」 海未「私としたことが・・・語彙を失うとはこういうことなのですね」 穂乃果「でもでもっ!ほんとにすごかったよねっ!」 ことり「ちょっと早い桜が咲いたね♪・・・横浜ア[...]

Part8: HTTP

海未「では、一応今回で一区切りになるはずですが、サーバとHTTP通信を行うことでより実際のアプリケーションに近付けてみましょう」 穂乃果「サーバ・・・なんてあったっけ?」 ことり「Node.jsとかで作るのかな?」 海未[...]


LINEで送る
Pocket


返信を残す

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