Zenn
🐰

Angularって何？(超初心者向け)

2020/12/22に公開
Angular
JavaScript
React
Web
フロントエンド
tech

Overview

対象読者はプログラミングも Angular も触りたてで「Angular って何？」と聞かれて自分の言葉で説明できない人です。正直、特にアドベントカレンダー読者でそういう人はあまり居ない気はするのでちょっとニッチな記事になってしまう予感がします。

本質的には Angular だけじゃなくて React や Vue といった物の説明にもなるかもしれません。３年前の自分は JavaScript すらもほとんど知らないままいきなり Angular を触り始めました[1]。その時は一応 Angular ってなんなんだ？ということを調べましたがあまりピンとこなく、かなりぼや〜っとしたイメージのまま、でも楽しいのでどんどん使って勉強して、段々と自分が知りたかったことがわかってきた感じでした。

そのレベルでぼや〜っとしていてもとりあえず手を動かせば物は作れるしゴールにはたどり着けるのはいいところですよね…というのはさておき、今回はそんな昔の自分が探していたような記事を書いてみようと思います。

免責事項

本題に入る前に、毎度おなじみのやつです。
この記事を執筆現在私は Google で働いています。記事内で Google のプロダクトについて言及するため明確に所属を記載していますが、このことは私が記事内に登場するプロダクトについて特別詳しい知識を持っていることを意味しません。１ユーザーが書いた記事としてお楽しみください。

Angular って何ですか

公式サイトによると、Angular とはan application design framework and development platform for creating efficient and sophisticated single-page apps.です。形容詞を省いて訳すと SPA を作成するための設計フレームワークであり開発基盤であるということになります。これを聞いてピンとこない人が今回の対象読者です。順番にこの意味を紐解いていきましょう。

SPA って何ですか

SPA は Single Page Application の略ですが、SinglePage とはどういうことでしょうか。ちょっと Angular を触った人は「ページの url を制御できるのに SinglePage ってどういうこと？」と思うかもしれません。その疑問を解消するには、まず Web ページの仕組みからおさらいする必要があります。

Web サイトはユーザーが URL を入力した時に対応する HTML をサーバーが返却することで実現されています。よりわかりやすく確認するために、開発者ツールの Network タブを開いた状態でGoogleにアクセスしてみましょう。(以降 Chrome の開発者ツールを使って話をするので他のブラウザのツールだとタブの名称などが微妙に違うかもしれませんが適宜読み替えてください。)

https://www.google.co.jp/に対するリクエストとそのレスポンスを見ることができます。
Preview タブを開くとロゴ以外ほぼページに表示されているものと同じ HTML が確認できますね。
また、Response タブを開くと HTML の文字列が確認できます。

このように、url と HTML は基本1 対 1 対応なので、例えば自分のウェブサイトにトップ、プロフィール、ブログの３種類のページを用意するとしたら、３種類の HTML を用意することになります。

  • https://<your domain>/ -> index.html
  • https://<your domain>/profile -> profile.html
  • https://<your domain>/blog -> blog.html

ですが、SPA の場合 HTML は一種類しか用意しません。最初に一度 HTML を読み込んだら、あとは JS で必要な部分だけを組み換える構成になります。/から/profileに移動したように見えても、実際にはブラウザの遷移は利用していません。JS を使って、あたかも遷移したかのように見せかけつつ HTML 上のコンテンツを書き換えているだけなのです。

これも実際に確認してみましょう。
上記の例と同じルーティング構成をしている Angular アプリを開きます。ソースコードはこちらです。ページへのリクエストに対しては大体以下のような HTML が返却されます。

<!DOCTYPE html>
<html>
<head>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Lato:400,700,900" rel="stylesheet">
  <link rel="stylesheet" media="screen" href="https://c.staticblitz.com/assets/css/preview-a87b6571.css" />
  <script src="https://c.staticblitz.com/assets/common-aa4357f12d510fa1adbdb.js" crossorigin="anonymous"></script>
  <script src="https://c.staticblitz.com/assets/ext-0cf6f7593bca4b3422c9b.js" crossorigin="anonymous"></script>
  <script src="https://c.staticblitz.com/d/webcontainer.1fe307dfa45b7c0db52d14a83855a3415d9b0c82.js" crossorigin="anonymous"></script>
  <script src="https://c.staticblitz.com/assets/preview-66bbcea50a05892bfce3b.js" crossorigin="anonymous"></script>
  <script>(function(){_preboot("https://l.staticblitz.com/b/v1/angular-ivy-fempv8/73cdefe8ba6", {"p":"stackblitz","a":"AIzaSyBZSvuCzbUhuRrSps-HjM5bFClLPaFF9Vg","o":true,"u":"renamoo","$":false})})()</script>
</head>
<body></body>
</html>

