Zenn
📡

NativeScript の環境構築を M1 と fish shell ではじめる (macOS)

2022/04/08に公開
NativeScript
React
Vue.js
fish
M1
tech

NativeScriptのアプリ開発に向けて環境構築をする

目標

  • NativeScriptを使ってJSやTSでアプリ開発をしてみたい。
  • Android StudioなどのドデカIDEはインストールしたくない。

必要なパッケージだけサクッと選定して環境構築をしていこう。

環境

  • Mac OS 12.0.1 Monterey
  • ARM(M1)
  • fish shell
  • node v16.14.0
  • Java 未インストール
  • Android Studio 未インストール

NativeScriptをインストールする

特に捻りもなく、npmでNativeScriptをインストールします。

$ npm i -g nativescript

NativeScriptプロジェクトをつくる

shellを再起動します。

$ exec $SHELL -l

ドキュメント通りにプロジェクトをつくります。

$ ns create myCoolApp

オプションをつけるとAnglularやReact、VueやSvelteでイニシャライズできるようです。

$ ns create myCoolApp --angular    // or --ng for short
$ ns create myCoolApp --vue
$ ns create myCoolApp --vue --ts   // for vue with typescript
$ ns create myCoolApp --react
$ ns create myCoolApp --react --ts // for react with typescript
$ ns create myCoolApp --js
$ ns create myCoolApp --svelte

プロジェクトに入ります。

$ cd myCoolApp

そのまま起動すると怒られる

androidの開発環境を特に用意していない状態で起動を試みると大量の怒られメッセージが発生します。
まあとりあえずやってみましょう。

$ ns run android

なんか色々出てきたんじゃないでしょうか。
ここから動くようにしていきます。

Javaを手に入れる

M1対応のJDKをAzulが配布しているので手に入れてきましょう。
ぼくはJDK18をインストールしました。

インストールまでは気合で頑張ってください。

あとjava.comやoracle.comのJDKは使わないほうがいいっぽいです。

Android SDKの環境を整える

Android StudioをインストールしてGUIをゴニョゴニョすれば環境整備できるっぽいですが、自分は特にJavaやKotlinを書く気もないのでNativeScriptの環境だけ整えられればいいので最小限の構成にしました。
ここでcommand-line-toolsの最新を落としてしてきましょう。

$ sudo mkdir /opt/android-sdk
$ sudo chown [ユーザーネーム]:staff /opt/android-sdk
$ unzip [落としてきたやつ].zip
$ mv cmdline-tools /opt/android-sdk

ちょっと大事な手順

ここで何も考えずに/opt/android-sdk/cmdline-tools/binにパスを通すとなんかめんどくさいことになります。
本当になります。

これをちゃんとやること
/opt/android-sdk/cmdline-tools以下にlatestというフォルダを作り、/opt/android-sdk/cmdline-tools/binをそのlatestの中に移動させます。

どういうことかというとこういうことです。
/opt/android-sdk/cmdline-tools/latest/bin

こうしておけば大丈夫なはず。

Android SDKのパスを通す

ここまでできたらあとは環境変数をセットし、パスを通します。

~/.config/fish/config.fish
# 以下を追記
set -gx ANDROID_HOME /opt/android-sdk

# パスを通す
$ set -U fish_user_paths /opt/android-sdk/cmdline-tools/latest/bin $fish_user_paths

シェルを再起動して、使えるかどうか試します。

$ exec $SHELL -l
$ sdkmanager

使えてそう。 (使えてない人はエラーでググるなどしてください。ごめんなさい。)

sdkmanagerで必要なパッケージを揃えていく

sdkmanagerに引数を渡すと該当するパッケージをダウンロードしてきてくれます。

$ sdkmanager "platform-tools" "build-tools;30.0.2" "emulator" "extras;intel;Hardware_Accelerated_Execution_Manager" "platforms;android-31" "sources;android-31"

30.0.2と書いてあるbuild-toolsのバージョンだけ、あなたが記事を読んでいるときの最新版にすると良いでしょう。

最後にadbコマンドを使えないと怒られるのでplatform-toolsにパス通せば完了です。

$ set -U fish_user_paths /opt/android-sdk/platform-tools $fish_user_paths

/opt/android-sdk/の最終的なディレクトリ構造はこんな感じになる気がします。

NativeScriptに戻り、動作確認

$ tns doctor android #確認用コマンド

大丈夫そうであれば、NativeScriptでイニシャライズしたディレクトリに移動して起動してみましょう！

$ ns run android

お疲れさまでした〜✨

Discussion