初心者必見！AngularとTypeScript〜困り事と解決法をまるっと紹介〜 | 株式会社ロジカルスタジオ
1
/
5
This page is intended for users in Singapore. Go to the page for users in United States.
株式会社ロジカルスタジオ
Follow
https://www.logical-studio.com
大阪府
Follow
HomeAbout usMembersStoriesJob postings
初心者必見！AngularとTypeScript〜困り事と解決法をまるっと紹介〜
土谷　隆秀
Web engineer
on 2020-09-11
9
1
私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に限らずですが)。
しかし、参加できるプロジェクトはそう簡単に見つかるわけでもないというのもまた現実…
そこで
株式会社ロジカルスタジオ's job postings
PHPエンジニア
Webディレクター
フロントエンドエンジニア
Other occupations (2)
Development
PHPエンジニア
フロントエンドエンジニア
マークアップエンジニア
WEBデザイナー
Business
Webディレクター
初心者必見！AngularとTypeScript〜困り事と解決法をまるっと紹介〜
土谷　隆秀
株式会社ロジカルスタジオ / Web engineer
JavaScript TypeScript フロントエンドエンジニア Angular ロジカルスタジオ
12 Likes
9
1
12 Likes
9
1
土谷　隆秀
株式会社ロジカルスタジオ / Web engineer
株式会社ロジカルスタジオ所属 フロントエンドエンジニアの土谷です。 普段はウェブページの制作を行っています。 他にもPWA制作、勉強会登壇、ブログ記事作成など、様...
Follow
株式会社ロジカルスタジオ
◼️システムに強いクリエイティブプロダクション　当社は、ソフトウェア開発会社として培った技術力を強みにディレクションからデザイン、システム開発、コーディング、メンテナンスまでワンストップで請け負うクリエイティブプロダクションです。 イラスト・グラフィック・動画制作などのクリエイティブから、データベースが絡むシステム構築まで幅広くカバーできる強みを生かし、さらなる業務拡大を目指しています。
Follow
フロントエンドエンジニア
Weekly ranking
Show other rankings
If this story triggered your interest, why don't you come and visit us?
即戦力募集！最新技術を追い求めるフロントエンドエンジニアをWanted!
Want to Visit
Services
Mobile apps
Wantedly Visit (iPhone/iPad)
Wantedly Visit (Android)
About Wantedly
How to use
Help
About
Terms of Use
Privacy
Links
Full-time
Internship
Freelance
Contract work/part-time
Countries
Singapore
Japan
Hong Kong
For employers
Wantedly Admin for employers
Send
Are you sure you want to send this feedback to Wantedly?
Cancel Submit
