この記事は、ionicアドベントカレンダー2017の12/9の記事になります。
これからionicに足を踏み入れようかな？という人向けに書いています。
ionicコトハジメ経緯
2017年はスマホでアプリ開発元年でした。
それまでの自分の技術の守備範囲としては、主にバックエンド＋API周りでした。
自社開発しているBowingVision(弦楽器の腕の動きを、右腕２カ所につけたセンサーから取得し、リアルタイムで動きを可視化するiPadアプリ）も、元はWEBアプリで開発してしていたのですが、パフォーマンスがいまいち出ないのもあり、年の始めにswiftで実装し直すことにしました。
「はじめまして、スマホアプリ開発＆swift」でしたが、3月の展示会にアプリを出展することができました。
おー、なんかスマホアプリ作れる！と思い始めた頃に、ちょうどアプリの開発案件をいただきました。
あ、じゃあAndroidも勉強するかな、この機会に・・・と思ったのですが、
AndroidとiOSの両方のプラットフォームで動くアプリをそのスケジュールで！？
という時間の制約があったのです。
最短で両方のプラットフォームで動くアプリをつくる方法・・・・
そのときに、ハイブリッドアプリが頭をよぎったのです。
ionic、調べてみました。日本語で情報は少なかったですが、海外の情報は溢れるほどありました。これなら調べながら十分開発できる、と確信したので、ionicで開発することにしました。
この記事では、そんなこんなで始めたのはいいけど、ionicをどう勉強したかを書いていこうと思います。
これから始めようかなという人のお役にたてば嬉しいです。
まずは動かして見る
MacBook持っている前提で話を進めます。
node.js入っていますか？
これからインストールするなら、node brewでnode.jsのバージョンの切り替えができるようにしておきましょう。
Node.jsの管理をHomebrewからnodebrewに変える – Qiita
おきまりのGetting Startedでまずは動かす
//インストール
npm install -g cordova ionic
//myAppと言う名前のアプリをつくる
ionic start myApp tabs
//ディレクトリを移動
cd myApp
//動かす！
ionic serve
//--labをつけると、iOS Android両方のUI確認できます
ionic serve --lab
自分の環境で、まずは最初の一歩が動かせることを確認して置くのは大事かなと思っています。
動画サイトで勉強する
これ最強、と自分では思っています。
Very Very Very easy!
とかノリノリの英語を聞いていると、本当になんでもできるような錯覚になりますw
iOS+swiftの時もまずは動画サイトで動画を流しつつ、簡単なアプリを写経していきました。Xcodeの操作などは本をみるより、操作しているのをみる方が断然わかりやすいです。
私が見た動画をいくつか紹介します。
Ionic 2/ Ionic 3 – Build iOS & Android Apps with Angular
ionicとは？Angularとは？というところから説明を始めてくれて、４つのアプリケーションを開発していくやり方を丁寧に説明してくれます。
ソースコードは全てダウンロードできますので、後で見返すこともできます。
クーポンやセールを利用すれば、1200円払えば、ionicのアプリの組み方からリリースまで1から10まで丁寧に教えてくれるコースをダウンロードできます。
慣れてくると、じっと座って見ているのも勿体無いので、ぜひオフラインダウンロードして通勤時間に見るのオススメします。
coursetro
こういうかっこいい動きやデザインはどうやってionicで実現するの？という時の引き出し
に見ています。デザインよりなアプローチをしているのと、英語が聞き取りやすいです。
Joshua Morony
ionicの様々な機能を、丁寧に説明しているサイトが素晴らしい・・・。
こういうことやりたいんだけど・・・と思ったら、Joshuaさんのサイトで検索すれば、見つかる！ということが多いです。
教えかたは、その人によって変わるので、是非自分の好みの先生を見つけて見てはどうでしょうか？YouTubeで「ionic」で検索すると沢山の動画を見つけることができます！
アプリマーケットでスターターやテーマを買ってみる
人の書いたコードをみて勉強する、です。
もちろんマーケットで買わなくてもフリーで転がっているのでもいいのですが、売り物にしようとしているプロダクトは、それなりの知恵が詰まっています。
いくつか買うと、その人や会社によって、書き方が色々違います。
なるほど、そんな書き方があったのか！
という発見も多いです。
逆に、そんな書き方しないなーとか好きじゃないなあーというのもあります。
自分たちの作るプロダクトの前に、どこがよくない、いい、などを一緒にコーディングする人と議論することで、どうアーキテクチャを組むかという話もできますし、コーディングスタイルなども共有できます。
オンラインスクール
ionicのオンラインスクールというのもあります。
びっくりしました。海外では、スクールが成立するくらいには、ionicすごく使われいるんですかね。
こちらは試したわけではないのでこういうのもあるよ！と言う紹介だけです。
最強はstack-overflow
検索は全て英語でやりましょう。
エラーはそのまま検索してみましょう。
stack-overflowでほぼ救われました。
さいごに
英語のリソースばかり紹介してしまいましたが、ionicについては、圧倒的に情報が英語圏にあるのです。
テンプレート販売もたくさんあるし、動画で講座もたくさんありますし、電子書籍を販売している人もたくさんいます。
しかし、日本語のリソースは少ない・・・
私も英語は全部聞き取れていませんが、ソースコードが追えれば何とかなると思います。
来年の1月には日本語でも本が出るようなので、英語のハードル高い！と言う場合は、それから始めてみると良いかもしれません。
Enjoy!