<body>の中に何も内容がないのがわかりますね。Preview タブをみてみても真っ白なページが出ているだけです。これは、Angular アプリケーションではルーティング(URL 制御)のみならずページの UI 構築も JS で行われているからです。

/profileや/blogのどれを開いてもこの構成が同じであることがわかると思います。これが SinglePageApplication の特徴です。雑にいうと、１つの HTML と JS の塊を用意してページを組み立てていくということをしています。ちなみにこの１つの HTML と言うのは Angular アプリをビルドした成果物に入っているindex.htmlです。

フレームワークって何ですか

Angular を使って何を作るのかがわかったところで、次にフレームワークとは何かを見ていきましょう。Angular がなぜフレームワークや開発基盤と定義されるかは、Angular だけ使っている時よりもむしろ、同じ SPA の領域でよく見かける React と比較した方がわかりやすいのではないかと思います。
公式サイトによれば React はユーザインターフェース構築のためのJavaScriptライブラリです。

ライブラリって何ですか

ではそもそもライブラリとは何だったでしょうか。ライブラリとはいわば便利グッズのようなものです。Web ページは JS がなくても作れますが、素の HTML と CSS だけで凝ったページを作るのは大変です。そこで、多くの場合には形の違いはあれど JS が使われます。誰かがやりたいことは大抵他の誰かもやりたいと思っていることなので、それぞれが何度も同じものを作るのはもったいないですね。そこで、実装した便利グッズを他の人も使えるようにしたものがライブラリです。

React と Angular の違いって何ですか

話を戻します。React そのものは UI 構築にフォーカスした JS ライブラリです。React を使うと JSX やデータバインディングを使って画面を作っていくことが出来ます。それぞれ個性はあるけれど、データバインディングが使えてスイスイ画面が作れるところは Angular と同じです。
では何が違うかというと、React は SPA を作ることではなく、あくまで効率的に UI を構築することを目的としていることです。そのため、UI 構築からは少し外れる操作、例えばルーティングをしようと思ったらreact-routerなど用途にあったライブラリを導入することが必要になります。見方を変えると、細かく構成をカスタマイズすることが出来るということです。

つまりフレームワークって何ですか

一方で、フレームワークである Angular は SPA 開発に必要な物が全部ついてきます。基本的な SPA を作るだけであれば、Angular でプロジェクトを初期化すればあとは何も追加する必要はなく、Angular のやり方に乗っかって実装していればアプリが完成します。(こちらも見方を変えると、Angular がラップしてくれている中身のライブラリ等の細かな設定に手を入れてカスタマイズすることはできないとも言えます。[2])

他にも、Schematicsといった仕組みがあり、追加の色々なセットアップが１コマンドで出来る様になっています。例えばアプリを PWA 化するng add @angular/pwaはこのコマンドを叩くだけで PWA 化に必要な準備を全て適用してくれます。そう頻繁にすることではないと思いますが、オリジナルの schematics を作成して特定の一連の作業を自動化することもできます。

このように、Angular は SPA 開発をするに当たってやりたいあんなことやこんなことに対して、こういう構成でこういうフローでやればいいよ、必要なものは全部準備してあるよ、という環境を用意してくれます。これが Angular がフレームワークや開発基盤と呼ばれる所以です。勿論フレームワークもライブラリの一種ではありますが、その中でも特にアプリケーション開発のために必要なライブラリや構造、機構を一式まとめて提供してくれているものを指します。(とは言え厳密な定義があるわけではないのでこれは私の解釈です)

ちなみに、Next.jsやReact Nativeなど、React をベースに用いたフレームワークというものも存在します。例えば React Native は React を使ってネイティブアプリを作るためのフレームワークです。

Angular って何ですか

Angular とは何か、自分の言葉で説明できるようになったでしょうか。もし少しでもそのお手伝いができていたら嬉しいです。
最後に、私なりに表現すると Angular は「全部入りの SPA 開発ツール」です。(ひねりが全くない) ここまでお付き合い頂きありがとうございました。それでは、来年も Web 開発楽しんでいきましょう〜！

脚注

  1. (どうでもいい小話です) 当然 TypeScript と JavaScript の関係など知らないので、よくわからないけどメソッドは "JavaScript" と一緒に調べた方が検索ヒットしやすいが型みたいなのは "TypeScript" って調べた方が出てきやすいんだなぁなどと思っていました。 ↩︎

  2. 厳密にいうと多分やればできなくはないと思います。ただ私個人としては今のところどうにかして下の層に細かく手を入れる必要を感じたことはありません。私が Angular を触り始めたのは v5 か v6 だったと思いますが、それ以前の v2 や v3 といった初期から使っているプロジェクトにおいて当時できなかったことをするためにそういうことが必要だったという話は聞いたことがあります。 ↩︎

Discussion