ユーザーがWebサイトへのリンクをタップしたときにSafariやChromeなどのブラウザではなく、アプリを直接開く仕組みです。似た機能としてcustom URL schemesがありますが、いくつかの点でcustome URL schemesより便利です。詳しくは公式のリファレンスを参照してください。

developer.apple.com

2020-11-11

TypeScript で絶対パスの import をやめた話

こんにちは。亀山です。

趣味で作っている比較的大きなコードベースの Web アプリで最近やったことを紹介します。

いままで TypeScript の import は相対パスではなく絶対パスで記述するようにしていました。相対パスでは import "../../../common/model/foo" のようにものすごく長い文になることや、import する側のファイルを移動するときにパスを修正しないといけないことなどから、絶対パスを使っていました。

絶対パスで記述するには tsconfig.json の paths を使います。次のような設定によって、先程の import 文は import "model/foo" のように書き直せます。また、マッピングの指定によっては import "@common/model/foo" のように書けてカッコいいです。

"paths": {
  "*": ["*", "src/*", "src/main/*", "src/common/*"]
},

しかし、開発環境を VSCode にしてから、import 文を手作業で頑張るのはやめようと考えるようになりました。 VSCode 上でファイルを移動すると自動的に import のパスを修正してくれるので、手作業で修正する必要がなくなったこと、保存時の organizeImports を有効にすれば並びも自動的に整理されて見栄えも悪くないこと、またその設定を workspace などで他の人にもスムーズにシェアできることから、相対パスの問題が解決され、逆に人間の手を加えないほうが良いと考えます。今の workspace の設定は次のようにしています。

"typescript.preferences.importModuleSpecifier": "relative",
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
  "source.organizeImports": true
}

paths を指定すると Jest の moduleNameMapper を書かないといけなかったり、同じファイルを示すのに複数の書き方が存在したり、VSCode のパスの自動修正がたまに効かないといった問題がありました。moduleNameMapper の問題は、かつては拙作の tsconfig-paths-jest、今では ts-jest/utils の pathsToModuleNameMapper によってある程度簡単に解決できるのですが、なるべく設定項目は減らしたいし、コンパイラとの格闘は避けたいです。

VSCode で開発環境の設定を揃えられることによって、心配事が減ってコーディングに集中できて嬉しいですね。以上、小ネタでした。

2020-10-30

ラボこうふで作業をしています

こんにちは、id:numanuma08です。私は今山梨県甲府市を拠点として仕事をしています。引っ越しの経緯などは、個人ブログにまとめましたが主に子育てとアウトドア活動を両立するためです。

numa08.hateblo.jp

甲府市と一言で言ってもとても広く、私の家から子どもを預けている保育園までは片道約10kmあります。引っ越してしばらくは家→保育園→家で仕事→保育園→家のように1日家と保育園を2往復する生活をしていました。しかし、毎日40km近い距離の運転は体力的にも精神的にも疲労してしまう上に、ガソリン代などの観点からも経済的とは言えない状況でした。そこで今では保育園からほど近いコワーキングスペース「ラボこうふ」で仕事をしています。

www.labo-kofu.space