20200920のMacに関する記事は2件です。

DockerでReact Native(TypeScript)+Expoのプロジェクト構築

まえおき

React Native+Expoで構成されたプロジェクトのDockerコンテナをMac OS X上に構築する手順を記載しています。

各端末の情報

  • PC

    • Mac OS Catalina Ver.10.15.6
    • docker version 19.03.12, build 48a66213fe
    • docker-compose version 1.26.2, build eefe0d31
  • iPhone

    • iPhone XR
    • iOS:13.7

ExpoClientで動作検証済みの端末

  • iPhone(iOS:13.7)

前提

  • docker, docker-compose導入済み

手順

1. Expoアカウントを作成します

Expoアカウントの作成方法

2. Expoクライアントアプリのインストールとセットアップをおこないます。

iPhoneでExpoクライアントアプリのインストールとセットアップ方法

3. Docker環境を構築します

ファイル構成

root
└── docker
    └── react_native
        └── dockerfile
└── docker-compose.yml
└── .env

docker/react_native/dockerfile

FROM node:14-alpine

WORKDIR /usr/src/app/

RUN apk update && apk add bash

RUN yarn global add expo-cli

docker-compose.yml

version: "3"
services:
  react_native:
    build: ./docker/react_native
    volumes:
      - ./react_native/:/usr/src/app
    env_file: .env
    command: yarn start
    ports:
      - "19000:19000"
      - "19001:19001"
      - "19002:19002"

.env

Expoを利用する各端末のIPなどを設定する必要があります。

  • ADB_IP
    • 検証端末のIPアドレスを指定してください。カンマ区切りで複数指定可能なようです。
  • REACT_NATIVE_PACKAGER_HOSTNAME
    • Dockerコンテナ可動端末のIPアドレス
ADB_IP=192.168.0.10,192.168.0.11,...
REACT_NATIVE_PACKAGER_HOSTNAME=192.168.0.2

4. Dockerコンテナをビルドします

docker-compose build

5. Dockerコンテナへ接続します

docker-compose run --rm react_native bash --login

6. expoプロジェクトを作成します

expo init .

7. プロジェクトテンプレートを選択するとプロジェクトのセットアップが開始されます

わたしは[blank (TypeScript)]を選択しました。

? Choose a template: (Use arrow keys)
  ----- Managed workflow -----
  blank                 a minimal app as clean as an empty canvas
❯ blank (TypeScript)    same as blank but with TypeScript configuration
  tabs                  several example screens and tabs using react-navigation
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started
  minimal (TypeScript)  same as minimal but with TypeScript configuration

8. セットアップが完了したらコンテナから抜けます

9. Dockerコンテナを起動します

docker-compose up

10. 表示されたQRコードを検証端末上で読み取ります

スクリーンショット 2020-09-20 20.16.22.png

11. 検証端末でExpo Clientアプリが起動しREACTの画面が表示されます

スクリーンショット 2020-09-20 21.31.10.png

12. react_native/App.tsxを更新すると・・・

react_native/App.tsxのファイル内に記述された表示テキストの末尾に☺️を追加してファイルを更新します。

スクリーンショット 2020-09-20 20.22.23.png

13. 更新した内容が検証端末へ自動的に反映されます

ホットリロードによって末尾の☺️がiPhone上の検証画面へ自動的に反映されます。

スクリーンショット 2020-09-20 20.24.19.png

参考

DockerでReact Native環境作成から、Expo Clientで実機確認するまで
WSLでReact Native + Expo環境を作ろう
DockerでExpo / React Nativeを実行する

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Vue.js】クリック処理 @click

【ゴール】

画面収録 2020-09-20 9.12.12.mov.gif

Vue.jsを用いてクリック処理を実施

【環境】

mac catarina 10.156
Vue.js v2.6.12

【実装】

index.html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <p>{{number}}</p>
  <button @click="increaseNumber">増やす</button>
</div>
.
.
.
<script>
  new Vue({
    el: '#app', //対象を取得
    data: {
      number: 0  //numberをセット
    },
    methods: {
      increaseNumber: function(){
        return this.number += 1;  //numberに対して、1ずつ加えていく
      }
    }
  })
</script>

【まとめ】

■ htmlでは、{{}}でvuejsのデータを表示
■ vuejsでは@click等の便利なディレクティブが多数ある

【オススメ記事】

■ 【Vue.js】 IF文・For文 条件分岐、繰り返し処理
https://qiita.com/tanaka-yu3/items/0ccf9a11525331b764de

■ 【node.js】ルーティング設定ホーム画面表示させる。
https://qiita.com/tanaka-yu3/items/1c8859e16070e67d73c0

■ 【node.js】 node.jsインストール 芋っていたけど、簡単だった件...
https://qiita.com/tanaka-yu3/items/739db5ffed24a8d9ae4b

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む