<h2 id="react-native-%E3%81%A8%E3%81%AF">
<a class="header-anchor-link" href="#react-native-%E3%81%A8%E3%81%AF" aria-hidden="true"></a> React Native とは</h2>
<p>React を使って Android,iOS アプリを開発するためのツールです。<br>
React Native は 開発者が JavaScript を書いて React Native を通すことで、ネイティブのコードで動作するという仕組みです。</p>
<h2 id="expo-%E3%81%A8%E3%81%AF">
<a class="header-anchor-link" href="#expo-%E3%81%A8%E3%81%AF" aria-hidden="true"></a> Expo とは</h2>
<p>Expo とは開発者が React Native 単体で開発した場合に意識しないといけなかったネイティブ部分を隠蔽して、アプリケーション本体の開発をより web アプリケーションは開発体験に近づけたものになります。<br>
開発時も実機に Expo クライアントと呼ばれるアプリをインストールして、簡単にローカル環境と繋いでスムーズに動作確認ができます。まるで web アプリケーションを開発しているかのような開発体験です。</p>
<h2 id="%E6%89%80%E6%84%9F">
<a class="header-anchor-link" href="#%E6%89%80%E6%84%9F" aria-hidden="true"></a> 所感</h2>
<p>普段 web アプリケーションは React、 iOS アプリケーションは Swift で書いていた著者が、少し触ったところの感想としては、</p>
<p>開発イメージ.jpg<img src="https://storage.googleapis.com/zenn-user-upload/fvi3kos0bmw0je1stqjya52rfq5h" alt loading="lazy" class="md-img"></p>
<h4 id="%E8%89%AF%E3%81%84%E3%81%A8%E3%81%93%E3%82%8D">
<a class="header-anchor-link" href="#%E8%89%AF%E3%81%84%E3%81%A8%E3%81%93%E3%82%8D" aria-hidden="true"></a> 良いところ</h4>
<ul>
<li>Expo を使った開発体験がとってもスムーズ</li>
<li>コンポーネントのレイアウトが CSS のように書けるのが最高</li>
<li>通信処理が JavaScript で書けるのが嬉しい</li>
<li>ネイティブアプリ開発で React Hooks や TypeScript 使えるの最高</li>
<li>
<a href="https://docs.nativebase.io/Components.html#Components" target="_blank" rel="nofollow noopener noreferrer">Native Base</a> という React Native 用 UI コンポーネント集が良い</li>
<li>開発中のアプリのホットリロード最高</li>
<li>今から Swift 書くぞという脳内のスイッチングコストがいらない</li>
<li>コードを Expo のクラウド上でビルドして ipa ファイルや apk ファイルがダウンロードできる（らしい）</li>
</ul>
<h4 id="%E7%96%91%E5%95%8F%E3%83%BB%E5%BF%83%E9%85%8D%E3%81%94%E3%81%A8">
<a class="header-anchor-link" href="#%E7%96%91%E5%95%8F%E3%83%BB%E5%BF%83%E9%85%8D%E3%81%94%E3%81%A8" aria-hidden="true"></a> 疑問・心配ごと</h4>
<ul>
<li>Expo SDK の開発、React Native 本体への追従スピードは大丈夫？
<ul>
<li>iOS 14 のサポート、React Native(0.63) や React Native for Web(0.13) の最新版 に追従した <a href="https://blog.expo.io/expo-sdk-39-is-now-available-4c10aa825e3f" target="_blank" rel="nofollow noopener noreferrer"><code>Expo SDK 39</code></a> は 9/22 にリリース</li>
</ul>
</li>
<li>iOS/Android の OS アップデートに伴う各種コンポーネントで起きる不具合対応
<ul>
<li>ネイティブ部分が遮蔽されているので、こればかりはやってみないと分からない</li>
</ul>
</li>
<li>Expo のサーバダウンしたらどこまで影響でる?
<ul>
<li>追々感じてみる</li>
</ul>
</li>
<li>アプリを審査を通さずにアップデートできる OTA アップデートってどうなってるの？
<ul>
<li>Store からインストールされたときに ipa に同梱されている初版がインストールされる</li>
<li>該当バージョンで OTA アップデートした回数分アプリの再起動が必要</li>
<li>詳しくは<a href="https://qiita.com/kaba/items/b6e777d1c0b7ce1f78c6" target="_blank" rel="nofollow noopener noreferrer">この記事</a>が分かりやすい</li>
</ul>
</li>
</ul>
<h4 id="%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AB%E9%81%A9%E7%94%A8%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88">
<a class="header-anchor-link" href="#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AB%E9%81%A9%E7%94%A8%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88" aria-hidden="true"></a> プロジェクトに適用する場合</h4>
<p>触った感触として、React Native + Expo をプロジェクトに適用する条件としては</p>
<ul>
<li>プロトタイプ的に効率的にアプリケーション開発を進めたい
<ul>
<li>Expo,React Native なら開発スピードを優先しながら Android / iOS 開発が可能</li>
</ul>
</li>
<li>デザインや機能仕様がコントロールできるアプリケーション開発である
<ul>
<li>Expo,React Native との技術的な制約とせめぎ合いが起きないような仕様</li>
</ul>
</li>
<li>アプリケーション開発・保守できるメンバーが JS エンジニアしかいない
<ul>
<li>開発自体は React 触れるならできるんじゃないかという印象、ネイティブ層で不具合が起きなければね（汗）</li>
</ul>
</li>
</ul>
<p>将来的にプロダクトの成長に伴ってネイティブコードへのアクセスがどうしても必要になるという場合は、Expo を eject して使うという<a href="https://tech.kitchhike.com/entry/react-native-expo-session-01" target="_blank" rel="nofollow noopener noreferrer">方法</a>もあるようです。</p>
<p>つまり Expo での高速開発の恩恵を受けつつプロダクト自体が成長したタイミングで、eject して運用。将来的にはネイティブアプリ運用に持っていくのもありなのかなと思います。（開発のスピード感が違うので一度味わうと、ネイティブに戻るのも腰が重くなりそうですが笑）</p>
<p>それでは前置きはこのくらいにして、 Expo を使ってアプリケーションを動かしてみましょう。</p>
<h2 id="%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99">
<a class="header-anchor-link" href="#%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99" aria-hidden="true"></a> 事前準備</h2>
<h3 id="expo-%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E7%99%BB%E9%8C%B2">
<a class="header-anchor-link" href="#expo-%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E7%99%BB%E9%8C%B2" aria-hidden="true"></a> Expo アカウントを登録</h3>
<ul>
<li>
<a href="https://expo.io/" target="_blank" rel="nofollow noopener noreferrer">公式サイト</a>でアカウントを登録しましょう</li>
</ul>
<h3 id="expo-client-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#expo-client-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> Expo Client をインストール</h3>
<p>Expo クライアントを使うと実際に Expo で作ったアプリケーションを実機で確認することが簡単にできます。<br>
お手元の iOS / Android の実機にインストールしてください。</p>
<p><strong>Android</strong><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__3428517a71064" src="https://embed.zenn.studio/card#zenn-embedded__3428517a71064" data-content="https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dhost.exp.exponent" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://play.google.com/store/apps/details?id=host.exp.exponent" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://play.google.com/store/apps/details?id=host.exp.exponent</a></p>
<p><strong>iOS</strong><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__05079c864f3ea" src="https://embed.zenn.studio/card#zenn-embedded__05079c864f3ea" data-content="https%3A%2F%2Fapps.apple.com%2Fjp%2Fapp%2Fexpo-client%2Fid982107779" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://apps.apple.com/jp/app/expo-client/id982107779" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://apps.apple.com/jp/app/expo-client/id982107779</a></p>
<h3 id="%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B">
<a class="header-anchor-link" href="#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B" aria-hidden="true"></a> ローカル開発環境をつくる</h3>
<h4 id="expo-cli-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#expo-cli-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> Expo CLI をインストール</h4>
<ol>
<li>
<p><a href="https://docs.expo.io/workflow/expo-cli/" target="_blank" rel="nofollow noopener noreferrer"><code>Expo CLI</code></a> をインストールする</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-g</span> expo-cli
</code></pre></div>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell">expo <span class="token parameter variable">--version</span>
<span class="token number">3.28</span>.5
</code></pre></div>
<p>インストール後に、バージョンが表示されれば OK です。</p>
</li>
<li>
<p><code>expo init</code> コマンドでプロジェクトの雛形を作成する</p>
<div class="code-block-container"><pre><code>expo init ExpoExample
? Choose a template:
  ----- 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
  minimal (TypeScript)  same as minimal but with TypeScript configuration
