RESTfulなAPI設計において覚えておくべきレスポンスコード

ChatGPTさんに教えていただきました

最低限これだけは覚えておこう

正常系

HTTPメソッド	レスポンスコード	説明
GET	200 OK	リクエストが成功し、リソースが正常に取得されました。
POST	201 Created	リクエストが成功し、新しいリソースが作成されました。
PUT	200 OK or 204 No Content	リクエストが成功し、リソースが正常に更新されました。204は更新後のコンテンツが存在しない場合。
DELETE	204 No Content	リクエストが成功し、リソースが正常に削除されました。204は削除後のコンテンツが存在しない場合。

異常系

レスポンスコード	説明
400 Bad Request	リクエストが不正であるか、サーバーが理解できない。クライアントのエラー。
401 Unauthorized	認証が必要で、提供された認証情報が無効。
403 Forbidden	認証は成功したが、アクセスが許可されていない。
404 Not Found	リクエストされたリソースが存在しない。
405 Method Not Allowed	リクエストで指定されたメソッドが許可されていない。
500 Internal Server Error	サーバーでエラーが発生。クライアントが直接対処できない問題。
503 Service Unavailable	サービスが一時的に利用できない。メンテナンスや一時的な過負荷。

初心者向け！WindowsでReactNative入門～アプリ開発編～ 3日目

えにあです。

WindowsでReactNative入門～アプリ開発編～の3日目です。 前回はコードを修正するための前準備として、アプリのエントリポイントの変更を行いました。 今回は実際にアプリを修正していきます。

今回の目標

ニュースの一覧画面を作成する処理を分割して考えると、以下のようになります。

1. News APIからニュースを取得する
2. 取得したニュースの件数分ループを回す
3. ニュースを1件ずつ表示する

今回は1の部分を実装します。

News APIのアカウント作成

まずはNews APIの公式サイトでアカウントを作成します。 newsapi.org

諸々入力して、利用規約に同意してSubmitを押下します。

API Keyが表示されます。この値を後程使います。
マイページからいつでも確認できるので心配ありません。

axiosのインストール

外部のAPIを呼び出す場合、基本的にはhttpsプロトコルを使ってコールします。 今回はHTTPクライアントとしてオープンソースのaxiosを使っていきます。

github.com

yarn add axiosを実行します。

PS D:\Learning\news-app> yarn add axios
yarn add v1.22.11
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ axios@0.22.0
info All dependencies
├─ axios@0.22.0
└─ follow-redirects@1.14.4
Done in 8.87s.

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

ソースコードの修正

App.tsxに以下の行を追加します。

import axios from "axios";
const URL =  "https://newsapi.org/v2/top-headlines?country=jp&category=business&apiKey=168axxxxxxxxxxxxxxxxxxxxxxxxd3f4";
axios.get(URL).then((res) => console.log(res.data));

1行目はaxiosのimportです。インストールしたライブラリを利用する場合はこのようにimportを行う必要があります。 2行目はNewsAPIのURLです。最後のapiKeyの部分はアカウント作成時に割り振られたキーになります。 3行目はAPIのコールです。axios.get(URL)で、NewsAPIをコールしています。そして、返ってきた結果がresに格納されますので、そのresの中身を表示しています。

修正を保存して実行してみましょう。 expoを実行しているターミナルに、以下のようなログが表示されるはずです。

