<h2 id="h8d027c8ed3">はじめに</h2><ul><li>Expoをこれから使い始めようと思う方向けに私がまとまっててほしかった情報をまとめてみました</li></ul><h2 id="he6fa683b68">Expoを使う</h2><h3 id="h31d727ccda">準備</h3><ul><li>nodeを準備しておく<ul><li>個人はv16系がおすすめ</li><li>古いnodeのバージョンを使うとstroybookやjestで色々問題があったため</li></ul></li><li>下記のパッケージをインストールする<ul><li><code>npm install -g expo-cli</code></li><li><code>npm install -g eas-cli</code></li></ul></li></ul><h3 id="h702d09d558">プロジェクトを作成</h3><ul><li>作成コマンド<ul><li><code>expo init プロジェクト名</code></li></ul></li><li>選択肢<ul><li>特に何もなければプレーンなTSを選択するのがおすすめ<ul><li><code>blank (TypeScript) same as blank but with TypeScript configuration</code></li></ul></li></ul></li></ul><p><br></p><h3 id="he8428b9a29">開発サーバを起動</h3><ul><li>下記コマンドで開発サーバを起動する<ul><li><code>expo start</code></li></ul></li><li>補足<ul><li>こちらと同じ内容で&nbsp;expo start&nbsp;で怒られたので対策として下記を実施<ul><li><code>brew update</code></li><li><code>brew install watchman</code></li></ul></li><li>watchman&nbsp;のインストール中にxcode-selectをインストールしろと怒られたので追加<ul><li><code>xcode-select --install</code></li></ul></li></ul></li></ul><h3 id="h3c7222fefe">動作確認</h3><ul><li>前提<ul><li>Expoには実機で簡単に確認する仕組みがあります</li><li>Expo Goを使うと簡単に各OSごとに動作確認ができます</li></ul></li><li>iOS<ul><li>実機<ul><li><a href="https://apps.apple.com/jp/app/expo-go/id982107779" target="_blank" rel="noopener noreferrer">Expo Go</a>が必要のためiOSの端末にインストールしてExpoのQRコードを読み込ませてください </li></ul></li><li>Simulator<ul><li><code>expo start --ios</code></li></ul></li></ul></li><li>Android<ul><li>実機<ul><li><a href="https://play.google.com/store/apps/details?id=host.exp.exponent&amp;hl=ja&amp;gl=US" target="_blank" rel="noopener noreferrer">Expo Go</a>が必要のためAndroidの端末にインストールしてExpoのQRコードを<a href="https://play.google.com/store/apps/details?id=host.exp.exponent&amp;hl=ja&amp;gl=US" target="_blank" rel="noopener noreferrer">Expo Go</a>で読み込ませてください </li></ul></li><li>Emulator<ul><li><code>expo start --android</code></li></ul></li></ul></li></ul><h2 id="h5f432bd920">EASを使う</h2><h3 id="hf459a38b23">EASとは</h3><ul><li>Expoの背後にあるチームによるExpoおよびReactNativeアプリ向けの緊密に統合されたクラウドサービスです<ul><li>Expoを使う理由はこのEASがあるからと言っても過言ではないと思います</li></ul></li></ul><h3 id="h2fc791b477">expo build と eas buildどっち使えば？</h3><ul><li>新しく作るプロジェクトは<code>eas build</code>を使いましょう<ul><li><a href="https://docs.expo.dev/build/introduction/" target="_blank" rel="noopener noreferrer">EAS Build</a> に書いてありますが 次世代の<code>expo build</code>です</li></ul></li></ul><h3 id="he91360a6b9">EASのbuildで利用する設定ファイルを生成する</h3><ul><li>前提<ul><li>Storeにアップロードするファイルの生成を自動で行ってくれる</li><li>Expo Go を噛ませないで実機で動作確認したい場合に生成したファイルを利用する</li></ul></li><li>cli上でログインする<ul><li><code>eas account:login</code></li></ul></li><li>buildの設定ファイルを作成する<ul><li><code>eas build:configure</code></li></ul></li></ul><h3 id="hd2e2c30b0b">EASのbuildで利用するprofileの説明とbuildコマンド</h3><ul><li>profileとは<ul><li>EASのbuildコマンドにはprofileという概念があります<ul><li>簡単に言えばbuildの設定をまとめておくことができます</li><li>作成したbuildの設定に名前をつけたものがprofileです</li></ul></li><li>buildを実行する時にどのprofileを利用するか指定できます</li></ul></li><li>作成したeas.jsonに定義されているprofile<ul><li><code>development</code><ul><li>開発者が共通の環境を使ってbuildで利用するprofile</li><li><code>eas build --platform all --profile development</code></li></ul></li><li><code>preview</code><ul><li>いわゆるstage環境のbuildで利用するprofile</li><li><code>eas build --platform all --profile preview</code></li></ul></li><li><code>production</code><ul><li>本番向けのbuildで利用するprofile</li><li><code>eas build --platform all --profile production</code></li></ul></li></ul></li></ul><p><br></p><h3 id="h72263e7e8a">EASのbuildで利用する設定ファイルに設定を追加</h3><ul><li>下記では実機検証及びEmulatorとSimulatorで動作確認できる設定を追加しています<ul><li>Androidをbuildすると<code>.aab</code>が生成される<ul><li>storeにアップロードする時に推奨されている</li><li>実機やEmulatorでは簡単に確認することができない</li><li><code>buildType</code>で<code>apk</code>を指定することで簡単に実機やEmulatorにインストールが可能になる</li></ul></li></ul></li></ul><pre><code>"android": {
  "buildType": "apk"
}</code></pre><ul><li>iOSをbuildすると<code>.ipa</code>が作成される<ul><li>Simulatorでは<code>.ipa</code>を使った確認ができないためSimulatorで動作確認できるようにする</li></ul></li></ul><pre><code>"ios": {
  "simulator": true
}</code></pre><ul><li>上記の設定を組み込んだ設定ファイル</li></ul><pre><code>...
"build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "simulator": true
      }
    },
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "simulator": true
      }
    },
    "production": {}
  },
