そーす

I'm a programmer in Fukuoka. Please contact me saubre.app[at]gmail.com or Twitter DM.

オブジェクトの配列の重複削除

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

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の〇〇さんがいる会社ですね…

TypeScriptでstyled-componentsに独自のPropsを渡したい

www.styled-components.com 最近はStyled-Component使ってます。 もともとstyleだけを分ける方法は使って無くて、 // Styleで分ける方法 const styles = { title: { fontSize: '2rem', color: '#333', }, }; export = ({ children }: Props) => ( <main> <h1 style={styles.title}>{children}</h1></main>…

無印のクラックプレッツェルチョコレートが美味い

www.muji.net これがマジで美味い。 美味すぎる。 今日大名店のやつ買い占めてきた。 2つ以上で10%OFFだったので。 1つ100円なんで買ってみてください。

Kotlinでa == 1 && a == 2 && a == 3

前回の記事はJavaScriptで a == 1 && a == 2 && a == 3が成り立つにはどうすれば良いか、という内容でしたが元記事のブコメに プロパティある言語(C#, Swiftなど)ならトリッキーなことしなくても普通にできちゃう とりあえずKotlinのDelegation。 一番楽で…

JavaScriptの比較演算子の話

stackoverflow.com これ、よく思いつくなーと感心しました。 普段等価演算==使うことないのですが、==の場合だと上記の回答のようなことができるようです。 valueOfでも大丈夫だって書いてあったのですが、toStringとvalueOfどっちも定義されている場合、toS…

Next.jsに動的ルーティングを追加する「next-routes」

Nextjsにはデフォルトでルーティング機能があります。 [root_directory]/pages/のディレクトリ構成がそのままルーティングになります。 しかし、RESTfulなURIにする場合はサーバーの設定をカスタマイズして手動でしなければなりません。 そのような動的なル…

react-native-firebaseのiOSのワークアラウンド

react-nativeでFirebaseを簡単に使えるようになるreact-native-firebaseというライブラリがあります。 rnfirebase.io ですが、react-native v0.51.0ではiOSの設定がドキュメント通りでは動きません。 そのワークアラウンドについて書いておきます。 RNFireba…

KotlinJSでReactNative書くのは今のところ無理っぽい

会社のブログにて、Kotlin x ReactNativeに挑戦した結果を書きました。 anect.hatenablog.com KotlinJS面白い。 まだまだ発展途上なので今後に期待。

KotlinJSを動かす

先日Kotlin1.2がリリースされました。 blog.jetbrains.com バックエンド、Webフロントエンド、Androidでコードの共通化ができるようになったとこのことです。 今回はその機能は触らないんですが、前にリリースされたKotlinJSとKotlinNativeには興味がありま…

Next.js+FirebaseHostingで構築するサーバレスWebアプリケーション

github.com Next.jsというReactアプリケーションをデフォルトでServerSideRenderingしてくれるライブラリがあります。 これをFirebaseHosting上にFirebaseFunctionsを使って構築することで、無料でサーバレスSPAを作る事ができます。 Next.jsをclone Next.js…

AndroidにHostsを書き換えずにPCのHostsを反映させる

PC側のHostsを変更 変更してください。 ローカルPCにプロキシサーバを立てる なんでも良いです。 node作りたい、と思っていましたが先駆者がいらっしゃったのでありがたく使わせていただきました。 qiita.com ペッと貼って起動 % node proxy-server.js http …

React Native Debuggerがすごすぎて笑ってしまった

github.com 何も言わずに入れて欲しい。 react-native-debuggerはReact Native公式のChrome Debuggerを元に作られたデバッグツールです。 Reduxを利用している場合に力を発揮します。 というかRedux使ってないと旨味無いかもです… でもRedux入れてるなら絶対…

VisualStudioCodeに入れておくと便利なプラグイン3選

ただ自分が使っててコレないと不便ってやつです。 advanced-new-file marketplace.visualstudio.com ファイルの新規作成にパスを先に指定して作成できます。 デフォルトだと先にファイル作成して保存時にGUIで指定なのですごく面倒なので。 ⌘+nに割り当てる…

React NativeでマテリアルデザインのRippleエフェクトを実装する

Inputフォームに続き、マテリアルデザインのRippleエフェクトをReact NativeのJSのみで実装してみました。 コード transformの方で最初実装してたのですが、タブを連続でタップすると表示が上手く行かないことがあったのでこちらで実装しました。 iOS Android

BitriseCIでAndroidSDKのライセンスエラー

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…

React Nativeでマテリアルデザインのテキスト入力フォームを作った

gist.github.com AndroidとiOSでInputTextのスタイルを合わせるのが面倒だなと思ってました。 iOSもマテリアルデザインに寄せてしまうのは最近だとアリだと思っているのでちょっと試しに作りました。 ざっと30分くらいで作ったので本物の機能は足りてないで…

React Nativeで起動時にJS側にデータを渡す

facebook.github.io iOSの方はちゃんとドキュメントがあるのに何でAndroidは無いんですかね… といってもやり方は簡単です。 MainActivityでcreateReactActivityDelegateをオーバーライドして ReactActivityDelegateのgetLaunchOptionsをオーバーライドするだ…

熱盛りSlackBot

Bitriseのビルド待っている間に熱盛り絵文字を投稿すると返信してくれるようにした。 笑ってもらえたので良かった(会社のSlack)

React Nativeのアニメーションで簡単なチュートリアル画面を作った

React Nativeで個人開発アプリを開発中なのですが、ちょうどアニメーション周りを結構調べていたので試しに簡単なチュートリアルを作ってみました。 Component ほとんどAnimatedを使いました。コンポーネントもデフォルトのAnimated.View, Text, Imageのみで…

React Native ARTで遊ぶ

React Nativeでグラフを描くにはどうしたらいいのかと調べましたら、 React Native内にReact Native ARTというライブラリが在るのを知りました。 ドキュメントにも書いてないですが、開発はされているようです。 react-native/ReactNativeART.js at 0.48-sta…

ServiceWorkerのデバッグ時にはキャッシュを

ServiceWorker勉強中です。 saburesan.hatenablog.com これやった時に通知の表記のデバッグ時に何変えても表記が上手くいかなくて悩んだんですが、 結局ServiceWorkerのキャッシュのせいでファイル更新しても上手く更新されなかったようです。 Chromeでデバ…

Firebase Cloud Messagingを使ってWebサイトでPush通知を受け取る

仕事でReact SPAにPush通知を実装することになったので備忘録。 Firebase Cloud Messaging(以下FCM)をWebにやるにはHttpsに対応のサイトじゃないとだめなので、Firebase Hostingで構築するところまでを記載します。 Firebaseの説明はありません。 Firebase…

React Native version 0.47.0 is out

github.com Breaking changes Android Remove unused createJSModules calls (ce6fb33, 53d5504) - @javache ReactPackageというinterfaceからcreateJSModulesが削除されました。 これ結構ヤバイ変更だと思っています。 Androidのネイティブにアクセスするラ…

Kotlinのrunとalsoの使い所

twitterのタイムラインに 「runとalsoの使い所分からん」 というツイートが流れてきたので。 Kotlinには便利な拡張関数があるのですが、それぞれが微妙に違うので用途を結構迷います。 そこでrun, alsoに加えよく使うであろうletとapplyの4つの特徴から用途…

「新しい技術の導入に関する勉強会」で発表してきました。

React Nativeで始めるアプリ開発 from Ryosuke Hara www.slideshare.net SlideShareにアップロードしてます。 Keynoteで作ったのをPowerPointに変換して上げてるので若干レイアウト崩れてます(修正する元気無い) React Nativeに関する簡単な紹介です。…

AndroidのカスタムOSが使われている端末でDevメニューが出ない時の対処

もー、クソん。 Oppo。 KeyEvent.KEYCODE_MENU(82番) がシステム側で受け取られててアプリまで来ない。 ちなみにOppoはシェイクしてもDevモード出ない。 しかたなく他の空いているキーコードをアプリで受け取って書き換えることに… 処理は簡単で、ReactAct…

react-reduxのmapStateToPropsとmapDispatchToPropsは必要なのか

ReactNativeでアプリを作る時はReduxを使っていて、ReduxのStoreとReactのComponentをBindingしてくれるreact-reduxが便利なので使っています。 github.com react-reduxが提供するconnectというStoreとComponentをBindingする関数が在るのですが、 connect( …

「新しい技術導入に関する勉強会」に登壇します。

宣伝です。 話します、よければどうぞーー。新しい技術導入に関する勉強会 https://t.co/g3BkQVamzh— Ryohlan (@Ryohlan) 2017年6月5日 「ReactNativeで始めるアプリ開発(仮)」という内容で登壇する予定です。 ReactNativeを触ったことがないWebエンジニア…