初心者必見！AngularとTypeScript〜困り事と解決法をまるっと紹介〜

私T.Kは、いつものようにお仕事に取り組んでいました。
そんなある日のこと…

というわけで、Angularを触ってみました！
当記事では、私がAngularを実際に触ってみて感じたことをいろいろと紹介します！ぜひ見ていってね🥰

記事概要

Angularの難しさについて
Angularについてのノウハウ集

ところで

モダンなフロント開発について調べていると、

Angularは難しい
学習コストが高い
TypeScriptを使う

などなど、Angularの敷居の高さを思わせるような記述にしばしば出会います。

実際どうなの

Vue.js経験者である私は、実際に案件に携わってみて以下のように感じました。

基本的な考え方はVue.jsと一緒
TypeScriptは、慣れてしまえば便利
やりたい挙動を実現するための記述を調べにくいが、記述が分かれば難しくない

基本的な考え方はVue.jsと一緒

Angularは、

コンポーネント構造
HTML内で変数を使用できる
動的ロジックとHTMLマークアップがお互いにあまり影響しない

など、基本的な考え方はVue.jsとほぼ変わりません。
そのため、ToDoリストなどもVue.jsと同様、容易に作成できます。

（Vue.jsでToDoリストを作る方法は当ブログの過去記事からどうぞ）

しかしAngularには特徴があります。

その一つは、TypeScriptの使用です。

TypeScriptは、慣れてしまえば便利

TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語である。TypeScriptはJavaScriptに対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセットとなっている。
出典　Wikipedia

TypeScriptは、JavaScriptに型の概念が加わったものです。Angularでは、このTypeScriptを使ってスクリプトを記述します。
JavaScriptとは記述が少しだけ異なるため、新たに文法を覚えなければなりません。
今までJavaScriptしか書いたことのない方は、ここに敷居の高さを感じるのではないでしょうか？

しかし、TypeScriptを覚えると様々なメリットを享受することができます。
（具体的なメリットはこちらのサイトをご覧ください）

私はJavaScriptでスクリプト書いている時より快適に書けるように感じました。

またTypeScriptはAngular特有の言語ではなく、様々な箇所で使用することができます。
実際にTypeScriptが使用されるプロジェクトも少なくありません。

メンテナンス性および将来性に富んだこのTypeScript、私は「ぜひこれからも使っていきたい」と感じました。
実際に使わないとなかなか有用さを実感できません。ぜひ皆様も恐れず挑戦してみてください！
特に中規模以上のプロジェクトでメリットを強く感じるかと思います！

そして、Angularの特徴、

もう一つは「インターネット上における情報の量」です。

やりたい挙動を実現するための記述を調べにくいが、記述が分かれば難しくない

私は、「インターネット上にAngularについての記事が非常に少ない」という印象を受けました。

「こういうことがやりたい」という需要ができても、それを実現する方法になかなか行き着きません。

しかし、これは「記述さえ分かれば難しくはない」ということでもあります。

私もグッチさんと一緒に記述を一生懸命調べつつ、一つずつ解決していきました。

こうして弊社ロジカルスタジオには、Angularについてのノウハウが溜まっていきました。

さてこのノウハウ、弊社内でほくほくと温めておくにはあまりにももったいない…

そこで！

Angularで困ったこと

私が今回Angularについて困ったこと、ならびにその解決法を、共有したいと思います！

「ある程度Angularに触れて、基本的な書き方は分かったけど、これ、どう記述したら実現できるんや…？」

という悩みを持つあなた！

よろしければぜひ参考にしてください！

またこれからAngularを触ろうと思っている方も、触っているあいだに上記のような悩みが出てくるはずです。

その際はぜひ当記事を思い出して、参考にしていただければと思います。

ResetCSSが反映されない

ResetCSSとは、ブラウザのデフォルトCSSを打ち消して各ブラウザでの表示を統一するためのCSS。
通常CSSのはじめに記述しますが、AngularのコンポーネントのSCSS内に記述すると
htmlタグやbodyタグにCSSが反映されなかったりします。
それもそのはず、htmlタグやbodyタグはコンポーネント外の要素。

そこで、リセットCSSをindex.html内で読み込みます。

<html>
  <head>
    <link rel="stylesheet" href="common.css">
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

