［追記］SpotifyじゃなくてShopify engineering.shopify.com ShopifyがネイティブからReactNativeへ移行するとのことで界隈が盛り上がってます。 ここまでの企業がネイティブアプリをReactNativeに作り変えるのは初めてじゃないでしょうか。 移行の理由とし…
Redux, Redux-Thunkを使った時のActionの型導出 目的は const reducer = (state: State = initial, action: Action): State => { ... } の第2引数のActionの型をできるだけ簡単に導出することです。 具体的にはDucksパターンを用いた設計でActionCreatorから…
yurutto-it.connpass.com 「ReactNative枠よろしく！」 と言われたのででます。 珍しくアプリの話する会なので仲間を探してきます。 それに向けてFlutterもいじくり回してる途中。
www.dartlang.org Flutterのβ版発表やDart2の発表で話題のDart。 勉強したことがなかったのですが、公式のドキュメンが結構しっかりしており、その中の「A Tour of the Dart Language」という基礎を学ぶチュートリアルがあったのでやってみました。 www.dart…
React Native Expo from Ryosuke Hara www.slideshare.net FukuokaJSというイベントでLTしてきました fukuokajs.connpass.com やっぱ福岡だとReactもReactNativeも全然やってるひといなくて非常に疎外感がありますが、頑張っております。 ネタとしてはいくつ…
const merge = (newList, oldList, key) => Object.values([...oldList, ...newList].reduce((a, b) => { a[b[key]] = b; return a; }, {})); const l1 = [ { id: '1', value: 'l1v1' }, { id: '2', value: 'l1v2' }, { id: '3', value: 'l1v3' }, ]; const …
Proton Native - React Native for the desktop, cross compatible Reactを使ってデスクトップアプリが作れるライブラリが公開されていました。 なんでも Create native desktop applications through a React syntax, on all platforms Same syntax as Reac…
ブログやらLTやらで少しづつアウトプット出してて身に起きたことです。 名前を覚えられる 前にReact Nativeについての発表を何回かしたのですが、同僚がある勉強会（私は行ってないです）に行ったときに名刺交換で 「React Nativeの〇〇さんがいる会社ですね…
www.muji.net これがマジで美味い。 美味すぎる。 今日大名店のやつ買い占めてきた。 2つ以上で10％OFFだったので。 1つ100円なんで買ってみてください。
前回の記事はJavaScriptで a == 1 && a == 2 && a == 3が成り立つにはどうすれば良いか、という内容でしたが元記事のブコメに プロパティある言語（C#, Swiftなど）ならトリッキーなことしなくても普通にできちゃう とりあえずKotlinのDelegation。 一番楽で…
stackoverflow.com これ、よく思いつくなーと感心しました。 普段等価演算==使うことないのですが、==の場合だと上記の回答のようなことができるようです。 valueOfでも大丈夫だって書いてあったのですが、toStringとvalueOfどっちも定義されている場合、toS…
Nextjsにはデフォルトでルーティング機能があります。 [root_directory]/pages/のディレクトリ構成がそのままルーティングになります。 しかし、RESTfulなURIにする場合はサーバーの設定をカスタマイズして手動でしなければなりません。 そのような動的なル…
react-nativeでFirebaseを簡単に使えるようになるreact-native-firebaseというライブラリがあります。 rnfirebase.io ですが、react-native v0.51.0ではiOSの設定がドキュメント通りでは動きません。 そのワークアラウンドについて書いておきます。 RNFireba…
会社のブログにて、Kotlin x ReactNativeに挑戦した結果を書きました。 anect.hatenablog.com KotlinJS面白い。 まだまだ発展途上なので今後に期待。
先日Kotlin1.2がリリースされました。 blog.jetbrains.com バックエンド、Webフロントエンド、Androidでコードの共通化ができるようになったとこのことです。 今回はその機能は触らないんですが、前にリリースされたKotlinJSとKotlinNativeには興味がありま…
github.com Next.jsというReactアプリケーションをデフォルトでServerSideRenderingしてくれるライブラリがあります。 これをFirebaseHosting上にFirebaseFunctionsを使って構築することで、無料でサーバレスSPAを作る事ができます。 Next.jsをclone Next.js…
PC側のHostsを変更 変更してください。 ローカルPCにプロキシサーバを立てる なんでも良いです。 node作りたい、と思っていましたが先駆者がいらっしゃったのでありがたく使わせていただきました。 qiita.com ペッと貼って起動 % node proxy-server.js http …
github.com 何も言わずに入れて欲しい。 react-native-debuggerはReact Native公式のChrome Debuggerを元に作られたデバッグツールです。 Reduxを利用している場合に力を発揮します。 というかRedux使ってないと旨味無いかもです… でもRedux入れてるなら絶対…
ただ自分が使っててコレないと不便ってやつです。 advanced-new-file marketplace.visualstudio.com ファイルの新規作成にパスを先に指定して作成できます。 デフォルトだと先にファイル作成して保存時にGUIで指定なのですごく面倒なので。 ⌘+nに割り当てる…
Inputフォームに続き、マテリアルデザインのRippleエフェクトをReact NativeのJSのみで実装してみました。 コード transformの方で最初実装してたのですが、タブを連続でタップすると表示が上手く行かないことがあったのでこちらで実装しました。 iOS Android
install-missing-android-toolsを使っていると、SDKがアップデートされた時に * What went wrong: A problem occurred configuring project ':app'. > You have not accepted the license agreements of the following SDK components: [Android SDK Platfor…
gist.github.com AndroidとiOSでInputTextのスタイルを合わせるのが面倒だなと思ってました。 iOSもマテリアルデザインに寄せてしまうのは最近だとアリだと思っているのでちょっと試しに作りました。 ざっと30分くらいで作ったので本物の機能は足りてないで…
facebook.github.io iOSの方はちゃんとドキュメントがあるのに何でAndroidは無いんですかね… といってもやり方は簡単です。 MainActivityでcreateReactActivityDelegateをオーバーライドして ReactActivityDelegateのgetLaunchOptionsをオーバーライドするだ…
Bitriseのビルド待っている間に熱盛り絵文字を投稿すると返信してくれるようにした。 笑ってもらえたので良かった（会社のSlack）
React Nativeで個人開発アプリを開発中なのですが、ちょうどアニメーション周りを結構調べていたので試しに簡単なチュートリアルを作ってみました。 Component ほとんどAnimatedを使いました。コンポーネントもデフォルトのAnimated.View, Text, Imageのみで…
React Nativeでグラフを描くにはどうしたらいいのかと調べましたら、 React Native内にReact Native ARTというライブラリが在るのを知りました。 ドキュメントにも書いてないですが、開発はされているようです。 react-native/ReactNativeART.js at 0.48-sta…
ServiceWorker勉強中です。 saburesan.hatenablog.com これやった時に通知の表記のデバッグ時に何変えても表記が上手くいかなくて悩んだんですが、 結局ServiceWorkerのキャッシュのせいでファイル更新しても上手く更新されなかったようです。 Chromeでデバ…
仕事でReact SPAにPush通知を実装することになったので備忘録。 Firebase Cloud Messaging（以下FCM）をWebにやるにはHttpsに対応のサイトじゃないとだめなので、Firebase Hostingで構築するところまでを記載します。 Firebaseの説明はありません。 Firebase…
github.com Breaking changes Android Remove unused createJSModules calls (ce6fb33, 53d5504) - @javache ReactPackageというinterfaceからcreateJSModulesが削除されました。 これ結構ヤバイ変更だと思っています。 Androidのネイティブにアクセスするラ…
twitterのタイムラインに 「runとalsoの使い所分からん」 というツイートが流れてきたので。 Kotlinには便利な拡張関数があるのですが、それぞれが微妙に違うので用途を結構迷います。 そこでrun, alsoに加えよく使うであろうletとapplyの4つの特徴から用途…
