ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

AsyncStorageをreact-native-community版に移行する

react nativeにはAsyncStorageというデータの永続化に使用する機能がありますが、今後react nativeのコアから出されてreact-native-community下に移されるみたいです

github.com

そのため将来的にAsyncStorageを使用しているアプリはこのパッケージに移行しないといけないということで、現在仕事で作成しているrnアプリ(0.58.6)に導入してみましたのでそのメモ

install

以下のコマンドでasyncstorageのパッケージを取得します

# Install
yarn add @react-native-community/async-storage

# Link
react-native link @react-native-community/async-storage

先に当時の最新バージョンである0.59.6で動作を確認した時には上記の処理を行えば動作させることができました

Podを使っている場合

仕事で使っているアプリではPodを使っているのでios/Podfileに以下の設定を記述しpod installでライブラリを使用するように設定を行います

pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage

余談

作成中のrnアプリでは上記手順を行うと以下のようなエラーがでました

Loading dependency graph...jest-haste-map: @providesModule naming collision:
  Duplicate module name: react-native
  Paths: /Users/.../App/Finalv2/node_modules/react-native/package.json collides with /Users/.../App/Finalv2/ios/Pods/React/package.json

調べた所stackoverflowで以下の設定をPodfileに追加することで機能するようになりました

pod 'React', :path => '../node_modules/react-native'
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

動作

react-native-communityのasyncstorageに変更してもドキュメントを見ている感じであれば、現在のasync storageからなくなっているものが無さそうなのでそのまま動くと思います。

実際に作成中のrnでも試してみましたが以下のようにimport文を書き換えるだけで移行が終了しました

// before
import {AsyncStorage} from 'react-native'

// after
import AsyncStorage from '@react-native-community/async-storage'

Intellij IDEAの設定を同期する

thinkpad上のubuntuで開発してたんですが、macに開発環境を作る際に設定が面倒で環境を同期する方法を調べました

同期方法

設定の同期方法には公式見てる感じ2種類あるみたいですが、今回はIDEの設定同期機能を使います

pleiades.io

設定

まず設定に使う"IDE Setting Sync"プラグインをインストールします

f:id:yuzu441:20190317114809p:plain

次は適当にプロジェクトを開いて、Fileメニューからを「Sync Settings to JetBrains Account」クリックし設定をjetbrainsのサーバーにアップロードします*1

f:id:yuzu441:20190317122858p:plain

ここでチェックボックスにチェックを入れておくと、プラグインの有効/無効も裏で同期してくれるみたいなので必要に応じてチェックを入れると良いと思います

f:id:yuzu441:20190317114833p:plain

確認

設定が完了したので、同期させたいPCでIntellij IDEAをインストールして確認します。手順としては上記の手順と同じで同期することが可能ですので特に書くことがないです

まとめ

今回はIDE設定同期機能を使ったんですが、チームなどで設定を共有するのであれば設定リポジトリ機能を使うとメンバーで設定を楽に共有することができるみたいですが別に自分の設定を共有したい気持ちが無いので、設定したくなったら試してみたいですね (なんかめちゃくちゃコミットされるらしいw)

*1:プロジェクトを開かずに設定同期の設定を行う箇所が見つけられなかったので知ってる人いたら教えてほしい

素振り環境にparcelのご提案

最近Reactを素振りするための環境として、前から話題になってたparcelを使ってみたらとても簡単に動作環境作れたのでその紹介

ja.reactjs.org

parceljs.org

githubに今回のコード等すべて置いといたので、読むの面倒な人はそちらで

github.com

環境作成と依存ライブラリインストール

前提としてnode.jsが動作する環境を作っている想定で話して行きます

適当にプロジェクトを作って、npmやyarnを使って以下のものをインストールする

# プロジェクトディレクトリ作成
mkdir test_proj
cd test_proj

# npm
npm init -y
npm i react react-dom
npm i -D parcel

# yarn
yarn init -y
yarn add react react-dom
yarn add -D parcel

srcディレクトリ等を作る

# ディレクトリ作成
mkdir src
mkdir view

# ファイル作成
touch src/app.js
touch view/index.html

Reactのコードを書く

雑に"Hello World"を表示するReactのコンポーネントを作る

// src/app.js
import React from 'react'
import ReactDOM from 'react-dom'

function App() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app')

読み込むhtmlを作る

さっき作ったReactのコードを読み込むhtmlファイルを作る

ここで注目するポイントは<script>タグでエントリーポイントのファイルを指定している部分で、parcelでビルドするといい感じにブラウザで動く状態に変換してくれる

<!-- view/index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React Sample</title>
</head>
<body>
  <div id="app"></div>
  <script src="../src/app.js"></script>
</body>
</html>

動かしてみる

作成したプロジェクトを動かしてみる

# npm
npx parcel view/index.html

# yarn
yarn run parcel view/index.html

上のコマンドを実行するとlocalhost:1234でサーバーが立ち上がり、"Hello World"が表示される

まとめ

ちょっと動かしたいだけなのにwebpackの設定面倒だなーと思ってたので、雑に試すならparcel最高だなと思った

まだ素振りと、ラズパイで動いてる雑なwebシステムにしか使ってなくてあんまりわかってないんだけど、一応productionコンパイル*1とかもできるみたいなのでちょっとずつ使ってみようと思ってる