自作パソコンの開発環境を整える
2021-01-09
Getting started with Gatsby and React Native on Windows
自作パソコンでJavaScriptの開発環境を作る
これまでアプリ開発(React Native)やこのブログの更新(GatsbyJS)は、MacBook Air2020か、サブの自作パソコン(Core i7 6700K)で行っていました。メインの自作パソコンは深夜アニメの録画とエンコードに使っているので安定性を重視していたためです。なるべく他のツールを入れたくなかったのです。Gatsbyでブログ書いたり、コード書くくらいだったらMacBook Airのトラックパッドとキーボードでも十分だったという理由もあります。
ただ、React Nativeで作りたいアプリを思いついたのでマウスとキーボードが快適に使える自作パソコンでも開発できるように環境を作ることにしました。ついでにGatsbyも入れてブログの更新もできるようにします。
やること
- VSCodeのインストール
- VSCodeとGithub連携
- Nodeを入れる
- GatsbyJSのセットアップ
- デプロイできるようにする(Firebase Hosting)
- React Native(Expo)をセットアップ
VisualStudioCodeのセットアップ
VSCodeのインストール
まずはVSCodeを入れます。
インストーラー版をダウンロードしてインストールします。
実は簡単なテキスト編集にzip版を使っており、日本語化とMDXのエクステンションを入れていたので、インストールしたら最初から日本語化されていました。
Githubにサインインする
Gitをインストールします。
VSCodeを起動したら左下のアカウントアイコンをクリックします。サインインして設定を同期するをクリックします。
GitHubでサインインを選択します。
ブラウザが起動してGithubの認証を求められるのでContinueをクリックします。
認証が完了するとダイアログが出るのでVisual Studio Codeを開くをクリックします。
VSCodeに戻るので開くをクリックします。
GitHubにログインできました。これでVSCodeのセットアップは完了です。
Node.jsのセットアップ
nodeのインストール
nodeのLTS版をダウンロードしてインストールします。
ターミナルからインストールできてるか確認します。
VSCodeを起動してターミナルを開きます。メニューバーの表示からも開けますが、ショートカットCtrl + @のほうが便利です。
node -vnpm -vバージョン番号が表示されたらOKです。
yarnのインストール
パッケージ管理のためyarnをインストールします。
npm install -g yarn完了したらインストールできてるか確認します。
yarn -vこのようにエラーが表示される場合があります。
スタートボタンを右クリックしてPowerShellを管理者として起動します。
PowerShellに次のコマンドを打ちます。
Set-ExecutionPolicy RemoteSigned実行ポリシーの変更について聞かれるのでyで許可します。
VSCodeに戻り改めてyarnがインストールができてるか確認します。
yarn -v
yarnのバージョンが表示されたのでこれでnodeの設定は完了です。
GatsbyJSのセットアップ
GatsbyJSのインストール
npm install --global gatsby-cliインストールが完了したことを確認するためバージョンを表示してみます。
GatsbyJSのインストールはこれで完了です。
Firebaseのセットアップ
このサイトはFirebase Hostingを利用しているのでデプロイできるようにします。
Firebase-toolsのインストール
npm install --global firebase-tools確認のためバージョンをチェックします。
firebase --version
Firebaseにログイン
firebase loginAllow Firebase to collect CLI usage and error reporting information?はyでもnでもどちらでもOKです。
Windowsからセキュリティメッセージが出るのでアクセスを許可します。
ブラウザが起動するのでログインするアカウントを選択します。
アクセスを許可します。
ブラウザとターミナルにログイン成功のメッセージが表示されます。
React Native(Expo)のセットアップ
Expoのインストール
npm install -g expo-cliインストール確認のためバージョンを表示します。
expo --versionバージョン番号が表示されたらOKです。
プロダクションビルドできるようにExpoにログインしておきます。
expo signinExpoのアカウント情報(メールアドレス/パスワード)を入力してログインを完了します。
動作確認
インストールは上記のコマンドだけで完了しますが念のため実際に動かしてみて確認します。
使いたいボイラープレートがあるのでダウンロードして解凍します。動作確認だけなのでGit Cloneは行いません。
WataruMaeda/react-native-boilerplate
解凍したフォルダ内でVSCodeを起動します。
依存関係をインストールします。
yarn install
実際に起動してみます。
expo startブラウザが起動します。普段からエミュレーターではなく実機を使っているので、Expoアプリがインストールされていて同一のLAN内にあるiPhone/Androidで左下のQRコードを読み込みます。
スマホで読み込むとビルドが開始されます。
ビルドが完了すると作成中のアプリが起動します。
無事、立ち上がりました。Expoの設定は完了です。
Gatsbyのビルドとデプロイ
実際にビルドしてデプロイする
ここまでの手順をブログ記事に書いていたので、実際にビルドしてデプロイしてみます。
gatsby buildビルドに成功しました。
デプロイします。
firebase deploy無事、デプロイに成功しました。
実際にページを開いてみて確認します。
無事に更新されていました。
Githubにプッシュ
複数のパソコンでブログを更新しているので同期できるようにリポジトリにプッシュします。
Gitの初期設定をしていなかったので設定します。
git config --global user.name 'kiyohken2000'
git config --global user.email 'xxxxxxxxxx@gmail.com'変更をコミットしてプッシュします。
設定完了
これで自作パソコンでGatsbyJSとReact Nativeの開発ができるようになりました。
React Nativeを書くのは半年以上ぶりなのでまだ慣れませんが、快適な環境になったので捗ると良いと思っています。完成したらApp Store、Google Playで公開するのはもちろんですが、React Native for Webも試してみる予定です。
以上です。