Note

3年後の自分のために書いています

【Rails 5.2 版】スマートな rails new コマンドの叩き方

自分はいつもプライベートの開発ではこんな感じで rails new やってます、というのを備忘録もかねて載せておきます。

基本的に使うか分からないライブラリのファイルは生成しないようにしています。後から genarate コマンドで簡単に追加できるので。

通常の Rails アプリ

$ bin/rails new . -TMCGB -d postgresql --skip-turbolinks --skip-coffee --skip-active-storage

API 専用の Rails アプリ

--api つけると そもそも js 系のファイルが生成されないので、以下のオプションで OK。

$ bin/rails new . --api -TMCGB -d postgresql --skip-active-storage

オプション説明

  • -TMC
    • Test, Action Mailer, Action Cableの作成をスキップ
  • -G
    • .gitignore ファイルを上書きしない(あと自動で git init しない)
  • -B
    • rails new 時に bundle install しない( Gemfile を編集してから bundle install するので)
  • -d postgresql
  • あとはもろもろライブラリをスキップ

参考

$ bin/rails new -h

Options:
      [--skip-namespace], [--no-skip-namespace]            # Skip namespace (affects only isolated applications)
  -r, [--ruby=PATH]                                        # Path to the Ruby binary of your choice
                                                           # Default: /Users/daidoshota/.rbenv/versions/2.5.0/bin/ruby
  -m, [--template=TEMPLATE]                                # Path to some application template (can be a filesystem path or URL)
  -d, [--database=DATABASE]                                # Preconfigure for selected database (options: mysql/postgresql/sqlite3/oracle/frontbase/ibm_db/sqlserver/jdbcmysql/jdbcsqlite3/jdbcpostgresql/jdbc)
                                                           # Default: sqlite3
      [--skip-yarn], [--no-skip-yarn]                      # Don't use Yarn for managing JavaScript dependencies
      [--skip-gemfile], [--no-skip-gemfile]                # Don't create a Gemfile
  -G, [--skip-git], [--no-skip-git]                        # Skip .gitignore file
      [--skip-keeps], [--no-skip-keeps]                    # Skip source control .keep files
  -M, [--skip-action-mailer], [--no-skip-action-mailer]    # Skip Action Mailer files
  -O, [--skip-active-record], [--no-skip-active-record]    # Skip Active Record files
      [--skip-active-storage], [--no-skip-active-storage]  # Skip Active Storage files
  -P, [--skip-puma], [--no-skip-puma]                      # Skip Puma related files
  -C, [--skip-action-cable], [--no-skip-action-cable]      # Skip Action Cable files
  -S, [--skip-sprockets], [--no-skip-sprockets]            # Skip Sprockets files
      [--skip-spring], [--no-skip-spring]                  # Don't install Spring application preloader
      [--skip-listen], [--no-skip-listen]                  # Don't generate configuration that depends on the listen gem
      [--skip-coffee], [--no-skip-coffee]                  # Don't use CoffeeScript
  -J, [--skip-javascript], [--no-skip-javascript]          # Skip JavaScript files
      [--skip-turbolinks], [--no-skip-turbolinks]          # Skip turbolinks gem
  -T, [--skip-test], [--no-skip-test]                      # Skip test files
      [--skip-system-test], [--no-skip-system-test]        # Skip system test files
      [--skip-bootsnap], [--no-skip-bootsnap]              # Skip bootsnap gem
      [--dev], [--no-dev]                                  # Setup the application with Gemfile pointing to your Rails checkout
      [--edge], [--no-edge]                                # Setup the application with Gemfile pointing to Rails repository
      [--rc=RC]                                            # Path to file containing extra configuration options for rails command
      [--no-rc], [--no-no-rc]                              # Skip loading of extra configuration options from .railsrc file
      [--api], [--no-api]                                  # Preconfigure smaller stack for API only apps
  -B, [--skip-bundle], [--no-skip-bundle]                  # Don't run bundle install
      [--webpack=WEBPACK]                                  # Preconfigure for app-like JavaScript with Webpack (options: react/vue/angular/elm/stimulus)

Runtime options:
  -f, [--force]                    # Overwrite files that already exist
  -p, [--pretend], [--no-pretend]  # Run but do not make any changes
  -q, [--quiet], [--no-quiet]      # Suppress status output
  -s, [--skip], [--no-skip]        # Skip files that already exist


# Options, Runtime options 以外は省略

React Native × Firebase Authentication での自動ログイン機能に AsyncStorage は使わなくていい

タイトルのまんまですが、 Web に落ちてる記事の中にはわざわざログイン状態を React Native の AsyncStorage を使って保存してる実装のものもあったので、勘違いしないようにメモ。

Firebase Authentication では デフォルトで 明示的にログアウトするまでセッションを維持してくれます。

Authentication State Persistence  |  Firebase

'local': ブラウザ ウィンドウを閉じたり React Native でアクティビティが破棄されたりした場合でも、状態が維持されることを示します。この状態をクリアするには、明示的なログアウトが必要です。Firebase Auth のウェブ セッションは単一のホストを生成元とするため、単一のドメインでのみ永続化されることに注意してください。

...

ウェブブラウザと React Native アプリのデフォルトは local (ブラウザがこのストレージ メカニズムをサポートしている場合、たとえばサードパーティCookie / データが有効な場合など)で、Node.js バックエンドアプリでは none になります。

ログインしてるかどうかは firebase.auth().onAuthStateChanged() などで取得できます。

雑記

Firebase Authentication では明示的にログアウトしなくても他のユーザとして再度ログインかサインアップすればログインアカウントが切り替わるというのも(当たり前なんですが)挙動確認できたので、メモしておきます。

Expo で "This version of the Expo app is out of date. Uninstall the app and run again to upgrade." のエラーが出た時の対処法