Object {
  "articles": Array [
    Object {
      "author": null,
      "content": null,
      "description": "埼玉県のJR蕨交流変電所で火災が発生しました。この影響とみられる停電で、山手線、京浜東北線、埼京線、常磐線の快速などJR東日本管内の多くの路線で運転を見合わせています。　消防によりますと、10日
午後0時50分すぎ、近所の人などから「変電所で爆発音が聞こえ、火災が発生した」と通報が入りました。「雷のような音がして、...",
      "publishedAt": "2021-10-10T05:26:02Z",
      "source": Object {
        "id": null,
        "name": "YouTube",
      },
      "title": "埼玉県のJR変電所で火災 複数路線で運転見合わせ(2021年10月10日) - ANNnewsCH",
      "url": "https://www.youtube.com/watch?v=6pDVwy4hTAM",
      "urlToImage": "https://i.ytimg.com/vi/6pDVwy4hTAM/hqdefault.jpg",
    },
・・・

NOTE:
ログが表示されない場合はexpoを実行しているターミナルで r を押すとリロードされて正しく表示されることがあります。変更が反映されないなと思ったら、expoやエミュレータを落とし上げしたり、rを押してみたり、色々試してみましょう。

結果を見ると、title、author、urlToImageあたりが画面表示に使えそうだな、とうことが分かります。

APIキーをファイルに外だしする

さて、先ほどのソースではURLの中にAPIキーを直書きしましたが、このような定数は設定ファイルに外だしするのが一般的です。

Expoで定数を利用するにはExpoConstantsを利用します。 docs.expo.dev

ドキュメントにあるようにexpo install expo-constantsでインストールします。

PS D:\Learning\news-app2> expo install expo-constants
Installing 1 SDK 42.0.0 compatible native module using Yarn.
> yarn add expo-constants@~11.0.1
yarn add v1.22.11
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ expo-constants@11.0.1
info All dependencies
└─ expo-constants@11.0.1
Done in 23.13s.

定数はapp.jsonに記載します。app.jsonの最後に以下を追加します。

    "extra": {
      "newsApiKey": "168axxxxxxxxxxxxxxxxxxxxxxxxd3f4"
    }

最後にソースコードから定数をapp.jsonに記載した定数を読み込みます。App.tsxを以下のように修正します。

import Constants from "expo-constants";
import axios from "axios";
const URL = `https://newsapi.org/v2/top-headlines?country=jp&category=business&apiKey=${Constants.manifest?.extra?.newsApiKey}`;
axios.get(URL).then((res) => console.log(res.data));

1行目でインストールしたライブラリをimportしています。 3行目で、Constants.manifest?.extra?.newsApiKeyでapp.jsonに記載したAPIキーを設定しています。extra以降がapp.jsonに追記した内容が設定されます。

さて、これで再度実行してみます。

まとめ

• NewsAPIを使って、Newsデータの一覧を取得する方法を学びました
• 定数をapp.jsonに外だしし、アプリから読み込む方法を学びました

今回はここまで！

初心者向け！WindowsでReactNative入門～アプリ開発編～ 2日目

えにあです。

WindowsでReactNative入門～アプリ開発編～の2日目です。

前回は空のアプリケーションを作成し、エミュレータ上で以下の画面が表示されるようにしました。

今回はプロジェクト構成の理解と、ディレクト構成の変更を行っていきます。

目次

環境

Windows10 HomeEdition
expo 4.11.0
node.js 4.17.6
VSCode
Typescript

プロジェクト構成の理解

expo initでプロジェクトを作成すると、自動的に以下のファイルが生成されます。 このうち、開発者が意識する必要のあるファイル／ディレクトリに番号を振りました。 これらのファイルについて、一つずつ説明していきます。

.
├── .expo
│   ├── README.md
│   ├── packager-info.json
│   └── settings.json
├── .expo-shared
│   └── assets.json
├── .gitignore
├── App.tsx // 1
├── app.json // 2
├── assets  // 3
│   ├── adaptive-icon.png
│   ├── favicon.png
│   ├── icon.png
│   └── splash.png
├── node_modules // 4
│   ├── ....
│   ├── ....
│   └── ....
├── babel.config.js // 5
├── package.json // 6
├── tsconfig.json // 7
└── yarn.lock

1. App.tsx

アプリケーションのエントリーポイントとなるファイルです。前回空のアプリを起動した際、

Open up App.tsx to start working on your app!

という文字列が画面に表示されていました。

App.tsxファイルをVSCodeで開いてみます。以下のように画面に表示されていたものと同じ文字列が記載されていまね。

      <Text>Open up App.tsx to start working on your app!</Text>

試しに、この文字列を以下のように変更してみます。

      <Text>Hello World!</Text>

以下のように、自動的に画面の文字列が更新されたと思います。App.tsxの内容がアプリケーションの内容を決めているということがわかります。

NOTE:
expoを使うメリットの一つとして、このようにソースの修正が自動で反映されるホットリロード機能を備えていることが挙げられます。これにより、開発効率が上がります。うまく更新されない場合はexpoやエミュレータを再起動すると反映されるはずです。

2. app.json

app.jsonの中身は以下のようになっています。スマホにインストールした際に表示されるアイコンやスプラッシュ画面、カメラの仕様許可等のユーザに求めるパーミッションなどの設定を行うファイルです。 この時点ですべてを覚える必要はありません。必要に応じてドキュメントを調べながら設定すればよいでしょう。 　

{
  "expo": {
    "name": "news-app",
    "slug": "news-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

NOTE: スプラッシュ画面
ソフトウェアを起動した際に表示されることのある画面のことです。 スプラッシュ画面は、プログラムの立ち上げ中に表示され、立ち上げが完了した時点でメイン画面に切り替わります。

3. assetsディレクトリ

アプリケーションのアイコンや、スプラッシュ画面用の画像を格納します。ちなみにデフォルトのアイコンは以下のようになっています。さすがにこれでは寂しいので、アイコンを作成する必要があります。

4. node_modules

ReactNativeの開発では、すべての機能を自分で作るのではなく、世の中にある便利なライブラリを再利用して開発を進めていきます。node_modulesディレクトリには、プロジェクトで利用しているライブラリ群が格納されます。expoが自動で標準的なライブラリをインストールしているため、既に大量のディレクトリが存在するはずです。プロジェクトに新たなライブラリを追加した場合にはディレクトリが増えていきます。

5. babel.config.js

babelというトランスパイラ用の設定ファイルです。トランスパイラは、あるプログラミング言語で書かれたプログラムのソースコードを入力として受け取り、別のプログラミング言語の同等のコードを目的コードとして生成する、ある種のコンパイラのことです。
ReactNativeの記法(TSX)をJavascriptに変換するために使用します。この後の手順で実際にこのファイルを変更します。

6. package.json

package.jsonの中身は以下のようになっています。 dependencies／devDependenciesにプロジェクトで使っているライブラリ群のバージョン情報が記載されています。devDependenciesは開発時にしか使わないライブラリが、dependendiesには本番・開発の両方で使ライブラリが記載されています。 例えば、react-nativeはアプリケーションを実行するために必須なためdependenciesに記載されていますが、babelはトランスパイルのためにしか使わないため、devDependendiesの方に記載されています。

scriptsはコマンドのエイリアス（別名）です。今までexpo startと実行していたものを"start"コマンドに割り当てています。ここに記載したコマンドはyarn run コマンド名で実行できます。 expo startならyarn run startで実行できるということです。この例だとexpo startの方が短いので効果が感じられませんが、オプションのパラメータが増えた場合や複数のコマンドを連続で実行したい場合など、別名を付けておくと簡単に実行できるようになります。

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~42.0.1",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "typescript": "~4.0.0"
  },
  "private": true
}

7. tsconfig.json

typescriptの型チェックのための設定ファイルです。

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true
  }
}

