見出し画像

Ionic開発の準備をしよう!

ツールのインストール

JavaScriptとHTMLだけであれば、メモ帳を立ち上げるだけで開発ができるのですが、IonicとAngularを使うには少し手間をかけてあげる必要があります。
ただ、一回やれば済むことなので、頑張って乗り越えましょう!!

Node.js

まず、ターミナル(Windowsの場合はコマンドプロンプト)を立ち上げます。いわゆる、「黒い画面」です。

立ち上げ方は、
「アプリケーション ー ユーティリティ」
にあります。
Windowsの人は検索バーに「コマンドプロンプト」と入力してください。

いかにも難しいことをやる雰囲気がぷんぷんしますが、そんなに怖がらなくて大丈夫です。パソコンも簡単には壊れません。

まず、Node.jsが入っているか確認してみましょう。

node -v

と入力してEnterを押してみてください。

このように、数字が出てきたら既にインストールされています。
もし、command not foundや、認識されません的な文章が表示された場合はインストールされていませんので、以下のページからインストールしてください。

(バージョンが古い方も上記のページから上書きインストールしてくれれば大丈夫です)

インストールが終わったら、再度

node -v

を試してみてください。それで、無事に数字が表示されればインストールは以上です。

Ionic

Ionicのインストールができるようになりました。

ionic -v

で、確認してくれてもいいですが、おそらくインストールされていないはずなので、次のコマンドを実行しましょう。

【Macの場合】
sudo npm install -g @ionic/cli

【Windowsの場合】
npm install -g @ionic/cli

これでIonicのインストールは完了です

Git

これも入れておきましょう。
Xcodeをインストールしている人は入っていると思います。

確認方法は

git --version

バージョン(数字)が表示されない場合は、インストールされていないので以下のページからインストールしてください。

エディタ

だいたいみんなVisual Studio Code(以下、VS Code)を使います。
無料で最高です!!

ここに、カチャカチャとプログラミングをしていきましょう!

VS codeの拡張機能

必須ではないですが、先ほどインストールしたVS Codeには色々な拡張機能がインストールできます。

拡張機能のインストールは画面左の箱が四つ並んだところから行えます。

その中でもおすすめなのが、こちら。

・Angular Language Service
・Japanese Language Pack for Visual Studio Code
・Path Autocomplete
・Color Highlight

このへんを入れておけばいいのではないでしょうか?
あとは、色々調べてみてください。

VS Code 拡張機能

なんて検索すれば、色々な人のおすすめが出てくると思います!!

それでは、Ionicでプログラミングを楽しみましょう♪

この記事が気に入ったらサポートをしてみませんか?