</code></pre></div>
<p>workflow についての公式ドキュメントは<a href="https://docs.expo.io/introduction/managed-vs-bare/" target="_blank" rel="nofollow noopener noreferrer">こちら</a>を参考ください。</p>
<p>今回は <code>Managed workflow + TypeScript</code> でいきたいと思います。</p>
<div class="code-block-container"><pre><code>✅ Your project is ready!
</code></pre></div>
<p>と表示されれば、インストール完了です。</p>
</li>
</ol>
<hr>
<h4 id="%EF%BC%88%E8%A3%9C%E8%B6%B3%EF%BC%89-managed-workflow-%E3%81%A8-bare-workflow-%E3%81%AE%E6%AF%94%E8%BC%83%E8%A1%A8">
<a class="header-anchor-link" href="#%EF%BC%88%E8%A3%9C%E8%B6%B3%EF%BC%89-managed-workflow-%E3%81%A8-bare-workflow-%E3%81%AE%E6%AF%94%E8%BC%83%E8%A1%A8" aria-hidden="true"></a> （補足） Managed workflow と Bare workflow の比較表</h4>
<p><img src="https://storage.googleapis.com/zenn-user-upload/gmwzghacxql8odlx5ovllcsleej3" alt loading="lazy" class="md-img"><br>
赤枠部分がポイントになると思います。</p>
<ul>
<li>Expo らしい開発効率の恩恵を享受したい場合は <code>Managed workflow</code> を選択</li>
<li>ネイティブコードまで触る可能性がある場合は <code>Bare workflow</code> を選択</li>
</ul>
<p>なのかなと思います。</p>
<h2 id="%E6%97%A9%E9%80%9F%E3%80%81%E5%8B%95%E3%81%8B%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B">
<a class="header-anchor-link" href="#%E6%97%A9%E9%80%9F%E3%80%81%E5%8B%95%E3%81%8B%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> 早速、動かしてみる</h2>
<div class="code-block-container"><pre><code>yarn start
</code></pre></div><p><code>yarn start</code> をすると、 <code>package.json</code> に記述されている、<code>expo start</code> コマンドが実行されます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/mgmn64ijxid0iimz9gg5wepb7bv1" alt loading="lazy" class="md-img"></p>
<p>上記画像の <code>Expo Developer Tools</code> が立ち上がれば成功です。</p>
<h3 id="expo-developer-tools-%E3%81%AE%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88">
<a class="header-anchor-link" href="#expo-developer-tools-%E3%81%AE%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88" aria-hidden="true"></a> <code>Expo Developer Tools</code> のポイント</h3>
<ul>
<li>
<p>画面左下の QRコードを Expo Client の QR リーダーで読み込むと、開発途中のアプリケーションの動作確認ができます</p>
</li>
<li>
<p>実機の Expo Client で Expo のアカウントにログインしておくと、 QR コード読み込まさなくても開発中のアプリケーションが一覧に同期されます</p>
</li>
<li>
<p>開発環境に繋がらない場合は、<code>CONNECTION</code> を <code>Tunnel</code> に変更すると良いと思います</p>
</li>
</ul>
<p><img src="https://storage.googleapis.com/zenn-user-upload/0puoxhfqua1ieg483t18szm12etm" alt loading="lazy" class="md-img"></p>
<ul>
<li>Xcode がインストールされていれば、<code>Run on iOS simulator</code> でシミュレーターが起動すると思います</li>
</ul>
<p>それでは、準備ができましたので早速コードを書いてみましょう。</p>
<h2 id="app.tsx-%E3%82%92%E8%A7%A6%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B">
<a class="header-anchor-link" href="#app.tsx-%E3%82%92%E8%A7%A6%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B" aria-hidden="true"></a> App.tsx を触ってみる</h2>
<p>普段 React を使っている方であれば、ネイティブ感が全くないようなコードが入っていると思います。<br>
<code>container</code> のスタイルの背景を白から黒に反転させて、<code>Text</code> に白色を当ててみましょう。</p>
<div class="code-block-container"><pre><code>import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
      &lt;View style={styles.container}&gt;
        &lt;Text style={styles.text/* 追加 */}&gt;Open up App.tsx to start working on your app!&lt;/Text&gt;
        &lt;StatusBar style="auto" /&gt;
      &lt;/View&gt;
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000', // 追加 #fff -&gt; #000
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: { // 追加
    color: '#fff' // 追加
  } // 追加
});
</code></pre></div><p>このように変更すると、背景が黒になりましたね。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/lgjwymz8h8dkebbit7tqygmz4bdr" alt loading="lazy" class="md-img"></p>
<p>上記コードをエディターで保存すると分かると思いますが、ホットリロードが有効になっているため、実機やシミュレーターなどの結果が即時反映されます。</p>
<p>もちろん、 iOS / Android を二台手元に置いておけば同時に反映されます。</p>
<p>ネイティブコードで開発する場合は、都度コードをビルドしてアプリをインストールし直さないといけません。 React Native , Expo の場合はこのホットリロードがあるおかげで、 web アプリのように高速に開発できます。</p>
<p>コードを変更して動かすということが体験できましたので、次にディレクトリ構造を確認してみましょう。</p>
<h2 id="%E5%88%9D%E6%9C%9F%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E5%88%9D%E6%9C%9F%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B" aria-hidden="true"></a> 初期ディレクトリを確認する</h2>
<p><code>expo init</code> で作られた初期ディレクトリやファイルも確認しておきましょう。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/79oi3qo93g8bq10k2b8hcq75k8yl" alt loading="lazy" class="md-img"></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/f28ouyh6vl937dcr9pkamcsdgo7f" alt loading="lazy" class="md-img"></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/rbi02svsmjy77cnmiv1h1o2kwm8w" alt loading="lazy" class="md-img"></p>
<h2 id="%E7%94%BB%E9%9D%A2%E3%81%AE%E5%90%84%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E3%81%A9%E3%81%86%E3%81%99%E3%82%8B%E3%81%8B">
<a class="header-anchor-link" href="#%E7%94%BB%E9%9D%A2%E3%81%AE%E5%90%84%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%82%92%E3%81%A9%E3%81%86%E3%81%99%E3%82%8B%E3%81%8B" aria-hidden="true"></a> 画面の各コンポーネントをどうするか</h2>
<p>React Native には標準コンポーネントも用意されていますが、iOS アプリに <code>Material</code> っぽさを入れたくないので今のところ <a href="https://nativebase.io/" target="_blank" rel="nofollow noopener noreferrer"><code>Native Base</code></a> というコンポーネント集が良いかなと思っています。<br>
<a href="https://docs.nativebase.io/Components.html#Components" target="_blank" rel="nofollow noopener noreferrer">ドキュメント</a>も充実しています。</p>
<p>React を使ったことのある方であれば、このドキュメントを見ただけでアプリが作れそうな気がするのではないでしょうか。</p>
<p>iOS アプリの開発をする際に、テーブルUIの表示を行う <code>UITableView</code> や <code>UICollectionView</code> といった部分の実装に非常に時間がかかるので、この部分が簡単に実装できるだけでも感動しています。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p>触り始めというところもあって、かもしれない・ようだ的なまとめになりますが、</p>
<ul>
<li>
<code>React</code> や <code>JavaScript</code> の知見を生かした状態でネイティブアプリケーション開発するには、 <code>React Native + Expo</code> という組み合わせは多いにありかもしれない</li>
<li>今回触れなかった ipa ファイルや apk ファイルのビルドは <a href="https://docs.expo.io/distribution/building-standalone-apps/" target="_blank" rel="nofollow noopener noreferrer">こちら</a> を参考にすると良いと思います</li>
<li>
<code>Expo</code> の開発体験が超スムーズだった（単にまだハマっていないだけかもしれない）</li>
</ul>
<p>この記事が気に入った方は、下のハートマークを押してもらえると嬉しいです。</p>


ゼロから始める React Native + Expo 入門

画面の各コンポーネントをどうするか

Discussion