以上、空のプロジェクトを作成した際に自動で作られたファイル／ディレクトリを見てきました。

ソースコードのディレクトリを変更する

デフォルトで作られた構成のままだと、App.tsxがプロジェクトルートに置かれています。 今後追加するソースコードもプロジェクトルートに置かれるため、ソースコードの量が少ないうちは良いのですが、ファイル数が多くなってくると見通しが悪くなります。 もちろん、ディレクトリを分けて整理することは可能ですが、一般的にディレクトリは名前順で表示されますので、ソースコードと、ソースコード以外のディレクトリが混在して整列されることになります。
そこで、ソースコードはsrcディレクトリの下にまとめるように設定を変更していきます。

package.jsonの変更

mainフィールドを以下のように修正します。これにより、読み込みの起点がsrcディレクトリの下のApp.tsxに変更されます。

  "main": "src/App.tsx",

ソースコードの移動と修正

App.tsxをsrcディレクトリの下に移動します。

├── src
│   └── App.tsx

そして、App.tsxの中身を以下のように修正します。修正箇所は★の3行です。

import { registerRootComponent } from "expo"; // ★追加
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";

function App() { // ★修正
  return (
    <View style={styles.container}>
      <Text>Hello World!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

export default registerRootComponent(App); // ★追加

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

さて、この状態で再度アプリケーションを起動してみます。expoとemulatorを止めて起動しなおしてみましょう。問題なく表示されますね。

まとめ

• 空のプロジェクトの構成を確認しました。
• 空のプロジェクトではApp.tsxがエントリポイントになっていました
• エントリポイントの位置を変更する方法を学びました

今回はここまで！

初心者向け！WindowsでReactNative入門～アプリ開発編～ 1日目

えにあです。

WindowsでReactNative入門～アプリ開発編～の1日目です。

この記事は和田さんのUdemyの講座を参考にしています。
www.udemy.com

講座は非常にわかりやすい内容で、特にReact経験者であればすぐに理解できると思います。 しかしながら、現在のバージョンとの環境差異であったり、MacとWindowsの違いであったり、コーディングスタイルの好みの違いがあったので、自分なりにアレンジにした開発の過程を記録していきます。

目次

出来上がりイメージ

こんな感じのアプリを作ります。

環境

Windows10 HomeEdition
expo 4.11.0
node.js 4.17.6
VSCode
Typescript

Androidアプリだけが対象です。iosは対象外です。

プロジェクト作成

では早速始めていきましょう。
作業ディレクトリはどこでも構いません。私はD:Learningの下で作業をしています。

Windows PowerShellを起動して、expo init news-appと入力します。 選択肢が表示されるので、blank (Typescript)を選択します。

PS D:\Learning> expo init news-app
? Choose a template: » - Use arrow-keys. Return to submit.
    ----- Managed workflow -----
    blank               a minimal app as clean as an empty canvas
>   blank (TypeScript)  same as blank but with TypeScript configuration
    tabs (TypeScript)   several example screens and tabs using react-navigation and TypeScript
    ----- Bare workflow -----
    minimal             bare and minimal, just the essentials to get you started

自動的に必要なライブラリのインストールなどが始まります。 1分ほどで完了し、以下の内容が表示されます。

√ Choose a template: » blank (TypeScript)  same as blank but with TypeScript configuration
  Downloading and extracting project files.
🧶 Using Yarn to install packages.  Pass --npm to use npm instead.
  Installing JavaScript dependencies.

✅ Your project is ready!

To run your project, navigate to the directory and run one of the following yarn commands.

- cd news-app2
- yarn start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- yarn android
- yarn ios # requires an iOS device or macOS for access to an iOS simulator
- yarn web

これで、空のプロジェクトが作成されました。

ここでは選択肢の違いを詳しくは説明しませんが、javascriptを使う場合はblank、Typescriptを使う場合はblank(Typescript)を選択します。
規模の小さいプログラムであればjavascriptでもよいですが、中規模以降になるとTypescriptで型付けを行った方がメンテナンスしやすいと私は考えておりますので、Typescriptを採用します。

エミュレータで起動してみる

さて、作成した空のプロジェクトは中身のないアプリですが、それでも立派なアプリです。つまり起動することができます。早速Androidエミュレータ上でこのアプリを起動してみましょう。

まずAndroidエミュレータを起動しましょう。 環境構築編でエミュレータの設定は完了していますね。 前回はAndroid Studioからエミュレータを起動しましたが、今回はコマンドで起動してみましょう。

まず、エミュレータの名前を調べるためにemulator -list-avdsを実行します。このコマンドは、今までに作成したエミュレータの一覧を表示するコマンドです。

PS D:\Learning> emulator -list-avds                            
Pixel_5_API_30

ここで、環境構築編で作成したエミュレータが表示されるはずです。私の場合はPixel5で作成したので上記のように出力されました。

エミュレータの名前がわかったのでこのエミュレータをemulator -avd エミュレータ名で起動します。

PS D:\Learning> emulator -avd Pixel_5_API_30
emulator: Android emulator version 30.8.4.0 (build_id 7600983) (CL:N/A)
handleCpuAcceleration: feature check for hvf
added library vulkan-1.dll
Failed to open /qemu.conf, err: 2
Windows Hypervisor Platform accelerator is operational
emulator: INFO: GrpcServices.cpp:315: Started GRPC server at 127.0.0.1:8554, security: Local
emulator: INFO: EmulatorAdvertisement.cpp:93: Advertising in: C:\Users\heart\AppData\Local\Temp\avd\running\pid_8144.ini
emulator: ERROR: AdbHostServer.cpp:102: Unable to connect to adb daemon on port: 5037
Your emulator is out of date, please update by launching Android Studio:
 - Start Android Studio
 - Select menu "Tools > Android > SDK Manager"
 - Click "SDK Tools" tab
 - Check "Android Emulator" checkbox
 - Click "OK"

エミュレータが起動すればOKです。

次に、作成したプロジェクトディレクトリに移動しexpo startを実行します。

PS D:\Learning> cd news-app
PS D:\Learning\news-app> expo start 

すると、ブラウザが起動し、以下の画面が表示されるので、Run on Android device/emulatorをクリックします。

このような画面が表示されれば成功です！

おわりに

今回は空のプロジェクトを作成し、エミュレータで空のアプリを起動させました。
次回は独自のアプリを作り始めていきます。
今回はここまで！

Something went wrongと表示された場合

私の場合、以下のようなエラー画面が表示されてしまいました。
この解決方法でめちゃくちゃはまりました。
色々原因があるのですが、私の場合ググっても出てこない原因でした。

Network response timed outと表示されていますが、どうやらエミュレータ側から、expoの待ち受けポートである19000に接続できていないようです。

対策① ネットワークプロファイルをプライベートにする

ネットワークプロファイルは以下のようにプライベートを選択してください。

対策② ポート重複を解消する

対策①で解決しない場合、expoの待ち受けポートである19000番を別のプロセスが使用している可能性があります。

netstat -aon | find '"19000"'を実行し、19000番ポートを使用ているプロセスを調べます。
1228と5808の二つプロセスが19000でLISTENしていることがわかります。

PS D:\Learning> netstat  -aon  | find '"19000"'
  TCP         0.0.0.0:19000          0.0.0.0:0              LISTENING       5808
  TCP         0.0.0.0:19000          0.0.0.0:0              LISTENING       1228
  TCP         [::]:19000             [::]:0                 LISTENING       1228

PIDからプロセスを調べます。node.exeがexpo startで起動したプロセスです。
windowsが起動しているsvchostとポートが重複しているようです。

PS D:\Learning\news-app> tasklist | findstr "1228 5808"   
svchost.exe                   5808 Services                   0      9,608 K
node.exe                      1228 Console                    1    107,260 K

その場合は、expo start --port 空きポート番号で、ポート重複を回避します。

expo start --port 19010

対策③ tunnelを使う

LANをtunnelに変更すると、とりあえず動くかもしれません。

初心者向け！WindowsでReactNative入門～環境構築編～ ③Expoのインストール

えにあです。
WindowsでReactNative入門～環境構築編～の3日目です。
本日はExpoはReactNativeでの開発をより便利にしてくれるツールであるExpoをインストールしていきます。

目次

Expo-cliのインストール

PowerShellを管理者権限で起動し、yarn global add expo-cliを実行します。

PS C:\Windows\system32> yarn global add expo-cli
yarn global v1.22.11
[1/4] Resolving packages...
～中略～
[4/4] Building fresh packages...
success Installed "expo-cli@4.11.0" with binaries:
      - expo
      - expo-cli
Done in 158.50s.

環境変数の追加

コマンドラインでexpoコマンドを実行できるように、環境変数を追加します。
まずはexpoコマンドの格納場所を確認します。

PS C:\Windows\system32> yarn global bin
C:\Users\xxxxx\AppData\Local\Yarn\bin  ★xxxxxの部分はユーザごとに異なります。

ここで確認したパスをユーザ環境変数pathに追加します。

Powershellを管理者権限で開きなおします。 expoコマンドが実行できることを確認しましょう。

PS C:\Windows\system32> expo --version
4.11.0

expoのアカウントを作る

expo.dev

の左上から作れます。

expo-cliへのログイン

expo loginコマンドを使ってcliへログインします。

PS C:\Windows\system32> expo login
√ Username/Email Address: ... xxxx.xxxx@xxxx.xxxx
√ Password: ... **********

Success. You are now logged in as enia_c.
PS C:\Windows\system32>

今回はReactNativeの開発をより便利にするツールであるExpoをインストールしました。 今回はここまで！

初心者向け！WindowsでReactNative入門～環境構築編～ ②Android Studioのインストール

えにあです。
WindowsでReactNative入門～環境構築編～の2日目です。
Androidアプリ開発用にAndroid Studioをインストールしていきます。

目次

インストーラーのダウンロード

下記の公式ページにアクセスします。
developer.android.com

垢枠のエリアをクリックします。

利用規約が表示されるので、最下部に移動して、利用規約に同意します。 赤枠のDownloadボタンを押下するとダウンロードが始まります。（size:912MB)

Android Studioのインストール

ダウンロードしたインストーラを実行します。 セットアップウィザードが起動したらNextを押します。

インストールするコンポーネントを選択します。デフォルトのままNextを押します。

インストールディレクトリを設定してNextを押します。デフォルトのディレクトリでよいでしょう。

スタートメニューへの登録設定を行います。デフォルトのままInstallボタンを押します。

インストールが始まります。

完了したらNextを押下します。

Finishを押下します。

自動的に次の画面が起動します。

Do not import settingsを選択してOKをクリックします。

GoogleがAndroid Stuidoを改善するために、どのように使っているか情報をGoogleに送信しても良いか？と聞かれているようです。「Don't send」を選択しても問題なく使えるので、こちらを選択しました。

「Next」を選択します。

「Standard」にチェックを入れてNextを押します。

UIのテーマです。好きな方を選択してNextを押します。 私は夜電気を暗めにして作業するので、目が痛くならないようにダークモードを選びました。

「Finish」を押します。

初期化が完了するまで3～4分待ちましょう。

おっと、私の環境ではエラーが発生してしまいました。 とりあえずFinishしか押せないので押します。

とりあえず起動はできるはずです。 ここまででインストールは完了です。

Android Studioの設定

SDKの設定をしていきます。 メニューからCustomizeを選択し、表示された画面でAllSettingsを選択します。

Android SDK Build-Tools（赤枠）がinstalledになっていることを確認します。

Android SDK Locationをコピーしておきましょう。
最後に環境変数の設定をする際に利用します。

エミュレータの設定

メイン画面に戻り、[Projects] -> [More Actions] -> [AMD Manager] を選択します。

[create virtual device]をクリックします。

エミュレートするハードウェアのタイプを選択します。プロダクトを開発するときには様々な機器でテストする必要がありますが、今回は入門編なので[Pixel 5]を使うことにします。

エミュレータにロードするOSバージョンを選択します。ここでは最新のAndroid11を選択します。

利用規約に同意して[Next]を選択します。

OSのダウンロードが始まります。

完了すると[Next]が押せるようになったはずです。

[Finish]を押下します。

デバイス一覧にPixel5が表示されているはずです。[▲]を押してみましょう。

エミュレータが起動するはずです。真っ暗な場合はしばらく待ってみましょう。 5分程度待つと、真っ暗 => Googleのロゴ => 以下の画面　という順番で表示されると思います。

環境変数の設定

途中でコピーしたAndroid SDK Locationのパスをユーザ環境変数ANDROID_SDKに設定します。

ユーザ環境変Pathに以下二つを登録します。

%ANDROID_SDK%\emulator
%ANDROID_SDK%\platform-tools

以上でAndroid Studioのインストールは完了です！ 今回はここまで！

初心者向け！WindowsでReactNative入門～環境構築編～ ①Node.jsインストール

えにあです。 今回からWindowsでReactNative入門～環境構築編～をスタートしていきます。
ReactでもReactNativeでも、まずはNode.jsが必要ですのでインストールしていきます。

目次

前回まで

経緯についてはこちら。
enia.hatenablog.com

Node.jsのインストーラをダウンロードする

まずは以下の公式ページにアクセスしてNode.jsのインストーラをダウンロードしていきます。 nodejs.org

赤い枠の位置をクリックするとダウンロードが始まります。(サイズ29.1MB)

Node.jsをインストールする

ダウンロードが完了したらインストーラを実行します。
セットアップウィザードが起動したら、Nextを押します。

利用規約に同意して、Nextを押します。

インストールディレクトリを指定してNextを押します。デフォルトのディレクトリでよいでしょう。

カスタムセットアップの設定です。デフォルトのままNextを押します。

PythonやVisualStudio Build Toolsなどを一緒にインストールするか聞かれています。
チェックをいれてNextを押します。
任意項目ですので不要であればチェックしなくても構いません。

Installを押します。

インストールが始まります。30秒くらいで完了します。

インストールが完了しました。Finishを押します。

関連パッケージをインストールする（任意）

途中でPythonやVisual Studio Build Toolsをインストールする設定をいれた場合、以下のコマンドプロンプトが起動します。続行するために何かキーを押します。

画面が切り替わります。

PowerShellが起動してインストールが始まります。私の環境では15分ほどかかりました。インストールが完了したEnterキーを入力します。

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

インストールの正常性確認

nodeコマンドとnpmコマンドが使えるようになっているはずです。
Power Shellを起動してnode --version npm --versionを実行します。バージョン名が表示されれば正常にインストールされています。

PS C:\Windows\system32> node --version
v14.17.6
PS C:\Windows\system32> npm --version
6.14.15

追加インストールを行った場合はpythonもインストールされています。python --versionを実行して、pthonがインストールされていることを確認します。

PS C:\Windows\system32> python --version
Python 3.9.7
PS C:\Windows\system32>

Yarnのインストール

Yarnとは、主にJavaScriptで開発されたプログラム部品（モジュール）を管理するためのパッケージ管理システムの一つで、npmと互換性があります。

npmに比べ実行速度が高速です。パッケージの導入時に依存先のパッケージのバージョン番号を記録（yarn.lockファイル）するため、環境の再構築や他のコンピュータでの環境構築において正確に同じバージョンのパッケージを導入することができます。npmで許可されていたパッケージ導入時のコード実行が禁止され、パッケージの整合性をチェックサムで検証するなどセキュリティにも配慮しています。

2016年に米SNS大手フェイスブック（Facebook）社が自社環境でのパッケージ管理のために開発し、BSDライセンスに基づいてオープンソースソフトウェアとして公開しました。

yarnのインストール手順は下記の公式サイトに記載されています。 classic.yarnpkg.com

PowerShellを管理者権限で起動してnpm install --global yarnコマンドでインストールします。

PS C:\Windows\system32> npm install --global yarn

> yarn@1.22.11 preinstall C:\Users\xxxxx\AppData\Roaming\npm\node_modules\yarn
> :; (node ./preinstall.js > /dev/null 2>&1 || true)

C:\Users\xxxxx\AppData\Roaming\npm\yarn -> C:\Users\xxxxx\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
C:\Users\xxxxx\AppData\Roaming\npm\yarnpkg -> C:\Users\xxxxx\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js
+ yarn@1.22.11
added 1 package in 3.182s

yarnコマンドが利用可能になっていることをyarn --versionで確認します。

PS C:\Windows\system32> yarn --version
1.22.11

以上でyarnのインストールは完了です。

今回はここまで！ 次回はAndroid Studioをインストールしていきます。