Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
react-nativeで無理やりsequelize(ORM)を使った話
Search
S-cubism
October 20, 2017
Technology
2
720
react-nativeで無理やりsequelize(ORM)を使った話
S-cubism
October 20, 2017
Tweet
Share
More Decks by S-cubism
See All by S-cubism
WSLでreactの開発環境作った話
scubism
0
690
未経験者がAndroidアプリをリリースするまで
scubism
0
120
scubism_LT_20180223_細田謙二_イベントソーシング
scubism
0
160
REVEAL.JSをちょっとだけ使ってみた
scubism
0
260
忙しい人のための仮想通貨
scubism
0
110
サーバ作業の注意コマンド
scubism
0
130
最近勉強してること、次にやりたいこと
scubism
0
110
FOOD TECH
scubism
0
67
Firebase(Realtime Database)について
scubism
0
130
Other Decks in Technology
See All in Technology
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
200
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
150
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.7k
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
540
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
1
390
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
18
8.1k
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
130
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
120
落ちる 落ちるよ サーバーは落ちる
suehiromasatoshi
0
150
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
680
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
210
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
Being A Developer After 40
akosma
90
590k
Building an army of robots
kneath
306
46k
Why Our Code Smells
bkeepers
PRO
339
57k
The Invisible Side of Design
smashingmag
301
51k
Scaling GitHub
holman
463
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Facilitating Awesome Meetings
lara
55
6.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Transcript
react-nativeで 無理やりsequelize(ORM)を使った話 2017/10/20 エスキュービズム社内技術LT 久米 諒
はじめに • ReactNativeを使って新しいプロダクトを開発中 • ターゲットのプラットフォームは以下の2つ – iOS – Windows (UWP)
• そのプロダクトにはDBが必要 – サーバにある情報をローカルにキャッシュ – 作成したデータをサーバに送る前に保存しておく、など • 今日はDBに何を採用したかのお話
採用するDB • 旧プロダクトでは、下記を使っていた – iOS : CoreData (SQLiteバックエンド) – Windows(StoreApp)
: SQLite • ReactNativeでは、以下の点で考慮が必要 – 複数のプラットフォームで動かす必要がある – JavaScriptから利用する – 数万件のレコードを扱うため、パフォーマンスが重要 • 検索処理は必ずDBエンジン側で行う必要がある(全件取得してからjsで 絞り込むのはNG) • DB以外にも永続化の手段はあるが、大体この制約に引っかかる
ReactNativeで採用するDB • ReactNativeでは、nodejs向けのパッケージマネージャーで あるnpmをそのまま利用できる • ファイル読み込みやDBアクセスなど、IOを伴うnodejs用の ライブラリはほとんど使えないが、react-native向けのライ ブラリが多数公開されている • 今回はreact-native-sqlite-2を使うことに
– https://www.npmjs.com/package/react-native-sqlite-2 • (RealmはUWP × ReactNativeの組み合わせで使えないので断念)
ORMの利用検討 • react-native-sqlite-2はSQLiteをJSから使えるようにしただけ のライブラリ • 基本的にSQLを書いて利用する想定のモノ • 生SQLを書きたくない! • 通常npmで提供されているライブラリはnodejs用
• react-native対応を謳った実用レベルのORMはまだ無い • nodejs用のライブラリをreact-nativeで無理やり使えない か?
補足 : ReactNativeでのjsトランスパイル • ReactNativeは書いたjsを直接実行するのではなく、一旦 babelというツールで変換(トランスパイル)する • 最新のEcmaScript(JavaScript)仕様で書いたコードが、既存 の環境で実行できる様に古いjs形式に変換される •
ソースコードは複数のjsファイルに分割され、importや requireで参照しているが、トランスパイル時にはこれは1つ のjsbundleファイルにまとめられる main.jsbundle xxx.js yyy.js zzz.js aaaa.js import import require
ORMの選定 • npmのsqlite3パッケージは当然使えないが、react-native- sqlite-2に差し替えれば良いのでは? • module-resolverというbabelプラグインがあった! – 設定ファイルでrequire/importの参照を置換できる – https://github.com/tleunen/babel-plugin-module-resolver
ORMの選定 • 候補は2つ • Bookshelf – http://bookshelfjs.org/ – 動的なrequireがあったので、Babelが対応できず… •
Sequelize – http://docs.sequelizejs.com/ – mysqlなど他のDBへの参照も大量にあったが、全部ダミーに差し 替えれば動いた!
参考 : module-resolverの設定 • babelrc
Sequelize導入のメリット • クエリがjsonで表現できる • マイグレーションシステムを導入できた • 簡単にDB処理をユニットテストできるようになった
react-nativeでsequelizeを使うリスク • 通常、ライブラリを公開されていない手段で利用するのは 悪手 • 以下の理由から、今回は使っても良いと判断 – 仮にsequelizeの仕様が変更されても、module-resolverの設定を 書き換えれば大体追従できるはず –
module-resolverのコード量が少なく、いざとなれば自分で作れそ う – DBアクセスをリポジトリクラスに限定しているので、最悪他のDB に移行することも容易