はじめてのアプリ開発！Ionicで作るToDoリスト ①開発環境構築 編
今日もお疲れ様です。
先日から仕事終わりに少しずつ取り組んでいたモバイルアプリ製作ですが、
ようやくチュートリアル第1章が終了しました！
アプリとは名ばかりのなんちゃって作品ですが、
小さくて大きな一歩として記録したいと思います。
(目安：3分)
【目次】
書籍「 Ionicで作るモバイルアプリ製作入門[Angular版] 」
どんな本？
C&R研究所から出版されている書籍で、榊原昌彦さんが著者です。フレームワーク「Ionic」とクロスプラットフォームライブラリ「Capacitor」の基礎を分かりやすく解説しながら、実際に手を動かしてアプリをいくつか作る中で技術習得を目指す、そんな本となっています。
本のタイトルには入門と書いてあるので、僕のようなプログラミング初心者でも大丈夫かな～なんて最初は思っていました。しかし、もしご興味がおありでこれから購入される方はご注意ください。こちらの書籍は「ある程度JavaScriptを分かっている」人向けに書かれています。
JavaScriptについての基礎的な解説はありませんので、まだ経験がないという方はJavaScriptから触れてみることをお勧めいたします。
今回はモバイルアプリ開発の第1歩として、こちらの書籍を選ばせていただきました。冒頭の【はじめに】の部分で、個人的に「お、頑張るぞ！」と思える記載がありますので、引用させていただきます！
さぁ、アプリを作ろう
アイデアを実現するために何が必要でしょうか。あなたにWeb技術と開発環境があれば、オフィスも仲間も必須ではありません。大きな資金調達をしなくても、新しい言語をゼロから覚えなくても、すでに身に付けている技術の延長線上であなたはアイデアを実現してアプリをリリース出来ます。
着地点に「アイデアを実現するために」と設定するところ、意欲を掻き立てられます！
初めての"開発環境"
Ionicを使うためのツールたち
現役エンジニアの友人から話だけは聞いていました。アプリケーション開発で最初にやらなきゃいけないという開発環境の構築。HTMLで初めて「Hello World」を書いたときはWindowsアクセサリのメモ帳でした。その印象が残っていたということもあり、
「アプリもテキストエディタさえあれば出来るだろう」
なんていう甘ちゃんな考えを持っていました。お恥ずかしい限りです。
今回参考にさせていただく書籍にも、丁寧に解説されています。初心者の僕にも分かりやすく画像付きで。早速、順番にセットアップしていきます。
Node.jsをインストール
早速見たことのないアルファベットの羅列にビビりますが、インストールはいたってシンプル。ただその前に、すでにインストールされているかどうかを確認するために、コマンドプロンプトに
> node -v
を入力。僕の場合、もちろんインストールされていませんでしたので、結果を待つまでもなくインストールしに行きました。笑
普通に「Node js」と検索するだけでしたのでこれは簡単ですね。
ちなみに、この画像の上部には
「Node.jsは、ChromeのV8.JavaScriptエンジンで動作するJavaScript環境です」
と書かれていますが、これが何のことやらよく分かっていません笑。
さくさく次へ行きます！
Ionic CLIをインストール
こちらをインストールすると、その名の通りIonicコマンドを使えるようになるとのこと。書籍に従うと、コマンドプロンプトに
> install ionic -g
と入力すればOKだそう。入力後、英数字がぱぱーっと流れるのを身ながら数分待っているとインストール完了。意外と簡単だ！どんどん行きましょう～。
Gitをインストール
Ionic CLIでプロジェクトを作成する際のバージョン管理システムだそうです。なるほど、分かった、5％くらい。
こちらはコマンドプロンプトではなく外部から落としてくるタイプの模様。早速アクセスして取りに行きます。Gitと検索するだけだとサクッとダウンロードページへたどり着かないので、
Git download
と検索するといいですね。
こんな感じのサイト。自分のOSに合わせたものを選んで落とすんですね。
僕はWindowsなのでそちらをクリック。
本書によると、この後モバイルアプリで必要なツールの解説に入るのですが、macの方はXcodeというツールを落とすそうです。僕はandroidユーザーなのでandroid studioへ進みます。
Android Studioをインストール
聞いたことある！なんだかいよいよ開発するんだな～。まだ早いか。笑
こちらも外部サイトへアクセスしてダウンロード。
こんな感じの。なんだかWikiみたいですね。
ダウンロードしたあとインストールですが、ここで少し手こずりました…。画像を取っておけばよかったのですが、インストールの設定の際に、保存先のフォルダを選ぶことってあるじゃないですか。基本的には初期設定のまま作ってもらったらいいですよ～ってスタンスなので完全ノータッチだったはずなのですが、
「あれ、いじってないのにAcceptが灰色になっててクリック出来ない。進めない。」
っていう状態になってしまいました。本書にもこの辺の解説はされておらず、「初期設定まで終わらせます」くらいしか書かれていなかったので戸惑いました。
素直にgoogleで検索。すると、保存先のフォルダ名に日本語が含まれていると進めない、とのこと。なるほどね。ユーザー名が僕の名前(漢字)になっていたので進めなかったということのようです。ありがとう、先駆者の方！
IDE/エディタをインストール
最後です！割とさくさく！落とすだけだから当然か。
有償のものと無償のものがあるそうで、本書でも2種類ご提案されております。
もちろん無償で！！ということでVisual Studio Codeをインストールします。
インストールの後、拡張機能として「Angular Language Servece」をつけると、入力しかけた文字列から始まるオブジェクトを提案してくれたり、読み込んでいるオブジェクトを定義しているファイルへジャンプする機能が使えるようになるとのこと。これはありがたい！
次回「要素ありすぎてワケが分からないよ」編
開発環境、失敗するとパソコン壊れるよ！なんて、友達には脅されていました。ということもあって比較的慎重に進めていましたけど、本書がすごく優しく解説してくださっているということもあり、危なげなくクリアです。
次回、いよいよIonicなるものへ飛び込むわけですが、もう見たこと無いコードやら要素だらけで不安ゲージ振り切っています。で、できることからやってみよう、、、
