Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
メンテされなくなったCLIをTypeScriptで開発しなおした話
Search
Hiroshi TANABE
April 21, 2025
Technology
38
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
メンテされなくなったCLIをTypeScriptで開発しなおした話
kansai.ts #10 でお話しさせていただいた際のスライドです。
-
https://kansaits.connpass.com/event/348764/
Hiroshi TANABE
April 21, 2025
More Decks by Hiroshi TANABE
See All by Hiroshi TANABE
Dataモードでのデザインパターン/Design Pattern for Data Router/Loader/Action
htnabe
0
100
2025年の振り返りと2026年の展望
htnabe
0
130
Lambda Web Adapter使ってNext.jsのアプリをホストしてみた! / Tried hosting Next.js app with Lambda Web Adapter
htnabe
0
120
Openapi-fetch とOpenapi-typescriptを使ってみた! I tried openapi-fetch and openapi-typescript!
htnabe
0
53
Other Decks in Technology
See All in Technology
知見・人・API・DB・予算 ─ ナイナイ尽くしだった人事データ整備 with dbt、5年間の学び
ken6377
1
110
クラウドファンディング版StackChan 3体(4体)をインタラクティブな体験型作品にして展示もした話 / スタックチャンお誕生日会2026
you
PRO
0
260
「軸足」は 固定しなくていい - 熱量と強みで描く、しなやかなキャリアの形
kakehashi
PRO
1
310
LiDAR SLAMの実装とセンサ融合 ~Lie群からContinuous-Time LIOまで~
naokiakai
1
720
Text-to-SQLをAgentCoreで実現し、生成されるSQLの精度を定量的に評価する
yakumo
2
270
4人目のSREはAgent
tanimuyk
0
330
From Prompt Engineering to Loop Engineering
shibuiwilliam
1
310
『AIに負けない』より『AIと遊ぶ』」〜ワクワクが最強のテスト・QA学習戦略_公開用
odan611
1
250
WebGIS AI Agentの紹介
_shimizu
0
600
アラート調査向けAIエージェントの本番導入とその後/AI Agents for Alert Investigation: Production Deployment and After
taddy_919
1
300
サイバーエージェントにおけるAI推進戦略と変革への取り組み
shotatsuge
0
640
AI・ロボティクスと自動化社会 / AI, Robotics, and the Automated Society
ks91
PRO
0
120
Featured
See All Featured
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.5k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
210
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
New Earth Scene 8
popppiees
3
2.4k
Raft: Consensus for Rubyists
vanstee
141
7.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
3.6k
Agile that works and the tools we love
rasmusluckow
331
22k
How to build a perfect <img>
jonoalderson
1
5.7k
The Cost Of JavaScript in 2023
addyosmani
55
10k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
72
40k
We Have a Design System, Now What?
morganepeng
55
8.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.2k
Transcript
メンテされなくなった CLIをTypeScript で開発しなおした話 © Nabe-cyan(t-pot.me)
• オフィシャル・プライベート共に、今まで基本的に1人での開発がメインだった ので、我流な部分が含まれていると思います • トーク中でも様々なアドバイス・質問はウェルカムです! はじめに
概要 • AlgoliaというWebサイト内検索のSaaSがある • Algolia上にデータをアップロードする際に atomic-algolia という、JSベースのCLIライ ブラリがあったのですが、メンテナンスされなくなっていた • 今回はTS
+ citty, unbuildでこのライブラリを作り直した ◦ algolia-uploader • 技術選定、困った話、今も困っている話 etc. を話したい
Algoliaとは…? • Algoliaについて知っている or 使ったことのある方 ✋ • SaaS型全文検索サービス • サーバーやインフラの構築・運用が不要で、クラウド上で提供されるため、導
入や運用が非常に簡単 • リアルタイム検索と高パフォーマンス • 例:私の個人ブログのサイト内検索機能
メンテされなくなった atomic-algolia • 私も過去使っていた ライブラリ • 必要最低限の機能に絞って 開発されており、非常に素晴 らしい •
5年前の更新を最後に残念な がらストップ (貶める意図は一切ないです)
atomic-algoliaのユースケース https://upload.wikimedia.org/wikipedia/commons/6/69/Algolia-logo.svg JSONファイルの例: { "objectID": "prod_001", "name": "Wireless Headphones", "brand":
"SoundMaster", "price": 129.99, "inStock": true, "rating": 4.5, "description": "Premium sound quality with noise cancellation.", "imageUrl": "https://example.com/images/headphones.jpg" }, • ローカルにあるJSONファイルを Algoliaに登録する • 登録・削除・更新処理は公式の search clientを利用 npm run atomic-algolia
技術選定 • まず新しめのCLI開発事例を探す ◦ これを読んでUnJSが熱いっぽいという事が分かった • フレームワークの学習にそんなに時間を掛けたくない ☞ドキュメントを読めば9割は作り方が分かるフレームワークにしたい ほな citty,
unbuild, jiti の組み合わせで作ってみるか!
詳細 • 言語: TypeScript • パッケージマネージャー: yarn v4 • CLI
Builder: citty • Bundler: unbuild • デバッグ支援(生のTSをそのまま実行できる): jiti • 環境変数の処理: dotenvx • テスト: vitest
困ったこと • `yarn v4`での`Zero-Installs`関連の設定に手間取った • `yarn v4`とVSCode, `devcontainer`の組み合わせで開発してみたところエ ディターごとに追加の設定が必要という落とし穴にはまった(この対応が必 須かどうかまだ微妙に分かっていない)
◦ 別のパッケージマネージャーを使った方が良かった気がしている • 最初に`lodash`を使っていたが、CommonJSでしか動かないことを知らな かった ◦ 結局は es-toolkit を使った
困っていること • 一人で開発しているので、実際にはまだ困っていない • 今のところデバッグする際に実際のAlgoliaのアカウントを使ってデ バッグ用のアプリケーションを用意する必要があり正直手間。。。(´; ω;`)
まとめ・蛇足 • ちょっと学習すれば直観的で楽しく開発できる(特に cittyが優秀) • yarn v4 をがっつり触ったけど、パッケージマネージャとして気軽にはおす すめできないかも ◦
有識者のアドバイス・コメント求む! • 自分でOSSライブラリを開発・保有していると将来的なキャリアでも良いこ とあるかもね! 知らんけど