iOS Simulator にインストールされている Expo アプリのバージョンが古いとのこと。

iOS Simulator の Hardware > Erase All Content and Settings してから再度 $ expo start -i すれば最新版の Expo アプリが install されます。

参考

javascript - expo is out of date uninstall and run again to upgrade - Stack Overflow

React Native にゆかりのあるスタートアップが集う会#5 に行ってきた

普段は Rails でアプリケーション開発してる自分ですが、プライベートで以前から触っていた React Native のイベントに行ってきました。

r-n.connpass.com

詳細なレポートは以下がとてもよくまとまってると思います。

【第5回】 「ReactNativeにゆかりのあるスタートアップが集う会」に参加しました|tkow|note

この記事では自分の気になった発表を中心にまとめていきます。

ReactNative はじめのいっぽ

まとめ

  • expo init してからも実装環境周りで迷うことが多い
  • 基本方針は UI を無理に作り込まずツールや OSS を活用する

以下ピクスタでの環境。

  • 開発支援ツールは expo 一択
  • エミュレーターiOS: XcodeAndroid: Genymotion
  • デバッガは React Native Debugger(長時間開いてるとメモリ食うので再起動必要)
  • 型チェックは TypeScript
  • State 管理は Redux(学習コスト大きいけど、書ける人多いから採用において有利)
  • ディレクトリ構成は Ducks(小規模なアプリなら見通しが良い)
  • ルーティングは React Navigation(Redux との相性良い)
  • 非同期処理は redux-saga
  • UI コンポーネントは React Native Elements

一言感想

UI コンポーネントに Native Base でなくて React Native Elements を選んだ理由が聞きたかった…

React Native のルーティングばなし

まとめ

  • React Navigation では今何枚目問題やバージョンアップによる破壊的変更がつらい
  • シンプルな zen-router を作ってみた
  • 今何枚目問題を解決する screenLength を実装した

GitHub - jshosomichi/react-native-zen-router

一言感想

zen-router 使ってみたい。

React Nativeの開発環境を分けよう(iOS編)

まとめ

一言感想

デバッグ方法わからなさすぎたのでものすごくためになりました!

React Native の E2E テストフレームワーク Detoxの紹介

まとめ

  • React Native 用 E2E テストツール Detox の紹介
  • テストデータ作るのが難しいので、 get 系のテストを中心に書いてる

GitHub - wix/Detox: Gray Box End-to-End Testing and Automation Framework for Mobile Apps

一言感想

テスト大事(でもプライベートでの開発では一旦 E2E テストは良いかな…)

パネルディスカッション

Hooks 便利そう(React Native 0.59 から使える)

VSCode の One Dark Pro のサイドバーの色を調整する

デフォルトだと選択されているファイルやフォーカスされているファイルが見づらすぎてキツイので。

// settings.json
{
  "workbench.colorCustomizations": {
    // 現在選択されている(開かれている)ファイルの背景
    "list.activeSelectionBackground": "#777",
    // フォーカスされているファイルの背景
    "list.focusBackground": "#555"
  },
  "workbench.colorTheme": "One Dark Pro"
}

参考

https://code.visualstudio.com/api/references/theme-color#lists-and-trees

初めての OSS コントリビュート

内容は超ショボいんですが、一応初めての記念として。

自分自身が普段使っている vim-snippets の React の部分を直したいなーと思って、 PR を送りました。

英語力をもっとつけなれけば、と強く思いました…。

github.com

Amazon や Wikipedia の URL を短縮する方法

URL を共有する時にとても便利なやつ。

ちなみに自分は Amazon に関しては必ずこの方法で、 Wikipedia に関しては余裕があればこの方法で URL 共有してます。(メールや Slack で長い URL が来るとウッ、、ってなるので)

詳細は 参考 で挙げたページに書いてるので、そちらをご覧ください。

Amazon の URL を短くする

例: 『いちばんやさしいデータフィードマーケティングの教本』

Before

https://www.amazon.co.jp/%E3%81%84%E3%81%A1%E3%81%B0%E3%82%93%E3%82%84%E3%81%95%E3%81%97%E3%81%84%E3%83%87%E3%83%BC%E3%82%BF%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%83%9E%E3%83%BC%E3%82%B1%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E6%95%99%E6%9C%AC-%E4%BA%BA%E6%B0%97%E8%AC%9B%E5%B8%AB%E3%81%8C%E6%95%99%E3%81%88%E3%82%8B%E5%BA%83%E5%91%8A%E5%8A%B9%E6%9E%9C%E3%82%92%E9%AB%98%E3%82%81%E3%82%8B%E5%95%86%E5%93%81%E3%83%87%E3%83%BC%E3%82%BF%E6%B4%BB%E7%94%A8%E6%B3%95-%E3%80%8C%E3%81%84%E3%81%A1%E3%81%B0%E3%82%93%E3%82%84%E3%81%95%E3%81%97%E3%81%84%E6%95%99%E6%9C%AC%E3%80%8D-%E6%9D%89%E5%8E%9F%E5%89%9B/dp/4844381512

After

https://www.amazon.co.jp/dp/4844381512/

💡 https://www.amazon.co.jp/dp/10桁のコード/ 以外は全部消して OK です。

Wikipedia の URL を短くする

例: 「インターネット広告」

Before

https://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E5%BA%83%E5%91%8A

After

https://ja.wikipedia.org/?curid=1740787

💡 https://ja.wikipedia.org/?curid=ページID だけで OK です。

ページ ID の取得の仕方は以下。

左側の ページ情報 をクリック。 f:id:daido1976:20190524000637p:plain

基本情報の中に ページ ID があります。 f:id:daido1976:20190524000717p:plain

参考