LoginSignup
0
0

Webアプリ開発環境作ってみた(1) - React Native(1)

Posted at

書籍が届く

前回、検討する手法を決めて、まずは書籍をということで何冊か注文。最初に届いたのがReact Nativeでした。なので、まず手始めにこれから読んでみようということに。

1章でReact/React Nativeの開発背景、2章でTypeScriptの基礎が。それぞれなんとなく読み進め。
3章が開発環境の構築。さて、実際にやってみるかと思ったら。なんと対象はmacOS。いきなりハードルが。
あわててWebを検索。そしたら以下の記事に出会いました。
React Native の開発環境を整える(React Native開発実践~第0回)

これぞ神のお導き!?まずはこの記事を参考に作業することに。大変参考になりました。ありがとうございます。

Chocolatey

まず1つ目である、Chocolateyをセットアップ。

これまでWindowsでのアプリケーションインストールはほとんど.msiインストーラーとかしか使ったことのないわたし。Chocolateyは実際にセットアップしても、スタートメニューとか何の変化も見られず、ほんとにうまくいってるのかな?とか不安になったり。よく読むと、GUIの部分はChocolatey自体でセットアップするようになっていて。やってみたらGUIのショートカットがスタートメニューにも追加された。これはどこから持ってきてるんだろう、とかいろいろ気になりながら作業実施。でも、後続の作業になるにつれて、なんて便利なんだと。「パッケージマネージャー」という言葉がやっと頭に入ってきた。

この辺の実際の作業ログを乗せようと思ったら、ない!やっぱりなんだかわからない中で作業していたので、いろいろ抜け落ちているようだ。

NVM/node.js

続いて2つ目のNVM/node.js。サンプルコードの最初でいきなりうまくいかない。

D:\>nvm list available

Could not retrieve https://nodejs.org/dist/index.json.


Get "https://nodejs.org/dist/index.json": dial tcp: lookup nodejs.org: no such host
D:\>

どこから探りを入れようか悩み、とりあえずnvmのヘルプが出ないかなと。で次のように入力。

D:\>nvm ?

Running version 1.1.11.

Usage:

  nvm arch                     : Show if node is running in 32 or 64 bit mode.
  nvm current                  : Display active version.
  nvm debug                    : Check the NVM4W process for known problems (troubleshooter).
  nvm install <version> [arch] : The version can be a specific version, "latest" for the latest current version, or "lts" for the
                                 most recent LTS version. Optionally specify whether to install the 32 or 64 bit version (defaults
                                 to system arch). Set [arch] to "all" to install 32 AND 64 bit versions.
                                 Add --insecure to the end of this command to bypass SSL validation of the remote download server.
  nvm list [available]         : List the node.js installations. Type "available" at the end to see what can be installed. Aliased as ls.
  nvm on                       : Enable node.js version management.
  nvm off                      : Disable node.js version management.
  nvm proxy [url]              : Set a proxy to use for downloads. Leave [url] blank to see the current proxy.
                                 Set [url] to "none" to remove the proxy.
  nvm node_mirror [url]        : Set the node mirror. Defaults to https://nodejs.org/dist/. Leave [url] blank to use default url.
  nvm npm_mirror [url]         : Set the npm mirror. Defaults to https://github.com/npm/cli/archive/. Leave [url] blank to default url.
  nvm uninstall <version>      : The version must be a specific version.
  nvm use [version] [arch]     : Switch to use the specified version. Optionally use "latest", "lts", or "newest".
                                 "newest" is the latest installed version. Optionally specify 32/64bit architecture.
                                 nvm use <arch> will continue using the selected version, but switch to 32/64 bit mode.
  nvm root [path]              : Set the directory where nvm should store different versions of node.js.
                                 If <path> is not set, the current root will be displayed.
  nvm [--]version              : Displays the current running version of nvm for Windows. Aliased as v.


D:\>

多くのコマンドは ?, -h, --help あたりでヘルプが出てくる。出力された内容を見て、どうやらプロキシの設定が必要なのではないかと。会社のPCなので、当然プロキシサーバーを挟んでWebアクセスしているからね。
で、あらためてプロキシの指定をしながら実行してみることに。

D:\nvm proxy http://XXX.XXX.XXX.XXX:XXXX list available

D:\>

何にも出ない。もう一度list availableだけやってみる。

D:\>nvm  list available

