よいDXに向けてRecomposeのHOCをReact Hooksに置き換えるEnglish version is here. どうもTAKUYAです。InkdropというMarkdownノートアプリを1人で作っています。そのモバイル版はReact Nativeで組まれています。最近コードベースをリファクタリングして、RecomposeからReact Hooksに乗り換えました。本稿ではその作業の際に発見したコツなどをシェアしたいと思います。 HOC多用はメンテナンス性が低くなるRecomposeとはHOC(Higher-order components)で効率よくStateless functional componentsベースのReactアプリを組むための便利関数ライブラリです。作者はAndrew Clarkです。例えるなら、React版Lodashみたいな感じです。このライブラリの

１人でデスクトップとモバイル両対応でデータ同期するアプリをどうやって作ったか5プラットフォームで動くSaaSを個人で開発するためにやったことこんにちは、個人アプリ作家のTAKUYAです。InkdropというクロスプラットフォームなMarkdownノートアプリを１人で開発しています。このアプリはmacOS、Linux、Windows、Android、iOSで動作します。ご存知かもしれませんが、この5プラットフォームにアプリを対応させるのは簡単ではありません。しかしながらパワフルなフレームワークを活用すれば、それも不可能ではありません。それらに頼るだけでなく、プロジェクトを持続可能に保つための開発戦略も必要となります。本記事では、僕がこれまでどのようにして開発して来たのかシェアしたいと思います。 あなたは１人で開発しているのではないクロスプラットフォームなアプリの開発は、往々にして多くの予測不

(前回の続き: Atomコード再利用に向けた最新版の仕様調査) 個人で作っているInkdropというMarkdownノートアプリの改良に向けて、Atomのコードを再利用したい。 せっかく内部仕様を理解したし、いっそのことAtomをベースにアプリを組み直したら面白いんじゃないか？と思い立って、Atomを改造してReactが動くようにした。 GitHubにソースを公開したので、手っ取り早く手元で試したい人はそちらをどうぞ： craftzdog/atom-react-app: An empty React app based on Atom Editor 変更部分のdiff 誰向けなのか： 今から新しいアプリを作ろうとしていて、Atomの高度なパッケージ拡張機能やテーマ機能を組み込みたい、あるいは真似したいという人は覗いてみると参考になるかもしれない。 動かし方は公式ドキュメントと同じ: 改造し

English version available here: dev.to React NativeアプリはJavaScriptで組まれるから、１つのスレッドしかない。 だからCPUヘビーなタスクを実行するとUIをブロックしてしまう。例えばインデクシングとか。 バックグラウンドでJSを実行したければ、react-native-workersみたいなネイティブモジュールを使う必要がある。これはWeb WorkerみたいなAPIを提供してくれるモジュール。でも、単純なコードを実行したいだけならオーバースペック感がある。あと、むやみやたらにネイティブモジュールを増やしたくない。アプリが複雑になるから。expoアプリを作っている人はそもそもネイティブモジュールが使えない。 で、気付いたんだけど、WebViewを使えばいいじゃないか、と。 WebViewには injectJavaScript とい

最近neovimに乗り換えてから、javascriptの編集中にたまに固まる現象が発生して困っていた。 再現条件をいろいろ試したらどうやらvim-javascriptのインデント処理で無限ループしている様子。 という訳でvimの設定を見直してみることにした。 要件としては、インデントはPrettierでやるので、シンタックスハイライトだけ綺麗にやってくれればいい。 調べたら tigris.nvimというプラグインを見つけた。 これはnodeベースのプラグインで、Babylonを使って構文解析をしてハイライトを実現している。 Babylonはbabelプロジェクトの一部で、JSX, Flow, Typescriptを標準でサポートしている。 だからvim-javascriptのようにvimコミュニティが必死で新たな構文のサポートを追いかける必要がない。 ソースコードを覗いたらシンプルな実装だ

eslintは --fix オプション付きで実行するとコード整形してくれる。 ここ1年強、 standardjs を好んで使っていて、そのルールに従って整形していた。 最近Prettierを知ったので早速導入してみたら、以下の理由ですぐに気に入った。 軽い 行が長くなった時でもいい感じに改行してくれる 設定でstandardjsっぽく調整できる Prettierのいいところはコード整形に特化している点で、コードのクオリティには一切感知しないところ。例えば no-unused-varsとかno-extra-bindとか。 standardjsはLinterルールセットとしていろいろ入っているから結構カオス感がある。 コードのクオリティは plugin:flowtype/recommended とか plugin:react/recommended に任せれば充分。 現状の設定 プロジェクトに