...</code></pre><p><br></p><h2 id="h709c17d010">ビルドした成果物の動作確認方法</h2><h3 id="hc75451390d">iOS</h3><ul><li>実機<ul><li>EAS上でインストールしたいiOSのbuildを選択する</li><li>選択したbuildの詳細画面に<code>Install</code>があるのでクリックする</li><li>QRコードのモーダルが表示されるのでiPhoneで読み込む</li><li>アプリを検索して起動する</li></ul></li><li>Simulator<ul><li>EAS上でインストールしたいiOSのbuildを選択する</li><li>選択したbuildの詳細画面に<code>Download</code>があるのでクリックする</li><li>圧縮ファイルがダウンロードされるので下記コマンドで解凍する<ul><li><code>tar -xvzf Downloadしたファイル名.tar.gz</code></li></ul></li><li>実行すると<code>proute.app</code>が作成されている<ul><li><code>Downloadしたファイル名.tar.gz</code>と同じ階層にある</li></ul></li><li>解凍したファイルをシュミレーターにドラッグアンドドロップして起動する</li></ul></li></ul><h3 id="he3dc5884eb">Android</h3><ul><li>実機<ul><li>EAS上でインストールしたいAndroidのbuildを選択する</li><li>選択したbuildの詳細画面に<code>Install</code>があるのでクリックする</li><li>QRコードのモーダルが表示されるのでAndroidで読み込む</li><li>選択すると.apkファイルをダウンロードできるのでダウンロードする</li><li>ファイル関連のアプリを開きダウンロードしたファイルがあることを確認する</li><li>ダウンロードしたファイルを選択するとインストールするか聞かれるのインストールを選択<ul><li>開発者モードにしておく必要があるかも</li></ul></li><li>アプリを検索して起動する</li></ul></li><li>Emulator<ul><li>EAS上でインストールしたいAndroidのbuildを選択する</li><li>選択したbuildの詳細画面に<code>Options</code>があるのでクリックすると<code>Download build</code>が表示されるのでクリックする</li><li>DownloadしたファイルをEmulatorにドラッグアンドドロップしてインストールする</li><li>インストールしたアプリを起動する</li></ul></li></ul><h2 id="h1afe451c43">さいごに</h2><ul><li>Expoで開発していく上で最初に知っておきたい情報を1ページにまとめてみました</li></ul>

これからExpoを使い始める方向けの情報をまとめました

アプリ開発でExpoを使うことを考えてる方へ

