Edited at

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

Yoki(@enyyokii)と申します。

渋谷のIT企業でアプリエンジニアしている25才です。

仕事では iOS、Android、Webフロントエンドなど色々しており、週末は勉強を兼ねて個人開発したりしています。

業務にてIonicフレームワークを使用して新規アプリ開発機会がありました。

本記事ではIonic入門者が見ておくときっと役に立つであろうものをまとめてみました😆

Hello Ionic...

【そもそもIonicとは?】

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

【公式ページ】


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のどちらを選ぶべきか?


  • IonicはAngularの開発プラットフォームです。で、AngularはJavascriptのフレームワークですよ。Javascriptだと今はReactとかVueが勢いあるけど、Angularて何?ReactやVueとの違いは?という人にはこの記事

【JavaScript】3大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月)


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

Angular データバインディング


  • TypeScript、型があるのって嬉しいの?

ワイ「いうても型なんて面倒くさいだけやろ?」


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

[【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


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

【Ionic3(Angular)】Componentを作成してHTMLを分割する方法まとめておく


時代はRxJsじゃ


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

RxJS を学ぼう #2 - よく使う ( と思う ) オペレータ15選

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


CSS, UI

みんな大好きfontAwesome

CSSの命名規則


基本的な考えとか前提とか


  • BEMの中でも特にMindBEMdingと呼ばれている命名法をベースとしている

  • SCSSを使用する

  • 基本的にはシングルクラスで設計したい

  • HTMLの構造とSCSSの構造は極力分離したい

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


便利なCSSのTIPS


おわり

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