よい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みたいな感じです。このライブラリの開発は2018年12月4日を最後に止まっています。なぜなら彼がReactのチー
１人でデスクトップとモバイル両方で動いて同期するアプリをどうやって作ったか
こんにちは、個人アプリ作家のTAKUYAです。InkdropというクロスプラットフォームなMarkdownノートアプリを１人で開発しています。このアプリはmacOS、Linux、Windows、Android、iOSで動作します。ご存知かもしれませんが、この5プラットフォームにアプリを対応させるのは簡単ではありません。しかしながらパワフルなフレームワークを活用すれば、それも不可能ではありません。それらに頼るだけでなく、プロジェクトを持続可能に保つための開発戦略も必要となります。本記事では、僕がこれまでどのようにして開発して来たのかシェアしたいと思います。 あなたは１人で開発しているのではないクロスプラットフォームなアプリの開発は、往々にして多くの予測不能かつ再現不能な問題を伴います。自分の環境では正しく動いていた機能が、他の環境では思うように動かない。例えば、最近僕もそういう問題を経験しま
Atom Editorを改造してReactアプリを作る手順 - Qiita
(前回の続き: Atomコード再利用に向けた最新版の仕様調査) 個人で作っているInkdropというMarkdownノートアプリの改良に向けて、Atomのコードを再利用したい。 せっかく内部仕様を理解したし、いっそのことAtomをベースにアプリを組み直したら面白いんじゃないか？と思い立って、Atomを改造してReactが動くようにした。 GitHubにソースを公開したので、手っ取り早く手元で試したい人はそちらをどうぞ： craftzdog/atom-react-app: An empty React app based on Atom Editor 変更部分のdiff 誰向けなのか： 今から新しいアプリを作ろうとしていて、Atomの高度なパッケージ拡張機能やテーマ機能を組み込みたい、あるいは真似したいという人は覗いてみると参考になるかもしれない。 動かし方は公式ドキュメントと同じ: $ g
React Native製アプリのクオリティを上げるために工夫した事
Illustration by unDrawInkdropというMarkdownノートアプリを一人で作っているTAKUYAです。最近、React Nativeを使って、iOS版とAndroid版の新しいバージョンをリリースしました。React Nativeは、JavaScriptとReactを使ってクロスプラットフォームなモバイルアプリが開発できるフレームワークです。 どうすればReact Nativeでハイクオリティなアプリが作れるのか、今回の開発を通して多くのことを学びました。本稿では、よりよいアプリを作るために自分が工夫したことをシェアします。既にReact Nativeでアプリを作っている方も、これから作ろうと思っている方も参考になるかと思います。 概要OSSライブラリは慎重に選ぶネイティブ拡張モジュールは出来るだけ使わないUIテーマの対応タブレットの対応動作を軽く保つ違和感のない
React Nativeで手軽に別スレッドでコードを実行する方法 - 丁寧に手を抜く
English version available here: dev.to React NativeアプリはJavaScriptで組まれるから、１つのスレッドしかない。 だからCPUヘビーなタスクを実行するとUIをブロックしてしまう。例えばインデクシングとか。 バックグラウンドでJSを実行したければ、react-native-workersみたいなネイティブモジュールを使う必要がある。これはWeb WorkerみたいなAPIを提供してくれるモジュール。でも、単純なコードを実行したいだけならオーバースペック感がある。あと、むやみやたらにネイティブモジュールを増やしたくない。アプリが複雑になるから。expoアプリを作っている人はそもそもネイティブモジュールが使えない。 で、気付いたんだけど、WebViewを使えばいいじゃないか、と。 WebViewには injectJavaScript とい
vim-javascript から tigris.nvim に乗り換えたら快適だった - 丁寧に手を抜く
最近neovimに乗り換えてから、javascriptの編集中にたまに固まる現象が発生して困っていた。 再現条件をいろいろ試したらどうやらvim-javascriptのインデント処理で無限ループしている様子。 という訳でvimの設定を見直してみることにした。 要件としては、インデントはPrettierでやるので、シンタックスハイライトだけ綺麗にやってくれればいい。 調べたら tigris.nvimというプラグインを見つけた。 これはnodeベースのプラグインで、Babylonを使って構文解析をしてハイライトを実現している。 Babylonはbabelプロジェクトの一部で、JSX, Flow, Typescriptを標準でサポートしている。 だからvim-javascriptのようにvimコミュニティが必死で新たな構文のサポートを追いかける必要がない。 ソースコードを覗いたらシンプルな実装だ
コード整形をStandardJSからPrettierに乗り換えたら捗った - 丁寧に手を抜く
eslintは --fix オプション付きで実行するとコード整形してくれる。 ここ1年強、 standardjs を好んで使っていて、そのルールに従って整形していた。 最近Prettierを知ったので早速導入してみたら、以下の理由ですぐに気に入った。 軽い 行が長くなった時でもいい感じに改行してくれる 設定でstandardjsっぽく調整できる Prettierのいいところはコード整形に特化している点で、コードのクオリティには一切感知しないところ。例えば no-unused-varsとかno-extra-bindとか。 standardjsはLinterルールセットとしていろいろ入っているから結構カオス感がある。 コードのクオリティは plugin:flowtype/recommended とか plugin:react/recommended に任せれば充分。 現状の設定 プロジェクトに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