<h2 id="h9e4339c680">まえがき</h2><ul><li>何を考え何をやったのかについて整理の目的で書き残す。</li></ul><h2 id="h2220f0ef7d">やったこと</h2><h3 id="h4712ba92bb">プロトタイプ開発の前準備</h3><h4 id="he1981f850b">課題の整理</h4><ul><li>現状どういう課題があるのかそれをどうやれば解決できるのかを整理</li></ul><h4 id="h0b39dcfbbb">課題へのアプローチ</h4><ul><li>整理した課題に対してどんなアプローチがあるのかを洗い出し検討</li><li>ざっくり方向性を決めてPRDを書き起こした</li></ul><h4 id="h6c86d31640">技術選定</h4><ul><li>PRDを元に実現するために必要な技術を検証<ul><li>実現できるか調べてみる</li><li>候補になる技術を触ってみる</li></ul></li><li>各技術の将来性を比較<ul><li>市場のエンジニアの母数を比較</li><li>将来的にエンジニアを探すコストも考慮<ul><li>案件数</li><li>単価</li></ul></li></ul></li></ul><h4 id="hb5ab843e2c">ツール選定</h4><ul><li>デファクトスタンダードであること</li><li>無料でやりたいことができること</li><li>他のサービスに乗り換えられること</li></ul><h3 id="h25556dedd9">プロダクトを作る上で絶対に守ろうと思ってること</h3><h4 id="heb8d405e11">プロトタイプの賞味期限を決める</h4><ul><li>プロトタイプなので必ず捨てる</li><li>捨てる時は技術選定からやる</li><li>PMFさせるための判断材料を集める</li></ul><h3 id="he9b350497e">プロトタイプを作る目的</h3><h4 id="had67ceed2e">ドメインを知ること</h4><ul><li>ドメインに対する理解が乏しいことを理解する</li><li>開発していく中でドメインに対する理解を深めていく</li></ul><h4 id="h72cea0655c">ユーザのフィードバックを得ること</h4><ul><li>ものがなければ机上の空論になるので実際に形にして触ってもらいフィードバックを受ける</li></ul><h4 id="h63038b267c">PMFするのに必要な判断材料を得ること</h4><ul><li>仮説が正しいか検証する</li><li>ピボットが必要か検証する</li></ul><h2 id="h204343d3f8">やってること</h2><h3 id="h01f5ecde84">プロトタイプの開発</h3><h4 id="hf62205864b">どういうことをやってるのか</h4><ul><li>1週間8~16時間の時間を捻出してプロトタイプの開発にコミット<ul><li>仕様策定</li><li>技術調査</li><li>技術検証</li><li>仕組み作り</li><li>機能開発</li></ul></li></ul><h3 id="h9bd4c2d0cc">チーム作り</h3><h4 id="h63338c71d0">なぜチーム作りをこのタイミングではじめたのか</h4><ul><li>一人でできることには限界がある<ul><li>やることやりたいことが多すぎて首がまわらなくなった</li></ul></li><li>暗黙知を作りたくなかった<ul><li>何を知らないのか知らないを回避する</li><li>何も知らない前提で情報の共有ができる状態を作りたかった</li></ul></li><li>文化を一緒に作りたかった<ul><li>個人のパフォーマンスに依存しない<ul><li>一人の天才に頼らない</li></ul></li><li>チームで常に一定のパフォーマンスを出せる<ul><li>個人の成果ではなくチームとして常に成果を出し続けれるようにしたい</li></ul></li><li>共通の思想を基盤に持っていたい<ul><li>やり方は自由に目指すところは同じという状態を早めに作りたかった</li></ul></li></ul></li><li>スケールできる仕組みを早期に作りたかった<ul><li>プロダクトの成長に合わせてチームがスケールできる土台を作っておきたかった</li></ul></li></ul><h2 id="h1afe451c43">さいごに</h2><ul><li>細かい話は書けばきりがないのでざっくり何を考えて何をやったかについて書いた。</li><li>今後もう少し具体的に更新するかも。</li></ul>

ゼロからはじめたプロダクト開発

<ul><li>必要なpackageをインストールする</li></ul><pre><code>npm install --save-dev eslint prettier eslint-config-prettier</code></pre><p><br></p><ul><li>eslintの設定ファイルを作成</li></ul><pre><code>npx eslint --init</code></pre><p><br></p><ul><li>各質問の解答は以下</li></ul><pre><code>✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-standard@latest
✔ The style guide "standard" requires eslint@^7.12.1. You are currently using eslint@8.10.0.
&nbsp; Do you want to downgrade? · No / Yes</code></pre><p><br></p><ul><li>.eslintrc.jsに <code>prettier</code> の設定を追加</li></ul><pre><code>module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'standard',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: [
    '@typescript-eslint'
  ],
  rules: {
  }
}</code></pre><p><br></p><ul><li>.vscode/settings.jsonに設定を追加</li></ul><pre><code>{
  // フォーマッターをPrettierにする
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // ファイル保存時にフォーマットを実行
  "editor.formatOnSave": true
}</code></pre><p><br></p>

脱！コピペ頼りの設定から理解して設定するまで

vscodeで保存した時に自動でlintされるようにする