|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|    21.1.0    |    20.9.0    |   0.12.18    |   0.11.16    |
|    21.0.0    |   18.18.2    |   0.12.17    |   0.11.15    |
|    20.8.1    |   18.18.1    |   0.12.16    |   0.11.14    |
|    20.8.0    |   18.18.0    |   0.12.15    |   0.11.13    |
|    20.7.0    |   18.17.1    |   0.12.14    |   0.11.12    |
|    20.6.1    |   18.17.0    |   0.12.13    |   0.11.11    |
|    20.6.0    |   18.16.1    |   0.12.12    |   0.11.10    |
|    20.5.1    |   18.16.0    |   0.12.11    |    0.11.9    |
|    20.5.0    |   18.15.0    |   0.12.10    |    0.11.8    |
|    20.4.0    |   18.14.2    |    0.12.9    |    0.11.7    |
|    20.3.1    |   18.14.1    |    0.12.8    |    0.11.6    |
|    20.3.0    |   18.14.0    |    0.12.7    |    0.11.5    |
|    20.2.0    |   18.13.0    |    0.12.6    |    0.11.4    |
|    20.1.0    |   18.12.1    |    0.12.5    |    0.11.3    |
|    20.0.0    |   18.12.0    |    0.12.4    |    0.11.2    |
|    19.9.0    |   16.20.2    |    0.12.3    |    0.11.1    |
|    19.8.1    |   16.20.1    |    0.12.2    |    0.11.0    |
|    19.8.0    |   16.20.0    |    0.12.1    |    0.9.12    |
|    19.7.0    |   16.19.1    |    0.12.0    |    0.9.11    |
|    19.6.1    |   16.19.0    |   0.10.48    |    0.9.10    |

This is a partial list. For a complete list, visit https://nodejs.org/en/download/releases

D:\>

今度はうまく取れた。proxyとlist availableの指定は同時にできないのね。
ようやくインストールに。参考にさせていただいたサンプルでは、バージョン指定が10.14.2となっていたが、今回は最新の21.1.0を指定。ずいぶん進んでる。。。

D:\>nvm install 21.1.0
Downloading node.js version 21.1.0 (64-bit)...
Extracting node and npm...
Complete
npm v10.2.0 installed successfully.


Installation complete. If you want to use this version, type

nvm use 21.1.0

D:\>node --version
'node' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

D:\>nvm use 21.1.0
Now using node v21.1.0 (64-bit)

D:\>node --version
v21.1.0

D:\>

ようやくうまくいったこともあり、nvm useをすっ飛ばして先に進んでしまったり。それでもここまでやってきました。

yarn

ここまで行くと、yarnはすぐにインストール成功。いつもこうだといいけどね。。。

D:\>choco install yarn -y
Chocolatey v2.2.2
Installing the following packages:
yarn
By installing, you accept licenses for the packages.
Progress: Downloading yarn 1.22.19... 100%

yarn v1.22.19 [Approved]
yarn package files install completed. Performing other installation steps.
Using system proxy server '10.1.253.9:8080'.
Downloading yarn
  from 'https://yarnpkg.com/downloads/1.22.19/yarn-1.22.19.msi'
