Ionicをはじめる、たった2つのステップ

スマートフォンを持つサムネイル

この記事は執筆当時のバージョン v3.19.1 の内容で、現在は仕様が変更されている可能性があります。
2019年5月に、Ionic は v4.4.0 ( コードネーム : Beryllium ) が発表されています。
https://blog.ionicframework.com/ionic-release-4-4-0-beryllium/

今後の Ionic の更新状況にあわせ、随時情報を収集予定です。

結論から…

最低限必要なものは2つ。
・Node.js
・Ionic CLI

あとは、アプリ開発に当然必要になってくる環境を整えるのみです。
それでは以下に、順を追って書いていきます。

1. 何は無くともNode.js

これは何もIonicに限った話ではなく、2018年現在いまこの瞬間、
Webデザインやアプリ開発に少しでも携わる事をするなら、したいなら、
まずは導入すべき必須の存在と言えます。

もちろんすでに Node.js を導入済みの方は、飛ばしていただいて問題ないです!

もしも未導入の場合でも、導入自体はすぐに完了します。
色々なサイトで導入方法が解説されていますが、簡単に導入方法を。
無理にCUIじゃなく、できることは簡単にGUIでやっちゃいましょう。

下記公式ページにアクセスして、あとは画面に従ってインストールすれば問題ありません。
https://nodejs.org/ja/download/

Node.js はもはや説明不要というか、Web系の勉強をしている学生さんでも日々フル活用しているような、
知っていなければいけないレベルの
存在のひとつですので、もしも未導入の方は是非この機会に触れてみてください!

2. Ionic CLIの導入

Node.jsの導入が終わったら、
Ionicをコマンドラインで動かすためのツールを導入します。
具体的には、Ionic CLI という名称のものになります。
これも導入はすぐに完了します。CUIに慣れている方なら一瞬です。ターミナルから(Macの場合)、下記を一行記載すればOK。

$ npm install -g ionic@latest

補足:その他、もちろん必要なもの

iOS向けの開発にはXcode、
Android向けの開発にはAndroidStudioが必要になってきます。
Ionic単体でも開発自体は進められるのですが、
実機確認のタイミングなど、
最終的に実機向けにビルドするタイミングで必要になるでしょう。

まとめ

今回はとても簡単にですが、Ionicの導入について書きました。
導入が一通り済んだら、このあと、必要なのは以下です。

$ ionic start

上のコマンドについての詳細は下記。初期設定を行って、ionicプロジェクトを開始できます。
https://ionicframework.com/docs/cli/

その後、該当ディレクトリに移動して、

$ cd ./myNewProject

次のように、ionic serveを実行します。

$ ionic serve

するとローカル上でサーバが起動し、ブラウザでライブプレビューを行いながら開発を進める事ができます。

Ionicは全くとっつきにくいものではないので、意欲の高い方であれば、すぐに慣れるでしょう。
(そもそも僕自身もエンジニアではなく、肩書き上はWebデザイナーですので…。)

デザイナー単独でもアプリ開発ができる。Ionicは本当に魅力的です。

今後も、当サイトではIonicに関する記事を書いていきます。