こうすると、全ての要素に対してCSSを適用できます！

pc-onlyなどの挙動がうまくいかない

レスポンシブサイトのコーディング時、パソコンとスマートフォンで要素を出し分けるために
クラスを作ることがしばしばあります。

.pc-only{
  display: block;
}

@media screen and (max-width: 767px){
  .pc-only{
    display: none;
  }
}

こういったクラスは、各コンポーネントのSCSS内で定義します。

ResetCSSと一緒に書くと、CSSの優先度の関係でうまく適用されません。

*ngIfが効かない

Angularには条件により要素を出し分けする記述*ngIfがあります（Vue.jsのv-ifに相当します）。

しかし、そのまま使うと以下のようなエラーが出ます。

Can't bind to 'ngIf' since it isn't a known property of 'div' in production build

*ngIfを使うにはまずapp.module.tsでCommonModuleをインポートする必要があります。

import { CommonModule } from '@angular/common';

あとは、HTML内で以下のように記述するだけです。

<div *ngIf="hoge === 0">hogeの値が0のとき、この文が表示されます</div>

Angularでは、このようにapp.module.ts内で特定の記述をしないと動作しない記述がいくつかあります。

「あれ？正しく書いてるはずやのに動作しない？」ということがあれば、まずここを疑ってみてください。

イベントを設定したのに動かない

Angularではイベント名にカッコをつけて関数を指定すると、要素にイベントを持たせることができます。

<button (click)="hoge()">piyo</button>

このhoge()のカッコは省略するとイベントが起こりません（Vue.jsではカッコは省略可）。

つまり以下のコードは不可ということです…

<button (click)="hoge">piyo</button>

子コンポーネントへオブジェクトを渡したい

子コンポーネントへ値を渡す際は、以下のように書きます。

<app-hoge piyo="fuga"></app-hoge>

変数の値を渡す場合は以下のようにマスタッシュで囲んで書きます。(shuko：変数名)

<app-hoge piyo="{{shuko}}"></app-hoge>

しかしオブジェクトを渡す場合は少し記述が異なります。
属性名を[]で囲み、属性名は変数名を指定します。

<app-hoge [piyo]="shuko"></app-hoge>

この場合、マスタッシュをつけて{{shuko}}というふうに記述すると値を渡すのに失敗します。

変数がnullの時エラーになる

変数をnull許容にすればOK。変数を定義するとき、ハテナをつけます。

hoge?

ちなみにこちらはTypeScriptの文法のようです。TypeScriptを使うプロジェクトでは同様の記述が可能です。

終わりに・補足

前述のとおり、AngularはTypeScriptと記述方法が分かれば難しくはありません。

Angularを触ることができれば、できることの幅が広がり、自信にもつながるかと思います。

ぜひ皆様も恐れず、Angularに触れてみてください！

とは言いつつ…

「Angular、触ってみたいけどどこから触ればいいか分からない！」という方も多いのではないでしょうか？

私は、「既に進んでいるAngularプロジェクトに後から参加する」ということをおすすめします。

先駆者に教えてもらいながらAngularに触れられるので、一人で触れるより効率よく学べるかと思います(これはAngularに限らずですが)。

しかし、参加できるプロジェクトはそう簡単に見つかるわけでもないというのもまた現実…

そこで

Invitation from 株式会社ロジカルスタジオ

If this story triggered your interest, have a chat with the team?

株式会社ロジカルスタジオ's job postings

初心者必見！AngularとTypeScript〜困り事と解決法をまるっと紹介〜

土谷　隆秀

株式会社ロジカルスタジオ / Web engineer

13 Likes

初心者必見！AngularとTypeScript〜困り事と解決法をまるっと紹介〜

記事概要

ところで

実際どうなの

基本的な考え方はVue.jsと一緒

TypeScriptは、慣れてしまえば便利

やりたい挙動を実現するための記述を調べにくいが、記述が分かれば難しくない

Angularで困ったこと

ResetCSSが反映されない

pc-onlyなどの挙動がうまくいかない

*ngIfが効かない

イベントを設定したのに動かない

子コンポーネントへオブジェクトを渡したい

変数がnullの時エラーになる

終わりに・補足

とは言いつつ…

そこで

株式会社ロジカルスタジオ

フロントエンドエンジニア

Weekly ranking