Using system proxy server '10.1.253.9:8080'.
Progress: 100% - Completed download of C:\Users\XXXX\AppData\Local\Temp\chocolatey\yarn\1.22.19\yarn-1.22.19.msi (1.6 MB).
Download of yarn-1.22.19.msi (1.6 MB) completed.
Hashes match.
Installing yarn...
yarn has been installed.
#< CLIXML
<Objs Version="1.1.0.1" xmlns="http://schemas.microsoft.com/powershell/2004/04"><Obj S="progress" RefId="0"><TN RefId="0"><T>System.Management.Automation.PSCustomObject</T><T>System.Object</T></TN><MS><I64 N="SourceId">1</I64><PR N="Record"><AV>モジュールを初めて使用するための準備しています。</AV><AI>0</AI><Nil /><PI>-1</PI><PC>-1</PC><T>Completed</T><SR>-1</SR><SD> </SD></PR></MS></Obj><Obj S="progress" RefId="1"><TNRef RefId="0" /><MS><I64 N="SourceId">1</I64><PR N="Record"><AV>モジュールを初めて使用するための準備しています。</AV><AI>0</AI><Nil /><PI>-1</PI><PC>-1</PC><T>Completed</T><SR>-1</SR><SD> </SD></PR></MS></Obj><S S="debug">Host version is 5.1.19041.2364, PowerShell Version is '5.1.19041.2364' and CLR Version is '4.0.30319.42000'.</S><S S="verbose">関数 'Format-FileSize' をエクスポートしています。</S><S S="verbose">関数 'Get-ChecksumValid' をエクスポートしています。</S><S S="verbose">関数 'Get-ChocolateyConfigValue' をエクスポートして います。</S><S S="verbose">関数 'Get-ChocolateyPath' をエクスポートしています。</S><S S="verbose">関数 'Get-ChocolateyUnzip' をエクスポートしています。</S><S S="verbose">関数 'Get-ChocolateyWebFile' をエクスポートしています。</S><S S="verbose">関数 'Get-EnvironmentVariable' をエクスポートしています。</S><S S="verbose">関数 'Get-EnvironmentVariableNames' をエクスポートしています。</S><S S="verbose">関数 'Get-FtpFile' をエクスポートしています。</S><S S="verbose">関数 'Get-OSArchitectureWidth' をエクスポートしています。</S><S S="verbose">関数 'Get-PackageParameters' をエクスポートしています。</S><S S="verbose">関数 'Get-PackageParametersBuiltIn' をエクスポートしています。</S><S S="verbose">関数 'Get-ToolsLocation' をエクスポートしています。</S><S S="verbose">関数 'Get-UACEnabled' をエクスポートしています。</S><S S="verbose">関数 'Get-UninstallRegistryKey' をエクスポートしています。</S><S S="verbose">関数 'Get-VirusCheckValid' をエクスポートしていま す。</S><S S="verbose">関数 'Get-WebFile' をエクスポートしています。</S><S S="verbose">関数 'Get-WebFileName' をエクスポートしています。</S><S S="verbose">関数 'Get-WebHeaders' をエクスポートしています。</S><S S="verbose">関数 'Install-BinFile' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyEnvironmentVariable' をエクスポートしています 。</S><S S="verbose">関数 'Install-ChocolateyExplorerMenuItem' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyFileAssociation' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyInstallPackage' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyPackage' をエクスポートしています。</S><S S="verbose">関 数 'Install-ChocolateyPath' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyPinnedTaskBarItem' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyPowershellCommand' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyShortcut' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyVsixPackage' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyZipPackage' をエクスポートしています。</S><S S="verbose">関数 'Install-Vsix' をエクスポートしています。</S><S S="verbose">関数 'Set-EnvironmentVariable' をエクスポー トしています。</S><S S="verbose">関数 'Set-PowerShellExitCode' をエクスポートしています。</S><S S="verbose">関数 'Start-ChocolateyProcessAsAdmin' をエクスポートしています。</S><S S="verbose">関数 'Test-ProcessAdminRights' をエクスポートしています。</S><S S="verbose">関数 'Uninstall-BinFile' をエクスポートしています。</S><S S="verbose">関数 'Uninstall-ChocolateyEnvironmentVariable' をエクスポートしています。</S><S S="verbose">関数 'Uninstall-ChocolateyPackage' をエクスポートしています。</S><S S="verbose">関数 'Uninstall-ChocolateyZipPackage' をエクスポートしています。</S><S S="verbose">関数 'Update-SessionEnvironment' をエクスポートしています。</S><S S="verbose">関数 'Write-FunctionCallLogMessage' をエクスポートしています。</S><S S="verbose">エイリアス 'Get-ProcessorBits' をエクスポートしています。</S><S S="verbose">エイリアス 'Get-OSBitness' をエクスポートしています。</S><S S="verbose">エイリアス 'Get-InstallRegistryKey' をエクスポートしています 。</S><S S="verbose">エイリアス 'Generate-BinFile' をエクスポートしています。</S><S S="verbose">エイリアス 'Add-BinFile' をエクスポートしています。</S><S S="verbose">エイリアス 'Start-ChocolateyProcess' をエクスポートしています。</S><S S="verbose">エイリアス 'Invoke-ChocolateyProcess' をエクスポートしています。</S><S S="verbose">エイリアス 'Remove-BinFile'  をエクスポートしています。</S><S S="verbose">エイリアス 'refreshenv' をエクスポートしています。</S><S S="debug">Loading community extensions</S><S S="debug">Importing 'C:\ProgramData\chocolatey\extensions\chocolatey-compatibility\chocolatey-compatibility.psm1'</S><S S="verbose">パス 'C:\ProgramData\chocolatey\extensions\chocolatey-compatibility\chocolatey-compatibility.psm1' からモジュールを読み込んでいます。</S><S S="debug">Function 'Get-PackageParameters' exists, ignoring export.</S><S S="debug">Function 'Get-UninstallRegistryKey' exists, ignoring export.</S><S S="debug">Exporting function 'Install-ChocolateyDesktopLink' for backwards compatibility</S><S S="verbose">関数 'Install-ChocolateyDesktopLink' をエクスポートしています。</S><S S="debug">Exporting function 'Write-ChocolateyFailure' for backwards compatibility</S><S S="verbose">関数 'Write-ChocolateyFailure' をエクスポートしています。</S><S S="debug">Exporting function 'Write-ChocolateySuccess' for backwards compatibility</S><S S="verbose">関数 'Write-ChocolateySuccess' をエクスポートしています。</S><S S="debug">Exporting function 'Write-FileUpdateLog' for backwards compatibility</S><S S="verbose">関数 'Write-FileUpdateLog' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyDesktopLink' をインポートしています。</S><S S="verbose">関数 'Write-ChocolateyFailure' をインポートしています。</S><S S="verbose">関数 'Write-ChocolateySuccess' をインポ ートしています。</S><S S="verbose">関数 'Write-FileUpdateLog' をインポートしています。</S><S S="debug">Importing 'C:\ProgramData\chocolatey\extensions\chocolatey-core\chocolatey-core.psm1'</S><S S="verbose">パス 'C:\ProgramData\chocolatey\extensions\chocolatey-core\chocolatey-core.psm1' からモジュールを読み込んでいます。</S><S S="verbose">関数 'Get-AppInstallLocation' をエクスポートしています。</S><S S="verbose">関数 'Get-AvailableDriveLetter' をエクスポートしています。</S><S S="verbose">関数 'Get-EffectiveProxy' をエクスポートしています。</S><S S="verbose">関数 'Get-PackageCacheLocation' をエクスポートしています。</S><S S="verbose">関数 'Get-WebContent' をエクスポートしています。</S><S S="verbose">関数 'Register-Application' をエクスポートしています。</S><S S="verbose">関数 'Remove-Process' をエクスポートしています。</S><S S="verbose">関数 'Get-AppInstallLocation' をインポートしています。</S><S S="verbose">関数 'Get-AvailableDriveLetter' をイン ポートしています。</S><S S="verbose">関数 'Get-EffectiveProxy' をインポートしています。</S><S S="verbose">関数 'Get-PackageCacheLocation' をインポートしています。</S><S S="verbose">関数 'Get-WebContent' をインポートしています。</S><S S="verbose">関数 'Register-Application' をインポートしています。</S><S S="verbose">関数 'Remove-Process' をインポートしていま す。</S><S S="debug">Importing 'C:\ProgramData\chocolatey\extensions\chocolatey-dotnetfx\chocolatey-dotnetfx.psm1'</S><S S="verbose">パス 'C:\ProgramData\chocolatey\extensions\chocolatey-dotnetfx\chocolatey-dotnetfx.psm1' からモジュールを読み込んでいます。</S><S S="verbose">関数 'Install-DotNetFramework' をエクスポートしています。</S><S S="verbose">関数 'Install-DotNetDevPack' をエクスポートしています。</S><S S="verbose">関数 'Install-DotNetDevPack' をインポートしています。</S><S S="verbose">関数 'Install-DotNetFramework' をインポートしています。</S><S S="verbose">関数 'Format-FileSize' をエクスポートしています。</S><S S="verbose">関数 'Get-ChecksumValid' をエクスポートしています。</S><S S="verbose">関数 'Get-ChocolateyConfigValue' をエクスポートしています。</S><S S="verbose">関数 'Get-ChocolateyPath' をエクスポートしています。</S><S S="verbose">関数 'Get-ChocolateyUnzip' をエクスポートしています。</S><S S="verbose">関数 'Get-ChocolateyWebFile'  をエクスポートしています。</S><S S="verbose">関数 'Get-EnvironmentVariable' をエクスポートしています。</S><S S="verbose">関数 'Get-EnvironmentVariableNames' をエクスポートしています。</S><S S="verbose">関数 'Get-FtpFile' をエクスポートして います。</S><S S="verbose">関数 'Get-OSArchitectureWidth' をエクスポートしています。</S><S S="verbose">関数 'Get-PackageParameters' をエクスポートしています。</S><S S="verbose">関数 'Get-PackageParametersBuiltIn' をエクスポートしています。</S><S S="verbose">関数 'Get-ToolsLocation' をエクスポートしています。</S><S S="verbose">関数 'Get-UACEnabled' をエクスポートしています。</S><S S="verbose">関数 'Get-UninstallRegistryKey' をエクスポートしています。</S><S S="verbose">関数 'Get-VirusCheckValid' をエクスポートしています。</S><S S="verbose">関数 'Get-WebFile' をエクスポートしています。</S><S S="verbose">関数 'Get-WebFileName' をエクスポートしています。</S><S S="verbose">関数 'Get-WebHeaders' をエクスポートしています。</S><S S="verbose">関数 'Install-BinFile' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyEnvironmentVariable' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyExplorerMenuItem' をエクスポートし ています。</S><S S="verbose">関数 'Install-ChocolateyFileAssociation' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyInstallPackage' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyPackage' をエク スポートしています。</S><S S="verbose">関数 'Install-ChocolateyPath' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyPinnedTaskBarItem' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyPowershellCommand' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyShortcut' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyVsixPackage' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyZipPackage' をエクスポートしています。</S><S S="verbose">関数 'Install-Vsix' をエクスポートしています。</S><S S="verbose">関 数 'Set-EnvironmentVariable' をエクスポートしています。</S><S S="verbose">関数 'Set-PowerShellExitCode' をエクスポートしています。</S><S S="verbose">関数 'Start-ChocolateyProcessAsAdmin' をエクスポートしています。</S><S S="verbose">関数 'Test-ProcessAdminRights' をエクスポートしています。</S><S S="verbose">関数 'Uninstall-BinFile' をエクスポートしています。</S><S S="verbose">関数 'Uninstall-ChocolateyEnvironmentVariable' をエクスポートしています。</S><S S="verbose">関数 'Uninstall-ChocolateyPackage' をエクスポートしています。</S><S S="verbose">関数 'Uninstall-ChocolateyZipPackage' をエクスポートしています。</S><S S="verbose">関数 'Update-SessionEnvironment' をエクスポートしています。</S><S S="verbose">関数 'Write-FunctionCallLogMessage' をエクスポートしています。</S><S S="verbose">関数 'Install-ChocolateyDesktopLink' をエクスポ ートしています。</S><S S="verbose">関数 'Write-ChocolateyFailure' をエクスポートしています。</S><S S="verbose">関数 'Write-ChocolateySuccess' をエクスポートしています。</S><S S="verbose">関数 'Write-FileUpdateLog' をエクスポートしています。</S><S S="verbose">関数 'Get-AppInstallLocation' をエクスポートしています。</S><S S="verbose">関数 'Get-AvailableDriveLetter' をエクスポートしています。</S><S S="verbose">関数 'Get-EffectiveProxy' をエクスポートしています。</S><S S="verbose">関数 'Get-PackageCacheLocation' をエクスポートしています。</S><S S="verbose">関数 'Get-WebContent' をエクスポートして います。</S><S S="verbose">関数 'Register-Application' をエクスポートしています。</S><S S="verbose">関数 'Remove-Process' をエクスポートしています。</S><S S="verbose">関数 'Install-DotNetDevPack' をエクスポートしています。</S><S S="verbose">関数 'Install-DotNetFramework' をエクスポートしています。</S><S S="verbose">エイリアス 'Get-ProcessorBits' をエクスポートしています。</S><S S="verbose">エイリアス 'Get-OSBitness' をエクスポートしています。</S><S S="verbose">エイリアス 'Get-InstallRegistryKey' をエクスポートしています。</S><S S="verbose">エイリアス 'Generate-BinFile' をエクスポートしています。</S><S S="verbose">エイリアス 'Add-BinFile' をエクスポートしています。</S><S S="verbose">エイリアス 'Start-ChocolateyProcess' をエクスポートしています。</S><S S="verbose">エイリアス 'Invoke-ChocolateyProcess' をエクスポートしています。</S><S S="verbose">エイリアス 'Remove-BinFile' をエクスポートしています。</S><S S="verbose">エイリアス 'refreshenv' をエク スポートしています。</S></Objs>
0
Only an exit code of non-zero will fail the package by default. Set
 `--failonstderr` if you want error messages to also fail a script. See
 `choco -h` for details.
  yarn may be able to be automatically uninstalled.
Environment Vars (like PATH) have changed. Close/reopen your shell to
 see the changes (or in powershell/cmd.exe just type `refreshenv`).
 The install of yarn was successful.
  Software installed as 'msi', install location is likely default.

Chocolatey installed 1/1 packages.
 See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log).

Enjoy using Chocolatey? Explore more amazing features to take your
experience to the next level at
 https://chocolatey.org/compare

D:\>exit

PATHが変わるのでいったんコマンドプロンプトを閉じて開き直せとのことなので、ここでまずはひと区切り。
もっとも、単に記述に従っているだけなので、これらをどう使うのかはまだまだわからない。先は長そう。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0