えとーのプログラミング解説#1 Angular とはなんぞ?

こんにちは、えとーです!

最近特にブログにする内容もなかったのですが、考えてみればえとーくんWeb担だと言うことを思い出して、プログラミングの事なら割と文字数的にも長く書けそうでSEO対策的にも良さそうだったので今回は新DO-MUサイトで採用予定のAngularについてお話をしていこうと思います!

あっ、多分プログラムとかWebサイトにに縁のない方はこの記事を見ていても、魔女の呪文にしか見えないと思うので読み飛ばしてもらって結構です(苦笑)


まず Angular とはなんぞ?

Angularは主にGoogleが開発しているフロントエンドWebアプリケーションで、JSのみで動作するAngularJSと、npmでTypeScript(通称: TS)をビルドするAngularが存在します。

AngularJSは既に運用されているサイトへの導入や、簡易的なサイトへの導入には向いていますが、パフォーマンスがあまり良くありません

対してAngularは覚えることが沢山あり、開発の手間や手順はJavaと同じぐらい掛かりますが、パフォーマンスは抜群エラーは殆ど無く、機能も比較できないほど増えています。

今回解説するのはこの無印のAngularの方です。


まずAngularを使うことによるメリットデメリットについてお話していきます。

メリット

  • 一つの場所に全部まとまっているため、メンテナンスが簡単になる
  • ビルド時にデバッグされるので、予期せぬエラーをかなり抑えることが出来る
  • 大規模なサイトになるほど管理が行き届きにくくなる問題を解決できる
  • ループや動的処理が簡単に行える
  • アップデートが頻繁に行われるので、常に最新のセキュリティで利用できる

デメリット

  • 現状のサイトで利用できない
  • 覚えることが多すぎる
  • フレームワーク自体はそんなに軽くないので、小規模サイトには向いていない(これに関してはAngular6でかなり改善された)
  • 頻繁にアップデートが来るので、細かいリファクタリング作業が増える

つまり「エラーが出たり重くなっても何も問題ないよ~」ってサイトはAngularJSやjQueryで問題ないですが、出来るだけ手間をかけずセキュリティの強化処理を軽くしたり、Webサイトで出来ることを増やしたいという方にはAngularがおすすめ

その他にも近い使われ方をするものでReactVue.js等もありますが今回は混ざると面倒くさいので端折ります。


Angular の主な機能

スコープ

まずAnguarの一番の目玉はスコープです。

例えば

// TypeScript
this.title = "テスト投稿";
this.category = "テスト";
this.text = "Angularのスコープテストです。";
<!-- HTML -->
<h1>{{title}}</h1>
<p>カテゴリ: {{category}}</p>
<p>{{text}}</p>

と記述するだけで実際のHTMLの出力は

<h1>テスト投稿</h1>
<p>カテゴリ: テスト</p>
<p>Angularのスコープテストです。</p>

という出力になります。

また、このスコープは複数出力でももちろん利用でき

<h1>{{title}}</h1>
<p>カテゴリ: {{category}}</p>
<p>{{text}}</p>
<p>{{category}}/{{title}}</p>

このように指定した場合は

<h1>テスト投稿</h1>
<p>カテゴリ: テスト</p>
<p>Angularのスコープテストです。</p>
<p>テスト/テスト投稿</p>

という出力になるため、今まで何重にも書いていたコードの手間を削減することができます。

またこのスコープは動的に変更できるため、表示の更新が頻繁に必要な内容でも問題なく扱えます。

パイプ

Angularにはパイプと言う素晴らしい機能が搭載されていて、DO-MUのサイトでもよく利用している機能

変数がint型だった場合、価格等の3桁区切りを入れるのはかなり面倒です。

その際にAngularのパイプ機能を利用して書くと・・・

 

// TypeScript
this.price = 59800;
<!-- HTML -->
<p>{{price | number: 0}}円(税込)</p>

これだけで出力は

<p>59,800円(税込)</p>

という出力になり、非常に便利な上に簡単にできます。


簡単な解説でかなり長くなってしましました。

ただ、それだけAngularの機能は魅力的ということです。

今回はこの辺で終わって、次回はnpmのインストールAngularの開発環境の構築についてお話したいと思います!

以上、えとーでした!

コメントを残す

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