おはよう君需要なし

求不得苦な日々

WindowsでのReact Nativeの環境構築に躓いた話

ガジェット・プログラミング

React Nativeがアツい

React Nativeとは端的に言うとReactで書いたプログラムがAndroidやiOSで動いてしまうというすごい技術です。

Reactを用いて外部APIとの連携をするSPAを普段から書いているエンジニアにとってとても有用なモノなのではないか（と思っている）。

AndroidやiOSのアプリが吐けるわけなので、Windows用にも当然(?)アプリを吐くことができ、デバッグも容易そうだ（と思っている）。

一時期Xamarinにも興味を持った私ですが、Cで書いたネイティブのライブラリを使用するなどの用途でない場合は Xamarinを使う必要ないのではないかとまで考えています。

React Native環境構築

とりあえず環境構築をしなければ始まらない、ということで備忘です。

私はどちらかというとWindows用のアプリを吐ける、ということに興味を持ったのでLinuxでもMacでもなく Windowsで環境構築を行っていきます。

nodeのインストール

まずはnode.jsを入れます。私は適当に8.11.2のzipをダウンロードしてきてPATHを通しました。詳しく書いているサイトがほかにあるはずなのでこちらはそれを参照してほしいです。

使ってみるとnpmのバージョンが古いといわれるのでバージョンを上げます。 こちらはnpm install -g npmするだけかと思いきや、「既にファイルがあるぞ」と怒られるので、npmやnpm.cmd、npxやnpx.cmdといったファイルをそれぞれ npm_old, npx_oldなどにリネームしてから

npm_old install -g npmとして回避しました。

react-nativeアプリの生成ツールのインストール

create-react-native-appというReact Nativeアプリを作ってくれるnpmパッケージがあります。便利ですね。

npm install -g create-react-native-app

アプリの生成

create-react-native-app AwesomeProject

ワンコマンドでいろいろと揃えてくれます。便利ですね。

アプリの実行

cd AwesomeProject
npm start

これを実行するだけで立ち上がります（ということになっています）。

環境構築で躓いた点

Error: Invalid sdkVersion. 問題

Error running adb: socket hang up 問題

要は

Proxyがいろいろと悪さをしていました。内部でaxiosというHTTPリクエストを送るライブラリが使用されているのですが、そこで通信をするときにHTTP_PROXYという環境変数を見ていて、それが不適切だと通信に失敗し必要なものがダウンロード・インストールされていなかった、というのが原因みたいでした。

つまりエラー表示が不適切！という感じでした

終わりに

ちょっと時間がないので解決方法について詳細な手順を書く暇がありません。もし需要があればコメントなりで反応してくれれば書きますので。

最後の最後に

また、今回はcreate-react-native-appというスクリプトを使ってReact-Nativeの雛形を作るということを試してみましたが、どうもこの方法で作ったアプリケーションでは、visual studio codeのreact-native用の拡張機能が正しく動作しないようです。

まぁreact-native-cliスクリプトを使ってアプリを作りましょう、というのが私の最終的な結論になりそうです。

Optiplex 9020を購入しました。

ガジェット・プログラミング

ちょっとずつ暇な時間ができてきたので、Androidアプリでも作るか～となってきたんですが今まで愛用してきたThinkpad X220はもうすでに満身創痍でAndroid Studioを立ち上げるにもいろいろとファンがうるさかったりします。

というわけで、新しいパソコンを手に入れようと思ったわけです。 手持ちであるパーツは

  • OS：Windows 7 （今のうちにWindows10にしておきたい）
  • SSD：色々と手元に転がっている

って感じでした。足りないのはマザボ・CPU・メモリなので新しくパーツを購入して自作してもよいかな～という気はしていたのですが、何せ趣味で始める以上そんなに優先度は高くなく、お金もそんなにかけられないという状況だったので中古でもいいから適当ないい感じのパソコンは買えないものか、と探していました。メモリなどもめちゃくちゃ高騰していてタイミングもよくないですしね…

そんな中、見つけたのが大量出品されている（おそらく企業向けのリースが終わった）Optiplex 9020でした。それはヤフオクで出品されていて、ちょうどYahoo! JAPANカードを発行してもらった6111ポイントが余っていたので、だいたい15000円ぐらいで購入することができました。スペックはこんな感じ

  • CPU：Core i5-4590S
  • MEM：DDR3 16GB
  • ストレージ：なし
  • 大きさ：USFF (Ultra Small Form Factor : めちゃくちゃ小さい)
  • 備考：DVD-ROMドライブ

というわけで、届いたのがこちら。

f:id:yoh_mar28:20171205195755j:plain

うっひょーめちゃくちゃきれい！

フロントパネルにまだフィルムが貼ってある状態で、新品と見紛う綺麗さ！！

USFFということでめちゃくちゃ小さいフォームファクターなわけなんですが、Mini-ITXの「SG05-LITE」と比べてもその小ささがわかると思います（一枚目写真）

f:id:yoh_mar28:20171205195843j:plain

まぁ小ささゆえに拡張性はだいぶ乏しいですね。SATAも2ポートしかありませんし、PCIもminiPCIeということで、何に使ったものか…って感じですね。

しかし朗報です

今までThinkpadにさしていたmSATAをOptiplex9020にさしてみたところ、見事SSDとして認識してくれました！

f:id:yoh_mar28:20171205201750j:plain

これをうまく有効活用できれば、2.5インチシャドウ+スリムベイに1台ずつSSDを仕込んでmSATAシステムディスク＋RAIDも夢ではありませんね。さすがにそこまでやったら変態PCすぎますがｗ

消費電力も少ないぞ！

f:id:yoh_mar28:20171205202227j:plain

私はリモートデスクトップが大好きなのでスリープにさせずアイドルで放っておくのが好きです（謎）

というわけで、アイドル時の消費電力について測ってみるとだいたい14Wぐらいでした。DVD-RAMとか余計なものがついた状態でこの消費電力なのでさすがはHaswell-Refreshといったところでしょうか。

あと5年は戦うぞ

なんかすごく長持ちしそうな気がするので大切に使おうと思います。

…しかしパソコンが増えすぎた…