content【年末年始のもくもく活動応援記事】Ionicアプリ開発ことはじめAngularionicはじめに会社が年末年始の休みに入りました。スタートアップである僕の会社のメンバーは、各自何かしらの課題を設定してじっくり取り組むようです。僕が所属するモバイルアプリチームでは、来年からは事業の主軸のモバイルアプリの開発をよりスピーディに行うために、デザイナー出身者にも積極的にコードを書いてもらおうと考えています。いえ「はい、頑張って!!」ではあまりにしんどいかと思ったので、足掛かりとしてハンズオン資料を作ってみることにしました。対象となる環境は次の通りです。Code目指す状態は次の通りです。HomebrewをmacにインストールするnodenvをmacにインストールするNode.jsをmacにインストールするIonicアプリを作るIonicアプリのコードを修正するIonicの標準コンポーネントを使ってみる目標はさくっと動くところまで持っていって、「私でもいけそう!」「もうちょっと触ってみたい!」と思ってもらうことです。HomebrewをインストールするHomebrew(ホームブリュー)は、開発に必要なアプリをmacOSにインストールするためのアプリです。Storeのようなものですね。一般的なアプリのように画面があるわけではなく、コマンドから利用します。コマンドがHomebrewです。ターミナルで次のコマンドを実行してHomebrewをインストールします。https://raw.githubusercontent.com/Homebrew/install/master/install)"nodenvをインストールする先ほどインストールしたHomebrewを使って「nodenv」というアプリをインストールします。nodenvこれからの開発で「Node.js(ノード・ジェイエス)」というプログラミング言語を使います。ブラウザ上で動くJavaScriptをmacやLinuxで動くようにしたもの、という認識で大丈夫です。(2019/12/28現在)。使う、なんてことがよくあります。そんなとき、フォルダごとにNode.jsのバージョンを切り替えられるようにするアプリがこのnodenvになります。「開発しているアプリ全部、最新のNode.jsを使っちゃいかんのか!?」と思うかもしれませんが、何も考えずにNode.jsのバージョンを上げると、古いNode.jsに合わせてインストールされている関連ライブラリや、古いNode.jsで動くようなコードが動かなくなります。プログラミング言語や使っているライブラリのバージョンは適当に上げるのではなく、しっかりと計画を立てて、影響を考慮して慎重に行うのが鉄則です。先ほどインストールしたnodenvを使ってNode.jsをインストールします。インストールできました。macにインストールされているNode.jsのバージョンは次のコマンドで確認できます。13.0.1合計7個のNode.jsがインストールされています。作業ディレクトリを作るこれからサンプルアプリを作っていくのに使うディレクトリを準備します。(ちなみに「ディレクトリ」と「フォルダ」は同じものです。自分のホームディレクトリを表します。Node.jsのバージョンを設定します。動作するようになります。Ionicアプリを作るようやく本題です。CLI(Ionicの開発環境を整えてくれるアプリ)を使ってIonicアプリを作っていきます。offerこれでもう準備完了です。アプリの開発環境を起動して、ブラウザで動作確認をしてみます。serveちょっと待つと自動的にブラウザが起動して、次のような画面が開きます。CLIで生成されたコードを変更してみます。