<h2 id="h8a175a9b0e">前提</h2><ul><li>src配下にtestsディレクトリを配置する</li></ul><p><br></p><h2 id="hbf3f810395">必要なpackageを追加する</h2><p><br></p><pre><code>npm install --save-dev typescript ts-node jest ts-jest @types/jest</code></pre><p><br></p><h2 id="h1891838e61">必要な設定ファイルを作成する</h2><ul><li><a style="background-color:#f6f8fa" href="https://github.com/proute-jp/data-source/pull/4/files#diff-b55cdbef4907b7045f32cc5360d48d262cca5f94062e353089f189f4460039e0" target="_blank" rel="noopener noreferrer">tsconfig.json</a><span style="color:#24292f">&nbsp;</span></li></ul><pre><code>{
&nbsp; &nbsp; "compilerOptions": {
&nbsp; &nbsp; &nbsp; "baseUrl": "./src/",
&nbsp; &nbsp; &nbsp; "paths": {
&nbsp; &nbsp; &nbsp; &nbsp; "#/*": ["*"]
&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp;
&nbsp; &nbsp; }
&nbsp; }</code></pre><ul><li><a style="background-color:#f6f8fa" href="https://github.com/proute-jp/data-source/pull/4/files#diff-860bd1f15d1e0bafcfc6f62560524f588e6d6bf56d4ab1b0f6f8146461558730" target="_blank" rel="noopener noreferrer">jest.config.ts</a></li></ul><pre><code>export default {
&nbsp; clearMocks: true,
&nbsp; collectCoverage: true,
&nbsp; coverageDirectory: "coverage",
&nbsp; coverageProvider: "v8",
&nbsp; globals: {
&nbsp; &nbsp; "ts-jest": {
&nbsp; &nbsp; &nbsp; "tsConfig": "tsconfig.json"
&nbsp; &nbsp; }
&nbsp; },
&nbsp; moduleFileExtensions: [
&nbsp; &nbsp; "ts",
&nbsp; ],
&nbsp; preset: "ts-jest",
&nbsp; testMatch: [
&nbsp; &nbsp; "**/tests/**/*.test.ts"
&nbsp; ],
&nbsp; transformIgnorePatterns: [
&nbsp; &nbsp; "/node_modules/",
&nbsp; &nbsp; "\\.pnp\\.[^\\/]+$"
&nbsp; ],
};</code></pre><p><br></p><h2 id="h2acda82790">テストを実行するコマンドを追加する</h2><ul><li>package.json</li></ul><pre><code>"scripts": {
&nbsp; &nbsp; "test": "jest"
},</code></pre>

tsとjestでテストが実行できる環境を作る

Typescriptで作ったテストをJestで実行できるようにする

<h2 id="h8d027c8ed3">はじめに</h2><p>あけましておめでとうございます！<br>今年もよろしくおねがいします！<br>気づいたら2021年も終わり2022年になっていました。<br>まずは2021年の抱負を振り返り、2022年の抱負を決めたいと思います。<br></p><h2 id="h4109de30d9">2021年の抱負の振り返り</h2><ul><li>ダイエット<ul><li>12月頃からようやく本腰をいれはじめた</li><li>糖質制限とリングフィットアドベンチャーで追い込む！</li></ul></li><li>ビジネス入門<ul><li>技術もわからないこといっぱいだけどビジネスもわからないことがいっぱいだった</li><li>信頼できるビジネスサイドの人を見つけて壁打ち相手になってもらえるような関係性を築きたい</li><li>2022年はそういう人に会えるといいなぁと思ってる</li></ul></li><li>メンター探し<ul><li>メンターがほしかったのではなくFBがほしかったっぽい</li><li>転職先の同僚の方々に素晴らしいFBをもらえてる！</li></ul></li><li>技術力の向上<ul><li>今までの技術スタックから新しい技術スタックにシフトした</li><li>色々新しいことをトライアンドエラーで泣きながらやってた</li><li>2022年も書きはしないけどがんばる</li></ul></li></ul><p><br></p><h2 id="hac1a5b6bc4">2022年の抱負</h2><ul><li>ダイエットして健康体になる</li><li>プロトタイプのプロダクトをリリースする</li></ul><p><br></p><h2 id="hd0617bbb7d">抱負の理由</h2><p><strong>ダイエットして健康体になる</strong><br>結論を書いておくと人生のステ振りを間違えてました。<br>不健康に極振りした背水の生活した20代から30代になり健康面も気になりはじめました。<br>最近はダイエットのために糖質オフの食生活をしたりリングフィットアドベンチャーを使った運動をしてます。<br>30代は健康とやりたいことのバランスをちゃんと取っていきたいと思い抱負としています。<br><br><strong>プロトタイプのプロダクトをリリースする</strong><br>2020年頃から構想として思い描いてたものがあり2021年頃に可能性を感じたので開発をはじめたプロダクトがあります。<br>私の技術スタックとは随分かけ離れていたため2021年は泣きながら勉強しながら開発していました。<br>この年末年始は将来ユーザになって頂きたい方々に実際にインタビューを行いました。<br>提供したいと考えている内容とニーズが合致していたため、まずはプロトタイプを世に出すことを抱負にしています。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>余計なことは一切考えずに今年はこの2つにフォーカスします。</p>

2022年の抱負について書いてます