【Ionic】実務でIonic入門した自分が参考にしたTIPS記事をまとめてみた！！


Yoki(@enyyokii)と申します。

渋谷のIT企業でアプリエンジニアしています。
仕事では iOS、Android、Webフロントエンドなど色々しており、週末は勉強を兼ねて個人開発したりしています。

業務にてIonicフレームワークを使用して新規アプリ開発機会がありました。
本記事ではIonic入門者が見ておくときっと役に立つであろうものをまとめてみました😆

Hello Ionic...

【そもそもIonicとは？】

Ionicとは、GoogleのAngularというフレームワークをベースに、Typescript + HTML5 + CSS(Sass)でのアプリ開発を可能にするフレームワークです。


【公式ページ】

* [Angular](https://angular.jp/)
* [Ionic version 3](https://ionicframework.com/docs/v3/)
* [Ionic version 4（最新は4系なので新規開発する場合はこちらを参考にすると良いと思います）](https://ionicframework.com/docs/)

## Angular, Ionicについて

* Angularの開発ではTypeScriot, そしてRxJsを使用していきます〜

>TypeScriptとは
>
>TypeScriptはMicrosoftが開発した、JavaScriptを拡張した新しい言語です。JavaScript ES2015のスーパーセットで、新しいバージョンのJavaScriptの機能も取り込んでいます。TypeScriptを使えば、Babelを使わなくても最新鋭のJavaScriptが書けます。またTypeScriptは強力な型付けシステムを持ち、型アノテーションと型インターフェイスによりコードの静的分析が可能です。

>RxJSとは
>
>RxJSは、非同期処理とイベントを柔軟に扱うための「リアクティブプログラミング」を実現するライブラリーです。オブザーバーパターン、イテレータパターン、関数型プログラミングの特徴を融合しています。RxJSイベントなどを連続的なデータストリームとして扱い、それに対してマッピング、フィルタリング、分割、結合などの処理をします。
このライブラリーはAngularのHTTPモジュールおよび一部の内部処理に使われています。HTTPリクエストを実行すると通常のプロミスではなくObservable（観察対象）が返されます。パワフルなライブラリーですが、少々複雑です。さまざまなタイプのObservables／Subjects（観察対象）に馴染む必要があり、さらに百個近いメソッドと演算子を習得する必要があります。HTTPリクエストのためにちょっとやりすぎだと思います。
RxJSはWebSocketをはじめ数多くの継続的なデータストリームを扱う場合に便利ですが、それ以外では複雑すぎるかもしれません。とはいえ、Angularで開発するなら基本的なことは知っておくとよいでしょう。

[引用: 開発者はReactとAngularのどちらを選ぶべきか？
](https://www.webprofessional.jp/react-vs-angular/)
 
* IonicはAngularの開発プラットフォームです。で、AngularはJavascriptのフレームワークですよ。Javascriptだと今はReactとかVueが勢いあるけど、Angularて何？ReactやVueとの違いは？という人にはこの記事

[【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月)](http://iwasiman.hatenablog.com/entry/2018/04/23/200000)

* Angularのバインディング方法について

[Angular データバインディング](https://medium.com/@genta.ameku/angular-%E3%83%87%E3%83%BC%E3%82%BF%E3%83%90%E3%82%A4%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0-bdf8d0c96771)

* TypeScript、型があるのって嬉しいの？

[ワイ「いうても型なんて面倒くさいだけやろ？」](https://qiita.com/jzmstrjp/items/2eaa6fd75255c8c2a2bb)

* やっぱり基本はライフサイクルを知ること

[【Ionic】ライフサイクル【Lifecycle events】(https://mosapride.com/index.php/2018/04/25/post-838/)
（こちらの記事はIonic 3のものです。Ionic 4 で変更点あったので注意。変更点に関しては下の記事が詳しいです。）

* ionic 4のライフサイクル

[Ionic 4 and the Lifecycle Hooks in Angular](https://medium.com/@paulstelzer/ionic-4-and-the-lifecycle-hooks-4fe9eabb2864)

* コンポーネント化、コンポーネントにまとめて綺麗なプロジェクトをつくろう

[【Ionic3（Angular）】Componentを作成してHTMLを分割する方法まとめておく](http://kimagureneet.hatenablog.com/entry/2018/07/22/014004)

## 時代はRxJsじゃ

* オペレーターはたくさんあるけど、20個ぐらい理解しておけばなんとかるんじゃ

  [RxJS を学ぼう #2 - よく使う ( と思う ) オペレータ15選](https://tech.recruit-mp.co.jp/front-end/post-11475/)

* まとめて投げて且つ返ってくる順番も保証して欲しいときあるよね
  [RxJSのforkJoinはPromise.all相当](https://chooblarin.github.io/post/forkJoin-in-rxjs-is-promiss-all)

AngularにてCSSを動的に変更する

* [NgClass: How to assign CSS classes in Angular](https://malcoded.com/posts/angular-ngclass)

## CSS, UI

みんな大好きfontAwesome

* [【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう](https://saruwakakun.com/html-css/basic/font-awesome)

CSSの命名規則

* [BEM を使うべき5つの理由（なぜ BEM が G.R.E.A.T といえるのか）](https://frasco.io/5-reasons-to-use-bem-f5ca38f748a1)
* [一番詳しいCSS設計規則BEMのマニュアル](https://qiita.com/Takuan_Oishii/items/0f0d2c5dc33a9b2d9cb1#%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E8%80%83%E3%81%88%E3%81%A8%E3%81%8B%E5%89%8D%E6%8F%90%E3%81%A8%E3%81%8B)

>基本的な考えとか前提とか
>
>* BEMの中でも特にMindBEMdingと呼ばれている命名法をベースとしている
>* SCSSを使用する
>* 基本的にはシングルクラスで設計したい
>* HTMLの構造とSCSSの構造は極力分離したい

> element内にさらにelementをネストして定義してはいけない

便利なCSSのTIPS

* [要素を横並びにするならflex boxしかない！](https://qiita.com/HiromuMasuda0228/items/baf8015076d7d90b8fea)
* [[SCSS]便利な&（アンパサンド）の使い方メモ](https://qiita.com/noqua/items/adc24c28c13e9b74d3ad)
* [これからのレイアウトはGrid Layoutで決まり？特徴で使い分けたいCSSレイアウト手法](https://ics.media/entry/15921)

* [[CSS]Sassの@extendとは？使い方も紹介](https://code-schools.com/css-sass-extend/)


## おわり
Ionicに興味を持った人、開発者の参考になれば幸いです。👍