Frontend Engineer に関連するフィード

Shinobi

Toshihiro Takagi — Fri, 06 Mar 2026 12:41:24 GMT

Shinobiとは Shinobiは、botなしで使えるAIミーティングノートです。（macOS向け）会議を録音するだけで - 文字起こし - 要約 - ネクストアクションを自動でまとめます。 ZoomやGoogle Meetにbotを参加させる必要はありません。チームへの導入も不要です。自分専用の議事録担当のように使えるAIミーティングノートです。 ![画像の説明を入れてください](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/a191b137-5043-4210-ba43-b730e425aec9/7252d171-6ef3-4def-a4f1-ce66d8c8fac6.jpg) なぜ作ったか既存ツールへの不満多くのツールでは、ZoomやMeetの会議にbotが参加します。正直、あれが苦手でした。 - 監視されているような感覚がある - 会話がSlackやメールに共有される - チーム全体に導入が必要になるもっと気軽に、自分だけで使えるものが欲しい。そう思ったのがきっかけです。生成されるネクストアクションに「なぜ」がない多くのツールはネクストアクション（TODO）を生成します。一見便利ですが、実際に仕事を進めるときに重要なのは「なぜそれをやるのか」という背景です。背景がないネクストアクションは、あとから見返したときに、文脈が思い出せないことがあります。会議では - 何をやるか - なぜやるかこの2つがセットで決まるはずです。 Shinobiではネクストアクションと同時に「決定の背景」もまとめます。複数プロジェクトで話したことを忘れる複数のプロジェクトに関わっていると、 - 先週の会議で何を話したか - どんな結論だったか - なぜその決定になったのかを忘れてしまうことがあります。他のAIミーティングノートも試しましたが - 設定が複雑 - 日本語が不自然 - 料金が高いなどの理由で、使い続けたいと思えるものがありませんでした。そこで、ダウンロードしてすぐ使える背景までまとめてくれるAIミーティングノートとしてShinobiを作りました。特徴設定不要 - チーム設定や複雑なセットアップは不要です。 - ダウンロードしてすぐに使えます。 botフリー - ZoomやMeetにbotを参加させる必要はありません。 - 自分のPC上で録音・文字起こし・要約を行います。 ![画像の説明を入れてください](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/a191b137-5043-4210-ba43-b730e425aec9/f1f250a7-959f-45ef-b7d5-cd31e81127ec.jpg) ネクストアクション - 「何をやるか」だけでなく「なぜそれをやるのか」という背景もまとめます。 ![画像の説明を入れてください](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/a191b137-5043-4210-ba43-b730e425aec9/a8bfa4a1-bc24-42f9-85b3-3bbc8fccae6d.jpg) 対象ユーザー - 会議の決定の背景まで残しておきたいPM / エンジニア - 会議にbotを参加させたくない人 - 複数プロジェクトを担当している人 - セットアップなしで使えるミーティングノートが欲しい人

本番DBも怖くない。読み取り専用DBビューア「Miruco」の使い方

kazuma sakata — Tue, 03 Mar 2026 12:21:02 GMT

本番DBも怖くない。読み取り専用DBビューア「Miruco」の使い方はじめに「ちょっとテーブルの中身を確認したい」——そんな場面、エンジニアなら日常茶飯事です。でも毎回ターミナルを開いてSQLを打つのは面倒だし、GUIツールを本番DBに繋ぐのはなんとなく怖い。誰かが誤ってやを実行してしまうリスクも0ではない。 Miruco はそんな悩みを解決する、macOS 向けの読み取り専用DBビューアです。 --- Miruco とは？ Miruco は PostgreSQL / MySQL に接続して、テーブルの閲覧・行データのプレビュー・ER図の生成ができるデスクトップアプリです。最大の特徴は「書き込みが一切できない」こと。SELECT と informationschema の参照しか行わないため、本番DBに接続しても誤操作の心配がありません。 - macOS Apple Silicon (arm64) 対応 - Free プランは永久無料（DB接続1件まで） - Pro プランは ¥1,980 の買い切り（接続数無制限） --- 主な機能 1. テーブル一覧・行データのプレビュー接続を登録するだけで、そのDBに存在するすべてのテーブルが左サイドバーに表示されます。テーブルをクリックすれば行データをページネーション付きで閲覧できます。 ![画像の説明を入れてください](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/ff61f156-293b-4a59-9716-f5ff7a2b3144/fd7952bb-8e79-458a-8051-1dc86f901c18.png) SQLを書く必要はありません。 2. ER図の自動生成テーブル間の外部キー制約を読み取り、ER図をワンクリックで生成します。新しいプロジェクトに参画したときや、既存DBの全体像を把握したいときに便利です。 ![画像の説明を入れてください](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/ff61f156-293b-4a59-9716-f5ff7a2b3144/c4ce506a-ea6e-4853-9fe4-51e9f85cd46a.png) ER図３. ER図の自動生成テーブル数が多い場合は絞り込み機能で表示するテーブルを選択できます。たとえば「ユーザー系のテーブルだけ見たい」「注文フローに関係するテーブルだけ整理したい」といった用途で、全体の中から必要な部分だけに集中できます。 ![画像の説明を入れてください](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/ff61f156-293b-4a59-9716-f5ff7a2b3144/0ab2efe9-bca5-4879-8183-3c52c5d965f3.png) テーブルが多い場合は絞り込み機能で表示するテーブルを選択できます。４. カラムへのエイリアス設定、などの英語カラム名に日本語のエイリアスを設定できます。ビジネスサイドのメンバーと画面を共有しながらデータを確認する場面で役立ちます。 ![画像の説明を入れてください](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/ff61f156-293b-4a59-9716-f5ff7a2b3144/182c77d5-bc06-4922-a44f-505132967c20.png) ５. 接続情報のローカル暗号化保存ホスト名・ポート・ユーザー名・パスワードなどの接続情報は、デバイスのローカルに AES-256-GCM で暗号化して保存されます。外部サーバーには一切送信されません。クラウド同期ツールにDB接続情報を預けることへの不安がある方でも、安心して使えます。 --- こんな人におすすめ | ユースケース | 説明 | |-------------|------| | 本番DBの確認作業 | 読み取り専用なので誤操作ゼロ。安心して本番に繋げる | | 新規参画時のDB把握 | ER図でテーブル構造を素早く俯瞰できる | | チームでのデータ確認 | エイリアス設定で非エンジニアにも見せやすいビューを作れる | | 複数プロジェクトの管理 | 接続をまとめて登録してサイドバーから切り替えるだけ | --- 既存ツールとの違い | | Miruco | DBeaver | TablePlus | |--|--------|---------|-----------| | 書き込み操作 | ❌ 不可（安全） | ✅ 可能 | ✅ 可能 | | ER図生成 | ✅ | ✅ | ❌ | | 無料プラン | ✅ | ✅ | 限定的 | | 買い切り | ✅ ¥1,980 | ✅ | ✅ $59〜 | | macOS最適化 | ✅ ネイティブ | △ Java製 | ✅ | | 接続情報の保管 | ローカル完結 | ローカル | ローカル | Miruco は「誤操作しない」ことを設計の中心に置いています。高機能なSQLエディタが欲しい場合は DBeaver や TablePlus が適していますが、「確認するだけ」の用途なら Miruco のシンプルさが快適です。 --- 使い方インストール 1. [公式サイト](https://miruco.jp) から DMG ファイルをダウンロード 2. アプリを Applications フォルダに移動 3. 起動する（初回は右クリック → 開く）接続を登録する 1. 左サイドバーの「＋新規接続」をクリック 2. ホスト・ポート・DB名・ユーザー名・パスワードを入力 3. 「接続テスト」で疎通確認 → 「保存」テーブルを閲覧する接続を選択 → 左サイドバーにテーブル一覧が表示 → テーブルをクリックで行データをプレビュー ER図を見る接続ページの「ER図」タブを開くだけで自動生成されます。 --- 料金 | プラン | 価格 | DB接続数 | |--------|------|---------| | Free | 無料 | 1件まで | | Pro | ¥1,980（買い切り） | 無制限 | サブスクリプションではなく買い切りなので、一度購入すれば追加費用は発生しません。 --- まとめ - 本番DBに安心して接続できる読み取り専用ビューア - テーブル閲覧・ER図・エイリアス設定がシンプルなUIで使える - 接続情報はローカル暗号化、外部送信なし - Free プランで今すぐ試せる「SQLを書かずにDBの中身を見たい」「本番DBの確認を安全にしたい」という方は、ぜひ試してみてください。 👉 [Miruco を無料でダウンロードする](https://miruco.jp)

World Explorer - 3D世界地図地球儀アプリ

Yudai Shiratori — Sat, 31 Jan 2026 21:27:19 GMT

World Explorer - 3D地球儀で世界を探索「この国、どこにあるんだっけ？」ニュースで聞いた国、旅行で気になった国。名前は知ってるけど場所がピンとこない——そんな経験、ありませんか？ World Explorer は、ブラウザで動く3D地球儀アプリです。地球をドラッグでグリグリ回して、気になる国をクリックするだけ。国の情報がその場でパッと表示されます。できること - 地球儀を自由に回せる — ドラッグで好きな方向に回転。平面の地図ではわかりにくい国同士の位置関係や距離感が、そのまま掴めます - 国をクリックで即確認 — タップするだけで国の情報を表示。「ここ何の国？」がすぐ解決します - インストール不要 — URLを開くだけ。スマホでもPCでもすぐ使えますこんな方におすすめ - ニュースで聞いた国の場所をサッと確認したい人 - 旅行先やその周辺国を地球儀で眺めておきたい人 - テスト前に国の位置を感覚で覚えたい学生さん ![画像の説明を入れてください](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/cc989ab6-6f1e-4910-811b-6a4319ea98ee/8dbefa63-5743-4c84-94d5-878adaa9699b.png)

Bundlecase

中村一輝 — Sat, 24 Jan 2026 23:59:38 GMT

Bundlecaseとは Bundlecaseは、プロダクトを設計・運営する人向けの「プロダクト設計の観測・整理プラットフォーム」です。世界中のプロダクトデータを収集・整理し、価格設計やプラン構成などの実例を観測できる環境と、プロダクト開発の「次にやること」を整理するチェックリストを提供します。主な特徴 - 実在プロダクトデータの蓄積: 公開情報をもとに、価格・プラン・課金形態などの構造データを継続的に整理 - インサイトの提供: よくある通説と実際のデータのギャップを、観測結果として提示 - チェックリスト: プロダクト開発の過程で考えるポイントをテーマごとにまとめ、進捗を記録できるこんな方におすすめ - プロダクト開発者 / 起業家: 価格やプラン設計で迷っている、プロダクト開発で次に何をすればいいか整理したい - SaaS・Webサービス運営者: 他社事例を構造的に比較したい - プロダクトマネージャー / デザイナー: 設計判断の裏付けとなる材料がほしい主要機能チェックリストプロダクト開発の過程で考えておきたいポイントを、テーマごとにまとめたチェックリストです。ログインなしでも利用でき、ログインすると進捗を保存してプロダクトごとに管理できます。プロダクトデータベース世界中のプロダクトを対象に、価格公開有無、無料プラン、トライアル、課金体系などの構造データを整理・閲覧できます。 Insights（インサイト）集めたデータをもとに、価格表現やプラン構成などの傾向を可視化し、「ひとつの見方」として提示します。導入効果 - 設計判断の材料が増える: 勘や慣習ではなく、実例をもとに考えられるようになります - 「次にやること」が整理できる: チェックリストで、プロダクト開発の考えどころをテーマごとに把握できます - 比較視点が持てる: 自分のプロダクトが市場の中でどういう構造かを相対化できます - 検討のスピードが上がる: 他社事例を探す時間を減らし、設計に集中できますよくある質問 Q: Bundlecaseは何を提供するサービスですか？ A: Bundlecaseは、プロダクト開発の考えるポイントを整理するチェックリストと、世界中のプロダクト事例を観測できるデータプラットフォームを提供するサービスです。 Q: チェックリストとは何ですか？ A: プロダクト開発の過程で「次は何を考えたらいいんだろう」と迷ったときに、テーマごとに考えるポイントをまとめたリストです。すべてをこなす必要はなく、気になるところから眺めてみてください。 Q: ログインは必要ですか？ A: ログインしなくてもチェックリストやインサイトは利用できます。ログインすると、進捗の保存やプロダクトの管理ができるようになります。Googleアカウントで簡単にログインできます。 Q: データはどこから集めていますか？ A: 各プロダクトの公式サイトなど、公開されている情報をもとに独自に整理しています。 Q: Bundlecaseは結論や正解を教えてくれますか？ A: いいえ。Bundlecaseは正解を提示するサービスではなく、判断材料を増やすための観測基盤です。 Q: どんな人が使うことを想定していますか？ A: 個人開発者、起業家、プロダクトマネージャー、デザイナーなど、プロダクト設計に関わる方を想定しています。 Q: データは常に最新ですか？ A: 定期的に更新・補正を行いながら、継続的に精度を高めていく運用を予定しています。 Q: 商用利用は可能ですか？ A: 商用利用については、用途に応じたライセンス形態を検討中です。詳細は今後案内予定です。 Q: 今後どんな機能が追加されますか？ A: チェックリストのテーマ拡充に加え、データの比較・可視化・考察支援の機能を段階的に追加していく予定です。

Tsumugu - 1日1枚、写真を選ぶだけ。あなただけのミニフォトダイアリー

13 trickstar — Fri, 23 Jan 2026 19:15:03 GMT

1日1枚、写真を選ぶだけ。あなただけのミニフォトダイアリー「今日はどんな一日だった？」「一週間前、何してたっけ？」そう聞かれたとき、パッと思い出せる日もあれば、何をしていたか思い出せない日もありますよね。忙しい毎日の中で、小さな幸せや何気ない瞬間は、あっという間に記憶の彼方へ流れていってしまいます。でも、もし「1日1枚の写真」を選んでいたら？そんな想いから生まれたのが、iOSアプリ「Tsumugu（つむぐ）」です。 ![スマートフォンを手で持っている。画面にはサムネイル画像付きのカレンダーが表示されている。](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/7898c146-49f7-4e2d-8084-efc820ddb83c/bbdc1b92-d721-425c-b00e-6f0ba45c96bc.jpg) どんなアプリ？ Tsumuguは、毎日1枚の写真を選ぶだけのシンプルなフォトダイアリーアプリです。使い方はシンプルで、カレンダーの日付をタップして写真を選び、位置を調整して保存するだけ。文章を書く機能はありません。ただ1枚選ぶだけ。だから続きます。写真はサムネイルサイズで表示されるので、「映える写真」じゃなくても大丈夫。今日のランチ、通勤中に見た空、なんでもない日常の一コマ。どんな写真でも気負わずに選べます。選んだ写真はウィジェットでいつでも眺められますし、SNSでシェアしたり、手帳用に印刷することもできます。自分のスタイルで楽しめるのがTsumuguの魅力です。 3つの楽しみ方 1. ホーム画面ウィジェットで毎日眺める iPhoneのホーム画面にウィジェットを追加すれば、アプリを開かなくても今日の写真をいつでも眺められます。小・中・大の3サイズに対応しており、今日の1枚を表示するシンプルなものから、週間・月間カレンダーを一覧できるものまで、お好みのスタイルで配置できます。 ![一ヶ月と1日のウィジェット表示](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/7898c146-49f7-4e2d-8084-efc820ddb83c/32ac31be-d71d-4224-8ecd-287ad5012cdf.jpg) 一ヶ月や今日の表示に対応 2. SNSでシェアする 1ヶ月分の写真をカレンダー画像として書き出すこともできます。 InstagramやXで「今月の振り返り」として投稿すれば、友人や家族と思い出を共有できます。 ![1ヶ月のサムネイル付きカレンダーの画像をスマートフォンで表示している](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/7898c146-49f7-4e2d-8084-efc820ddb83c/11b9efbb-5803-48ea-b9cb-6b2735f42a9e.jpg) 3. 手帳に印刷して貼るデジタルだけじゃ物足りない？Tsumuguなら、手帳にぴったりのミニサイズで印刷することもできます。印刷サイズはデフォルトで 22.5×18.5mm。ほぼどんな手帳やカレンダーにも貼れるコンパクトなサイズです。「もう少し大きくしたい」「縦長にしたい」という方のために、10〜50mmの範囲で自由にカスタマイズもできます。写真がある日だけをまとめて印刷するので、紙を無駄にしません。A4、はがき、Lサイズから用紙を選んで印刷し、切り取り線に沿ってカットすれば、すぐに手帳に貼れます。 ![木製のテーブルの上に、開かれた手帳が置いてある。手帳はマンスリーページが開かれており、各日付には小さく印刷された写真が貼られている](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/7898c146-49f7-4e2d-8084-efc820ddb83c/1764a998-555a-483b-a791-48fc906215b7.jpg) 他のアプリとの比較 Tsumuguは「1日1枚を選ぶ」ことに特化したフォトダイアリーアプリです。 | 機能 | Tsumugu | 一般的なフォトアルバムアプリ | 日記アプリ | | -------------- | ------------------------ | ---------------------------- | ---------------- | | 1日1枚の管理 | ◎ カレンダー形式で直感的 | △ フォルダ分け等で対応 | ○ 写真添付で対応 | | ウィジェット | ◎ 3サイズ対応 | △ アプリによる | △ アプリによる | | SNSシェア | ◎ カレンダー画像で出力 | ○ 写真単体で共有 | △ アプリによる | | 手帳サイズ印刷 | ◎ 10〜50mmで自由に設定 | × 対応していないことが多い | × 非対応 | | iCloud同期 | ◎ 複数デバイス対応 | △ アプリによる | △ アプリによる | | 価格 | 無料（広告削除¥500） | 無料〜有料 | 無料〜サブスク | こんな方々に使ってほしい Tsumuguは、毎日の記録を気軽に残したいすべての方におすすめです。 - 日記を続けたいけど、毎日文章を書くのは大変…という方 - 写真は撮るけど、見返す機会がない方 - ホーム画面を自分らしくカスタマイズしたい方 - 手帳やバレットジャーナルを愛用している方 - お子さんやペットの成長記録を手軽に残したい方 - 推し活の記録を形に残したいファンの方こうなったらいいな：ユーザーの声（アプリ作者の妄想です） > 「毎日日記を書こうとして何度も挫折してきましたが、写真を1枚選ぶだけなら続けられています。ウィジェットで眺めるのが日課になりました」 > — 30代・会社員 > 「子どもの写真は毎日撮るけど、見返す機会がなかった。ウィジェットに表示するようになってから、ふとした瞬間に成長を感じられるようになりました」 > — 40代・主婦 > 「推しの現場に行った日を写真で記録しています。月末にカレンダー画像をXに投稿するのが楽しみです」 > — 20代・学生 …本物のユーザーの喜びの声を、お待ちしています！使ってみて、いいなと思ったら星5でレビューを書いていただけると嬉しいです🎉 開発者より私は1日1ページ型手帳の愛用者で、ジャーナリングにハマるあまり、既成の手帳も色々と試しましたし、自分で日々のテンプレートを作って印刷して製本したり、あるいはiPadでデジタルの記録を試したり、さまざまな「日々の記録」を楽しんできました。（もちろん文具の類も大好きです） ![デスクの上に手帳が積み上がっている](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/7898c146-49f7-4e2d-8084-efc820ddb83c/ca8ff430-f5e4-469a-9523-31c9051068c6.JPG) 写っていない手帳が倉庫にもあります… その中で気づいたのは、いちばん手軽で、後から振り返って楽しい記録が、「1日1枚の写真を選ぶ」ことでした。文章を書くのはそれなりに体力が必要なこともありますが、この方法なら、パッと写真に撮って、後から選ぶだけで良いのです。その日食べたもの、見た景色、会った人。1枚の写真があるだけで、その日のことをふんわりと思い出せます。ウィジェットで眺めるもよし、SNSでシェアするもよし、印刷して手帳に貼るもよし。楽しみ方は人それぞれ。Tsumuguは、自分のペースで、気軽に楽しんでもらえたら嬉しいです。「1日1枚」が続く理由 Tsumuguが大切にしているのは、「続けられること」です。操作はタップと選択だけのシンプル設計。無理に毎日選ぶ必要はなく、後からまとめて選んでも大丈夫です。たまには違う日の写真を選んだって、いいかもしれない。完璧を求めず、自分のペースで続けられる。それがTsumuguの設計思想です。ふとした瞬間に、思い出が蘇るウィジェットをふと見たとき、SNSの投稿を振り返ったとき、手帳を開いたとき。「あ、この日は珍しくランチに行ったな」「ネオン（飼い猫の名前）、小さかったなあ…」——文字だけでは伝わらない、その瞬間の空気感や色が、小さな写真の中に封じ込められています。毎日を「つむぐ」ように、1枚1枚の写真を重ねていく。あなたも今日から、Tsumuguで写真日記を始めてみませんか？ダウンロード [App Storeでダウンロード](https://apps.apple.com/jp/app/tsumugu/id6757946555) | 項目 | 内容 | | --------- | ------------------------------------------------- | | 対応端末 | iPhone / iPad（iOS 17以上） | | 対応言語 | 日本語、英語 | | 価格 | 無料 | | 広告削除 | ¥500（買い切り） | | Webサイト | [Tsumugu](https://tsumugu.pentaprogram.tokyo/) | | 開発者 | [@pentaprogram](https://twitter.com/pentaprogram) | よくある質問 Q. 写真は端末に保存されますか？ A. はい、選んだ写真はアプリ内に保存されます。元の写真ライブラリから削除しても、Tsumugu内の写真は残ります。 Q. 機種変更時にデータは引き継げますか？ A. はい、iCloud同期に対応しています。設定画面でiCloud同期を有効にすれば、同じiCloudアカウントでサインインしているすべてのデバイス間でデータを同期できます。 Q. 印刷するにはどうすればいいですか？ A. アプリ内の印刷ボタンから、手帳サイズで印刷できます。AirPrint対応プリンターならiPhoneから直接印刷可能です。PDFで保存してコンビニのマルチコピー機で印刷することもできます。 Tsumugu 私の一ヶ月

ミノウォーズ

kanoi y — Thu, 08 Jan 2026 15:17:53 GMT

ミノウォーズとはミノウォーズは、自分で編成した8つのブロックを使って相手と陣取りを行い、最終的に配置できたブロックの合計マス数が多い方が勝利となる、ターン制の1対1のパズルゲームです。 PaytoWin要素がなく、運要素も少ない、戦略や論理的思考力が問われるゲームです。それでいて、将棋やチェスと違って一試合が数分で終わるので、手軽に楽しむことができます！ ![対戦画面](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/d532442c-b72a-48a4-b720-16be3325e636/1eb3c1f2-3c29-4e75-85e6-a1a0d09c6dc4.png) 対戦画面主要機能 - ランク戦ランク戦は、ランクと呼ばれる階級が変動する対戦モードです。ブロンズ、シルバー、ゴールド、レジェンドという4つのランクがあり、勝利を重ねることで上のランクに上がっていくことができます。ランク戦ではプレイヤーランキングが公開しており、上位5名が表示されます！現在ランク戦は全てCPU対戦となっていますが、将来的にはプレイヤー同士のマッチングが行われるようにする予定です。 ![ランク戦画面](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/d532442c-b72a-48a4-b720-16be3325e636/2de66479-db42-47b6-840c-5edfbc867866.png) ランク戦 - 友達対戦友達対戦は、共通の合言葉を使用して特定の相手とすぐに対戦できるモードです。 ![友達対戦](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/d532442c-b72a-48a4-b720-16be3325e636/51cfac61-21c6-46e9-9349-bf2076ab3e1a.png) 友達対戦 - デッキ編集デッキ編集は、対戦で使用するブロックを事前に編成する機能です。8個のブロックを選び、合計マス数が36になるようにデッキを組みます。現在、4つのデッキを作成することが可能です。自分だけの最強デッキを構築しましょう！ ![デッキ編集](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/d532442c-b72a-48a4-b720-16be3325e636/cd020142-52bf-4229-aa61-3d53cf617220.png) デッキ編集今後の予定 - 大会機能の実装 - 多言語対応 - スマホアプリとして正式リリース最後にブラウザからログインなしで無料で始められるので、ぜひ遊んでみてください🙌 https://mino-wars.com/

Lafter | お笑いネタ動画検索サイト

小林かえで — Thu, 01 Jan 2026 22:45:30 GMT

Lafter とは YouTubeには面白いネタ動画が数多く存在していますが、無断転載も少なくありません。そこで、お笑い芸人や劇場など公式チャンネルが投稿している漫才・コント・ピンネタなどの「ネタ本編」を中心に、安心して探せるよう整理・検索できるまとめサービス『Lafter（ラフター）』を作りました。できることネタ動画に絞った検索：芸人名・キーワードで「ネタ本編」を探せる検索結果の並び替え：再生数／高評価で並び替えて見つけやすくする人気順で探す：再生数／高評価の人気順で閲覧（1ヶ月・1年・累計を切替）賞レースまとめ：年別に賞レースの出場芸人一覧を確認できる（結果の振り返りにも）最近のネタを追える：直近で公開されたネタ動画を時系列でチェックランダム表示：知らない芸人や過去の名作ネタに偶然出会える公式チャンネルのみ：掲載は公式チャンネルの動画に限定し、無断転載を避けて安心して視聴できる画面イメージ（モバイル） ![トップ画面](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/1aa0600b-38f1-42ed-886d-d58128d8d750/f8d0dd95-ff27-4346-9bf8-c905a72b960f.png) トップ ![人気順ページ](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/1aa0600b-38f1-42ed-886d-d58128d8d750/3e6bbc5b-6d0b-4587-b971-ef90cdf7c578.png) 人気順（再生数／高評価、1ヶ月・1年・累計） ![ワード検索の結果画面](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/1aa0600b-38f1-42ed-886d-d58128d8d750/184060e9-f23d-4648-a328-ba55076745fa.png) ワード検索 ![チャンネル検索](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/1aa0600b-38f1-42ed-886d-d58128d8d750/866d57e9-5482-40f0-b56e-6413c97fad52.png) チャンネル検索こんな使い方ができます - まずは人気順（1ヶ月）で“今みんなが見ているネタ”から見る - 芸人名で検索して、高評価順に並び替えて当たりネタから消化する - ランダム表示で知らない芸人を発掘して、気に入ったらそのままチャンネルを追う - 賞レースまとめで年別に出場芸人を眺めて、その年の流れを振り返るサービス作りで意識したこと Lafterは「おすすめの押し付け」ではなく、ユーザーが自分の意思でネタに辿り着けることを重視しています。検索・最近・ランダムに加えて、賞レースまとめや人気順といった導線を用意し、迷わず“ネタ視聴”に入れる体験を目指しました。開発者の体験談 YouTubeでネタ動画を見るのは好きですが、無断転載が多い点がずっと気になっていました。そこで「公式チャンネルの動画だけ」に絞って、安心してネタを探せる場所としてLafterを作りました。使っていて良かったのは、検索で探すだけでなく、一覧の中から偶然ネタに出会えることです。サムネイルを小さめにして一度に多く並べ、最近・ランダムでも“開くだけでネタが目に入る”導線にしています。なお「ネタ本編」の判定はAIと人力確認を組み合わせていますが、完全ではありません。掲載漏れや誤分類が起きることもあるため、再生画面の報告ボタンから連絡してもらえると助かります。 FAQ Q. 「公式チャンネルのみ」とはどういう意味ですか？ A. 掲載対象は、運営が確認した公式チャンネルに限定しています。非公式の転載チャンネルや切り抜き等は掲載対象にしていません。 Q. どんな動画が「ネタ本編」として扱われますか？ A. 基本的に、漫才・コント・ピンネタ等の“演目として成立している動画”を中心に扱います。一方で、トーク・企画・舞台裏などは原則としてネタ本編から除外する方針です。 Q. どうやって「ネタ本編」を判定していますか？ A. 動画タイトルをもとに、AIがチャンネルごとの投稿傾向も踏まえて「ネタ本編」かどうかを判定し、必要に応じて人が確認しています。完全ではないため、掲載漏れや誤分類が発生することがあります。 Q. 動画が見つからない／表示されないことはありますか？ A. あります。公式チャンネルが動画を非公開・削除した場合や、掲載条件（ネタ本編判定など）に合わない場合は表示されません。 Q. 間違ってネタ本編に分類されている場合は？ A. 再生画面にある報告ボタンからお知らせください。内容を確認のうえ、必要に応じて分類を修正します。 Q. チャンネルを追加してほしい場合はどうすればいいですか？ A. お問い合わせ等から「追加してほしい公式チャンネル名／URL」を送ってください。公式性の確認ができ次第、対象に追加します。

【Figma Make】スクリーンショットから高精度なデザインを再現するプロンプト

ガクスナ — Sat, 20 Dec 2025 17:13:54 GMT

はじめに Figma Make を使えば、AIの力で簡単にデザインを作成できます。ただ、フロントエンドのデザインは、開発を進める中で使い勝手に合わせて修正することが多いです。結果的に、元々のFigmaデザインと大きく乖離してしまうことも少なくありません。「せっかくFigma Makeでデザインを作ったのに、実装と合わなくなった…」そんな経験はありませんか？ Figma Makeには、デザインをコピペして既存デザインを参考にできたり、コンポーネントをライブラリとして書き出して共通スタイルを使いまわせたりと、便利な機能がたくさんあります。しかし、Figmaのメンテナンスをしないと、これらの恩恵を受けられません。そこで今回は、スクリーンショットから高精度なアプリケーション画面を再現するためのプロンプトをお伝えします。これを使うと、完成度7割〜9割でデザインを再現してくれます。 - 実装済みの画面をFigmaに正確に反映できる - 手直しの量が大幅に減る - ゼロベースで1からFigmaを作成するよりも、工数をかなり削減できるこれらのメリットが得られます！ Figma Makeでスクリーンショットからデザインを再現する方法基本的なFigma Makeの使い方は、下記の記事にまとめています。まだ使ったことがない方は、見てもらえると嬉しいです！ https://zenn.dev/sunagaku/articles/6ffe29e6f271bb ステップ1: Guidelines.mdにプロンプトを設定する Figma Makeの設定画面からを開き、以下のプロンプトを貼り付けてください。 ![Guidelines.mdの設定画面](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/d2c0afcd-fed0-4b64-8a9d-3e711ab5e2a6/a52053da-9e97-4117-bd75-2d6f44f4728c.png) キャプションをここに記入 Guidelines.mdにプロンプトを設定した状態 :::message おすすめ: AIモデルは Gemini 3 Pro を選択すると、より精度の高いデザインを生成できます。 ::: ![モデル選択画面](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/d2c0afcd-fed0-4b64-8a9d-3e711ab5e2a6/966537c5-b85a-4a4f-a6b4-1e3925f94a55.png) キャプションをここに記入 Makeの設定 > 実験モデルからGemini 3 Proを選択ステップ2: スクリーンショットを添付してプロンプトを送信する再現したい画面のスクリーンショットをFigma Makeにアップロードし、プロンプトを送信します。 ![プロンプト画面](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/d2c0afcd-fed0-4b64-8a9d-3e711ab5e2a6/b2bf8643-3421-41b8-bf37-591803a120d7.png) キャプションをここに記入スクリーンショットを添付して、ピクセルパーフェクトで作成を依頼 Figma Makeが画面を分析し、デザインを生成してくれます。 ![デザイン生成画面](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/d2c0afcd-fed0-4b64-8a9d-3e711ab5e2a6/d3cb4d9b-5055-4ca6-b177-e6d8fa749a95.png) キャプションをここに記入 AIがスクリーンショットを分析してデザインを生成ステップ3: 作成したデザインをデザインファイルに貼り付ける Figma Makeが生成したデザインをコピーして、デザインファイルに貼り付けます。 ![Figmaに貼り付けた結果](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/d2c0afcd-fed0-4b64-8a9d-3e711ab5e2a6/de23690f-b507-4c5b-8a0d-eced761958e2.png) キャプションをここに記入生成されたデザインをFigmaに貼り付けた状態このプロンプトのポイントこのプロンプトが効果的な理由は、AIに「改善しないで」と明確に伝えている点です。通常、AIはデザインを「きれいに整える」傾向があります。例えば： - 13pxのマージンを16pxに丸める - 似たようなアイコンに置き換える - レイアウトを「より良く」調整するこれでは、実装と一致するデザインにはなりません。プロンプトではと明確に指示することで、見た目の完全再現を優先させています。まとめ Figma Makeは、新規デザインを作成するだけでなく、スクリーンショットからデザインを再現するツールとしても活用できます。このプロンプトを使えば、Figmaのメンテナンスがぐっと楽になります。ぜひ試してみてください！他にもおすすめのFigma Makeの使い方があれば、ぜひ教えてください！ Xフォローしてくれると嬉しいです Xでも情報発信しているので、フォローしていただけると励みになります！ https://x.com/sunagaku

AIネイティブなフロントエンド開発手法 FE-SDDのススメ〜秘訣はロジックとUIの分割にあり〜

俊輔馬場 — Sat, 13 Dec 2025 07:29:27 GMT

はじめに先日、「AI 駆動開発勉強会フロントエンド支部 1 w/あずもば」にて、「AIネイティブなフロントエンド開発手法 FE-SDDのススメ」というテーマで発表させていただきました。 https://aid.connpass.com/event/374658/ スライドは下記から確認できます！ https://speakerdeck.com/sunagaku/aishi-dai-nohurontoendokai-fa-shou-fa-fe-sdd-nituite-kagihashi-zhuang-fen-ge-niari 時間の都合上お伝えできなかった内容もあったため、本記事で補足させていただきます。僕自身、仕事でも個人開発でも、フロントエンドを触ることが多いです。ただ、フロントエンド開発でAIを活用しようとすると、なかなか思うように実装してくれないことが多いな、と感じていました。この記事では、LTでお話しした内容をベースに、フロントエンドをAIで開発するコツと、僕自身が実践している FE-SDD（フロントエンド仕様駆動開発）についてお伝えします。少しでも皆さんの開発や学びのヒントになれば嬉しいです。 AI を用いたフロントエンド開発での課題フロントエンド開発でAIを活用しようとすると、大きく3つの課題に直面します。 1. ざっくり指示だとAIに任せても上手くいかない 1番自律性が高いと言われているDevinですら、ざっくりした指示だと上手くいきません。具体的には： - デザインの実装漏れが起こる - 細かいUIの調整が意図通りにならない - Figmaのデザインとの差異に気づきにくいなどの問題が発生しています。 2. コード生成量がかなり多く、レビュー負荷が高いフロントエンドは、バックエンドと比較してもコード量が多くなりがちです。 - コンポーネントの数が多い - ファイル数も増える - 一度のPRで大量のコード変更が発生これにより、レビュワーの負担が大きくなります。 3. 重複コードが大量発生する AIにFigmaを渡せば、同じ見た目のコンポーネントは作れます。しかし... - 新規作成が多く、既存コンポーネントを使いまわせない - 結果的にメンテコストが増大 - 後から統一しようとすると大変な作業になるの問題が生じます。フロントエンド開発は、まだAI任せにできないこの状況を踏まえると、フロントエンド開発はまだ完全にAI任せにはできないと感じています。理由は、大きく2つです。 UIのバグは、人が介入する必要がある - コード上は問題なくても、挙動がバグっている場合が多々ある - AIがうまく修正できない場面も多い - 適宜、人が確認や修正する必要がある共通コンポーネントの再利用は死活問題ここを放置すると、メンテコストがかなり大きくなります。そのため、現状は「まだ人が動作確認・レビューをする必要がある」という結論に至りました。であれば、人がレビューしやすい実装をさせることに注力すべきだと考えました。 AIにどう任せればレビューが楽になるか？課題を整理した上で、それぞれの対応方法を考えてみました。 | 課題 | 対応方法 | |------|----------| | デザインの実装漏れ | 各コンポーネントにFigmaリンクを紐付けて、AIに参照させる | | コード重複 | 仕様駆動開発で共通コンポーネントの利用を計画書に明記 | | レビューしにくい | UIとロジックを分離して、コード変更量を減らす | 特に「レビューしにくい」問題は深刻だと感じています。 UIとロジックが混在していると： - コード変更量が増加する - ロジック修正でUIデグレを気にするのが辛い - どこを確認すればいいか分かりにくいこれらを考えた結果、「SDDを工夫して行えば、解決できるのでは？」という結論に至りました。それが FE-SDD です。 FE-SDD を使った開発効率化 SDD（仕様駆動開発）についてでは、まず SDD（仕様駆動開発）について簡単にご紹介します。 SDD（Spec-Driven Development）は、仕様ドキュメントを先に定義し、それに従ってコーディングを進める手法です。 SDDのメリット： - 事前に設計書を作ることで、構造化されたコードを生成できる - 仕様のブレや実装漏れを回避しやすい - バイブコーディング時の課題を解決できる cc-sdd とは？今回の発表では、[@gotabara](https://x.com/gotabara) さんが作成された cc-sdd を利用しています。 https://github.com/gota-banba/cc-sdd cc-sddの特徴： - SDDで実装するためのフレームワーク - OSSで導入も簡単（） - Claude Code、Cursor、Codex CLI等、各種AIエージェントツールで利用可能 - コマンド入力だけで仕様作成から実装まで進められる主なコマンド： - - 要件定義書の土台作成 - - 要件定義書の作成これらのコマンドを入力するだけで、SDD を行うことができます！ FE-SDD について FE-SDD は、SDDをフロントエンドの実装に特化させたものです（スナガクの造語です）。主な特徴 1. 仕様ドキュメント作成時に、実装予定のUIイメージ図を作成させる - AIとの認識のずれを可視化して、実装漏れに気づける - 仕様ドキュメントの作成時点で指摘できる - Figma URLを正しく読み込めているか判断可能 UI イメージ図のサンプル例イメージ図を作成させることで、AIが実装しようとしている内容と自分の想定が一致しているか確認できます。 ![UI イメージ図のサンプル例](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/d2c0afcd-fed0-4b64-8a9d-3e711ab5e2a6/44ebccf5-dd40-4099-a423-831a82c55dd8.webp) キャプションをここに記入 2. UI実装とロジック実装を分ける - 別々にレビューができるので、一度に見るコード量が減る - 関心事が分離されているので、レビュー時の認知負荷が下がる - UIを維持したまま、ロジックだけAIに書き直させられる FE-SDD 開発フロー FE-SDDは、大きく2つのフェーズで進めます。 1. UI を SDD を利用して実装する 2. ロジックを SDD を利用して実装する Phase 1: UI実装パート cc-sddを用いて、UI部分を実装します。ポイント： 1. ロジックは書かず、モックデータで表示部分だけ作る - この段階で見た目を完成させておく 2. コンポーネント分割の単位を指定する - ロジック実装フェーズでコンポーネント構成をいじらなくて済む - ロジック修正時の原因切り分けが行いやすくなる 3. Figma URLも仕様書に含める - コンポーネントごとにFigma URLを紐づけると精度が上がる 4. 仕様書にUIのイメージ図を含める - 正しくFigma URLを読み込めているか判断できる :::message 参考プロンプト（UI実装時）： https://zenn.dev/link/comments/d25550bc0a5c54 このプロンプトを /kiro:spec-init <機能名> の後ろに付けて実行すると、いい感じに仕様書を作ってくれます！ ::: UI実装の結果この手法で実装した結果... - 見た目は、ほぼ完璧な実装を再現できた - 事前にコンポーネント構成を指定しているので、構造的な手戻りが発生しない - 修正はスタイルだけなので、サクッと行える figma ファイル ![FIgma デザイン図](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/d2c0afcd-fed0-4b64-8a9d-3e711ab5e2a6/c1634fe7-0693-40a2-a2d0-c923d8a5fd4f.webp) 実装された画面 ![実装された画面](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/d2c0afcd-fed0-4b64-8a9d-3e711ab5e2a6/9a19f310-5f8e-42ab-bd38-f058552ed323.webp) Phase 2: ロジック実装パート UI実装が完了したら、cc-sddを用いてロジック部分を実装します。メリット： - 基本的にロジック実装部分の差分しか出ない - 差分が少ないので、レビューもすぐ終わる - 本当に見るべきロジック部分に注力できる - 動かなければ、もう一回生成させることもできる - UI部分は実装できているので、手戻りが少ない - Token消費量も抑えられる :::message 参考プロンプト（ロジック実装時）： https://zenn.dev/link/comments/37ca032cffa89e UI 実装時と同様に、このプロンプトを /kiro:spec-init <機能名> の後ろに付けて実行すると、いい感じに仕様書を作ってくれます！ ::: AIでフロントエンドを実装する時に気をつけること実践を通して分かった、4つのポイントをお伝えします。 1. 再利用可能なコンポーネントがないか確認する工程を入れる - 明示的に仕様書に組み込むと、再利用してくれます - Planモード等で実装計画を立てる時にも注意できると良さそうです 2. UIとロジックを分けて開発する - レビュー負荷やデグレリスクを下げられます - ロジックだけ再生成できるので、複数パターン比較も行いやすいです 3. 必要に応じて、Planモードを使い分ける - 簡単なロジックならSDD使わない方が速い場合もあります - UIは完成済みなので、実装のボリュームは小さめになるます - 状況に応じて使い分けることが大事 4. 画面に複数ロジックがある場合は、分けて実装する例えば「データ取得」と「Drag & Drop」は、別々に実装する。理由： - 単機能ずつ実装するなら、精度高く実装してくれる - 複数を同時実装すると、AIでも修正しにくくなり、デバッグも困難に - 実装スピードを早くするためにも、一つずつ機能を作るのが重要補足）フロントエンド開発時に時間がかかること大きく二つあると考えています。細かいデザインの適用と、バグ発生時の挙動修正です。細かいデザインの適用最近はAIの精度が上がってきたとはいえ、完成度を高めるほど、最終的には人の手での修正・確認が必要になります。しかし、デザイン修正のタイミングでロジック部分のデグレを気にしながら作業すると、デザインに集中できず生産性が落ちると感じています。そのため、デザイン修正だけに注力できるよう、ロジック部分は後から実装するというフェーズ分けをおすすめしています。バグ発生時の挙動修正フロントエンドでは、ファイル内外を問わずさまざまな処理が行われます。バックエンドのようなデータの受け渡しに加え、フロントエンド特有の非同期処理も絡み合うため、ロジック部分は煩雑になりがちです。デバッグ量を減らし、不要なバグの発生を防ぐためにも、一度に全部を開発するのではなく、一つずつ機能を作っていくことが重要だと考えています。また、コンポーネント構造を事前に決めておくことで、構成変更に起因する不要なバグを防げます。 AI時代において「実装スピードは3倍になったが、デバッグ時間は10倍になった」という現象は、フロントエンドで特に顕著だと感じています。だからこそ、バグを発生させない設計・開発手法がより重要になるのかな？と感じています。います。まとめフロントエンド開発はまだレビューが必要です。であれば、レビューしやすい実装をさせましょう。そのためにも、 1. UIとロジックを分けて開発する 2. 仕様書作成時に既存コンポーネントの再利用を検討する 3. 実装前にイメージ図を作成し、認識ズレの有無を確認する 4. 画面に複数ロジックがある場合は、分けて実装するこれらを意識することで、AIを使ったフロントエンド開発がより効率的になるかな？と思います！もし、他にいい実装方法があれば、コメント欄やXで教えて頂けると嬉しいです！参考情報 - cc-sdd（SDDフレームワーク）：[@gotabara](https://x.com/gotabara) さん作 https://github.com/gotalab/cc-sdd - FE-SDD 参考プロンプト - UI実装時：https://zenn.dev/link/comments/d25550bc0a5c54 - ロジック実装時：https://zenn.dev/link/comments/37ca032cffa89e Xフォローしてくれると嬉しいです Xでも情報発信しているので、フォローしていただけると励みになります！ https://x.com/sunagaku

SQL Quest ~実践で学べるSQLトレーニングプラットフォーム~

keikei keikei — Thu, 13 Nov 2025 22:21:29 GMT

SQLクエストとは SQLクエストは、SQL 初学者〜実務で SQL を磨きたいエンジニア／アナリスト向けのオンライン学習プラットフォームです。複雑な JOIN 設計や集計ロジックを独学で習得しづらいという課題を、ブラウザ上の実行環境と実務シナリオ型の練習問題で解決します。掲載問題数はなんと100問以上。 ![AI時代の今こそSQLを学ぼう。SQL QUESTで](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/b6a8fbf9-6759-4f76-9547-19e19f33aae6/e44ba5d5-5aea-47dc-bc33-6436b31c1730.png) AI時代の今こそSQLを学ぼう。SQL QUESTで主な特徴 - 実務に即した演習データセット: 架空の受注・商品・ユーザー情報をもとに、現場レベルのクエリを練習できる - ブラウザだけで完結する SQL 実行環境: 追加ソフト不要で即クエリを実行し、結果を確認しながら学習できるこんな方におすすめ - 内定前の学生／駆け出しエンジニア: ポートフォリオとして SQL 実力を証明したいが、実務的な課題が無い - データアナリスト志望の社会人: 業務外で SQL を鍛えたいが、再現性のある疑似データや環境構築が難しい - 採用担当・教育担当: 研修用に誰でも同じ環境で学べる教材を探している主要機能ブラウザSQLエディタ補完付きのエディタからクエリを実行し、結果テーブルとエラーメッセージを即確認。環境構築不要で反復練習できます。実務シナリオ型練習問題初級〜上級まで段階別の 100+問を収録。基本的なSELECTから、JOIN、サブクエリ、ウィンドウ関数など実務で頻出のパターンを網羅し、模擬データを対象に手を動かせます。導入効果 - 環境構築時間はたったの0分: ブラウザアクセスだけで即練習でき、初回セットアップの心理的ハードルを解消 - 教育コスト削減: 研修用の SQL 課題作成・採点の手間を共通データセットと自動採点ロジックで代替できますよくある質問 Q. SQLクエストを利用するのに環境構築は必要ですか？ A. いいえ。ブラウザ上のSQLエディタで完結するため、PCさえあればすぐにクエリを実行できます。追加ソフトやローカルDBのセットアップも不要です。 Q. どのレベルの問題が用意されていますか？ A. 初級（SELECT基礎）から中級（JOIN・集計）、上級（ウィンドウ関数・サブクエリ）まで段階的に約100+問以上を収録しています。今後も実務シナリオを補強予定です。 Q. 実際のデータに近い内容で練習できますか？ A. 架空のECやSaaS事業を想定した模擬データセットを用意しており、ユーザー・受注・商品など現場で扱うテーブル構造を再現しています。 Q. 学習成果は可視化できますか？ A. 各問題の正答状況、総合スコア、ランキングが記録されるため、得意／苦手領域を把握しやすく、学習進捗の共有や自己評価にも使えます。 Q. 企業研修やチーム利用にも対応できますか？ A. 共通データセットと自動採点ロジックを利用できるため、研修課題としても活用可能です。必要に応じてアカウント共有・成果レポートの仕組みをご案内しますのでご相談ください。

TubeAnalytics

Nishibayashi Yoshinori — Sun, 09 Nov 2025 23:11:47 GMT

TubeAnalytics（チューブアナリティクス）豊富なフィルター機能を使って、Youtube動画検索ができるウェブアプリです。 ▶️『伸びるネタ』をピンポイントで発見 ▶️ 競合チャンネルを徹底リサーチ ▶️ 分析に活かせる様々なファイル形式 ![TubeAnalyticsでできる３つのこと](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/7c635b95-09bf-4130-b5a6-28ce38d01813/e00a1789-1677-4e6d-b2d0-71f032ff7d88.png) TubeAnalyticsでできる３つのこと主な機能 👍 高度なYouTube動画検索キーワード、検索モード、ジャンル、動画タイプ、並び順、取得件数、期間、検索対象地域などの豊富なフィルター機能で欲しい結果に一直線！ 👍 チャンネル動画の収集チャンネルを指定して、動画タイプ、並び順、取得件数、期間などを分析したいフィルター適用して収集！ 👍 エクスポート CSV、エクセル、PDFなど多用なファイルへの出力が可能。ChatGPTやGeminiでの分析に活用可能。 👍 検索履歴の保存/再検索過去条件をワンクリックで再実行。分析時間を短縮。 ![TubeAnalyticsの主な機能](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/7c635b95-09bf-4130-b5a6-28ce38d01813/395bb018-c920-48ef-a0f8-df393489b1ac.png) TubeAnalyticsの主な機能 :::warning 【注意事項】ご自身のYoutube Data APIのAPIキーが必要です。 APIキー発行、設定方法はサービスサイトの「API設定ガイド」で分かりやすく解説しています。 ※Youtube Data APIは無料でご利用可能です。 ::: --- YouTubeサイトの検索との違い - 広告やおすすめ表示に左右されず、設定した条件で結果を集めます。 - 条件を固定して、何度でも同じ検索ができます（検索履歴から1クリック再検索）。 - 動画の長さで絞り込み可能（ショートだけ／通常動画だけなど）。 - 指定件数まで自動で集めて、広告表示やノイズ（邪魔）になる動画が表示されません。 - 結果をCSV / エクセル / PDFで保存して、共有やAI分析に活用できます。よくある質問 Q. YouTube分析比較ツール – TubeAnalyticsとは何ですか？ A. 高度なフィルター機能と日本語最適化により、YouTube動画を効率的に検索できるツールです。検索結果をCSVやExcel、PDFファイルでエクスポートすることも可能です。 Q. 1日の検索数はどのくらいまでできますか？ A. 用するAPIは1日10,000クォータまで無料でご利用いただけます。動画検索の場合、50件検索あたり約100〜700クォータを消費します。チャンネル動画検索の場合は、検索項目などによって消費クオータが大きく変わってきますが、50件検索あたり約20〜100クォータを消費します。 Q. API Keyの取得は無料ですか？ A. はい、Google Cloud ConsoleでYouTube Data API v3のAPI Keyを無料で取得できます。 Q. 解約はいつでもできますか？ A. はい、いつでも解約可能です。解約後も現在の請求期間の終了まではサービスをご利用いただけます。 ![7日間無料トライアル](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/7c635b95-09bf-4130-b5a6-28ce38d01813/867c71b2-660a-4226-bb29-de66a99f3883.png) 7日間無料トライアル :::success 7日間無料トライアルで、まずは試してみてください。 :::

Kiro + React Native + Expo で iOSアプリを作る

commte — Thu, 30 Oct 2025 11:04:43 GMT

この記事では、Kiro + React Native + Expo + Claude API を使用して、AI 機能付きのタスク管理アプリ「Task」を開発する過程を紹介します。第 1 回では、プロジェクトのセットアップから基本的なナビゲーション構造の構築までを解説します。作成するアプリの概要「Task」は以下の機能を持つタスク管理アプリです： - ✅ タスクの作成・編集・削除 - ✅ タスクの完了管理 - ✅ 期限設定と視覚的な期限表示 - 🤖 Claude AI によるタスク整理・優先度付け - 🤖 自然言語でのタスク入力 - 💾 ローカルストレージでのデータ永続化 - 🌙 ダークモード対応 - 📱 レスポンシブデザイン技術スタック - フロントエンド: React Native + Expo - 言語: TypeScript - 状態管理: React Context API + useReducer - ローカルストレージ: AsyncStorage - AI 統合: Claude API (Anthropic) - ナビゲーション: React Navigation v6 - 日付処理: date-fns - HTTP クライアント: axios 前提条件開発を始める前に、以下がインストールされていることを確認してください： - Node.js (v20.11.0 以上) - npm または yarn - 任意のコードエディタ（VS Code 推奨）ステップ 1: 要件定義と設計 1.1 要件定義書の作成まず、アプリの要件を明確にするため、要件定義書を作成します。設計書アーキテクチャアプリケーション構造主要インターフェースステップ 2: プロジェクトの初期化 2.1 Expo プロジェクトの作成新しいディレクトリを作成し、Expo プロジェクトを初期化します： 2.2 package.json の設定プロジェクト名と必要な依存関係を追加します： 2.3 依存関係のインストールステップ 3: プロジェクト構造の構築 3.1 型定義の作成 TypeScript の型安全性を活用するため、型定義ファイルを作成します： src/types/Task.ts src/types/ApiResponse.ts 3.2 ユーティリティ関数の作成 src/utils/constants.ts src/utils/dateUtils.ts src/utils/validation.ts ステップ 4: ナビゲーション構造の構築 4.1 ナビゲーターの作成 src/navigation/AppNavigator.tsx 4.2 画面コンポーネントの作成各画面のプレースホルダーを作成します： src/screens/TaskListScreen.tsx 同様に、、、も作成します。 4.3 App.tsx の更新メインの App.tsx ファイルを更新して、新しいナビゲーション構造を使用します：ステップ 5: 動作確認 5.1 Expo CLI のインストール 5.2 開発サーバーの起動 5.3 ブラウザでの確認ブラウザが自動的に開き、以下のような画面が表示されます： - ヘッダー: 青色の背景に「Task」というタイトル - メイン画面: 「タスクリスト画面」と「実装予定」のプレースホルダーテキスト完成したプロジェクト構造まとめ第 1 回では、以下を完了しました： ✅ 要件定義と設計: アプリの機能要件と技術アーキテクチャの定義 ✅ プロジェクトセットアップ: Expo + TypeScript プロジェクトの初期化 ✅ 型定義: TypeScript による型安全な開発環境の構築 ✅ ユーティリティ関数: 日付処理、バリデーション、定数の実装 ✅ ナビゲーション構造: React Navigation v6 による画面遷移の実装 ✅ 動作確認: ブラウザでの基本動作確認次回予告第 2 回では、実際のタスク管理機能を実装していきます： - ローカルストレージサービスの実装 - タスクの状態管理（Context API + useReducer） - タスクの CRUD 操作 - UI コンポーネントの作成お楽しみに！参考リンク - [Expo 公式ドキュメント](https://docs.expo.dev/) - [React Navigation 公式ドキュメント](https://reactnavigation.org/) - [TypeScript 公式ドキュメント](https://www.typescriptlang.org/) - [date-fns 公式ドキュメント](https://date-fns.org/)

PIN TUBE

kazuma sakata — Thu, 04 Sep 2025 01:04:36 GMT

🎯 学習効率を劇的に向上させる！YouTube動画ピン機能付き管理アプリ「PIN TUBE」あなたは長時間のYouTube動画で困っていませんか？プログラミング講座、語学学習、専門技術の解説動画...現代の学習において、YouTube動画は欠かせない教材となっています。しかし、3時間を超える講座動画で「あの重要な部分、どこだったっけ？」と探し回った経験はありませんか？そんな悩みを一発で解決してくれる革新的なWebアプリケーション「PIN TUBE」をご紹介します！ 🚀 PIN TUBEとは？ PIN TUBEは、YouTube動画の重要な瞬間に「ピン」を打って、あとから瞬時にアクセスできる画期的な学習支援ツールです。 ✨ こんな悩みを一瞬で解決 - 🕐 長時間動画の重要部分を見失う → ピン機能で瞬時にアクセス - 📝 学習メモが散らばって管理できない → 動画と連動したリッチメモ - 🔄 同じ箇所を何度も探してしまう → タイムスタンプ付き整理 - 📱 スマホでも快適に学習したい → 完全レスポンシブ対応 🎯 主要機能 📌 スマートピン機能動画の重要な瞬間で一時停止し、その場でメモ付きピンを作成。クリック一つで該当箇所に瞬時にジャンプできます。 ✍️ プロ仕様リッチテキストエディタ単なるメモではなく、太字・斜体・リスト・コードハイライト対応のプロ仕様エディタで、まるでNotionのような高品質な学習記録を作成できます。 🎬 YouTube完全統合 YouTubeのURLを貼り付けるだけで、動画情報を自動取得・サムネイル表示・再生時間まで完全管理。 🛠️ 最先端技術スタックエンタープライズ級の技術基盤 - フロントエンド: Next.js 15 + React 19 + TypeScript - UI/UX: TailwindCSS + Framer Motion - データベース: PostgreSQL + Drizzle ORM - 認証: Clerk（銀行レベルのセキュリティ） - エディタ: TipTap（Notion級のリッチエディタ）パフォーマンス最優先設計 - SSR（サーバーサイドレンダリング）対応 - 自動最適化でモバイルでも爆速 - PWA対応でアプリのような使い心地 🎮 使い方（たった3ステップ！） Step 1: 秒速動画追加 ⚡ YouTubeのURL貼り付け → 自動で動画情報取得 → 即座に再生可能 Step 2: 瞬間ピン作成 📌 重要箇所で一時停止 → リッチメモ入力 → ピン完成（3秒で完了） Step 3: 高速復習 🎯 ピン一覧から選択 → 瞬時にジャンプ → 効率的復習完了 🎯 実際の活用シーン 👨‍💻 プログラミング学習 3時間のReact講座 → 重要なHooks部分だけピン → 15分で復習完了 🗣️ 語学学習 2時間の英語リスニング → 難しい表現をピン → 苦手部分を集中攻略 📊 ビジネススキル 90分のマーケティングセミナー → 実践テクニックをピン → 即座に業務で活用 🔬 専門分野研究長時間の学術講演 → 重要な理論部分をピン → 論文執筆時にすぐ参照 🎨 美しく直感的なデザイン ✨ 洗練されたUI - モダンなテーマ - 目に優しい配色設計 🎯 使いやすさ最優先 - ワンクリックで全操作完了 - 迷わない直感的ナビゲーション 🚀 今すぐ始める3つの方法 ⚡ クイックスタート（推奨） 1. [PIN TUBEにアクセス]() 2. アカウント作成しログイン 3. YouTubeのURLペースト → 即座に使用開始！ 💫 PIN TUBEで変わる学習ライフ Before PIN TUBE 😫 - 長時間動画で重要部分を見失う - メモが散らばって復習できない - 同じ箇所を何度も探す時間の無駄 - 学習効率の悪さにストレス After PIN TUBE 🎉 - 重要部分に瞬時アクセス - 体系的な学習記録 - 効率的な復習サイクル - ストレスフリーな学習体験 🚀 学習革命を今すぐ体験しませんか？長時間の動画学習で時間を無駄にするのは今日で終わりです。PIN TUBEで、あなたの学習体験を次世代レベルへ押し上げましょう！

あなたのファイルアップロード処理がユーザーを苦しめているかもしれない

栃沢拓実 — Mon, 01 Sep 2025 12:06:43 GMT

あなたのファイルアップロード処理がユーザーを苦しめているかもしれない見過ごされがちな、でも深刻な問題こんにちは、とちです。「アップロードに失敗しました」このエラーメッセージを見て、時間をかけて準備した200枚の写真をもう一度選び直したユーザーの気持ちを想像したことはありますか？昨今のAIブームにより個人開発者は増え続けています、深く考えず「ストレージサーバーへファイルを送るだけ」という認識でアップロード機能を実装しがちです。そして、その実装がユーザーに大きなストレスを与えているかもしれません。ユーザーが直面している現実 📱 モバイルユーザーの悲劇スマートフォンから100MBの動画をアップロードしようとしたユーザーA子さん：データ通信量: 300MB消費（成功0回）消費時間: 37分結果: サービス離脱 🏢 ビジネスユーザーの時間損失プレゼン資料（500MB）を共有しようとした営業担当B男さん：損失: 商談に遅刻、信頼失墜 🎨 クリエイターの創作意欲を奪う作品集をアップロードしようとしたデザイナーC美さん：結果: ポートフォリオ公開を断念なぜこんなことが起きるのか 1. 従来の実装の根本的な問題この実装の問題点： - 全か無か: 99%完了していても、エラーなら0%に戻る - メモリ食い: ファイル全体をメモリに載せる - 進捗不明: いつ終わるか分からない不安 - 再開不可: 中断したら最初から 2. ユーザーの期待と現実のギャップユーザーが期待すること： - ✅ 中断しても続きから再開したい - ✅ あとどれくらいで終わるか知りたい - ✅ 失敗したら理由を教えてほしい - ✅ 大きなファイルでも安定して送りたい現実： - ❌ エラーになったら最初から - ❌ プログレスバーが止まったまま - ❌ 「エラーが発生しました」だけ - ❌ 大きいファイルは諦めるしかないユーザーフレンドリーなアップロードの実現方法解決策1: チャンク分割でメモリとネットワークに優しく大きなファイルを小さく分割して送信することで、様々な問題を解決できます。 upload${this.file.name}upload${this.file.name}

準備中...

${progress.percentage}%${Math.round(progress.percentage)}%残り約${minutes}分${mbps} MB/秒${uploaded}MB / ${total}MBchunk${context.chunkIndex}⏳ サーバーが混雑しています。${delay/1000}秒後に再試行します... (${this.retryCount[retryKey]}/${this.maxRetries})現在の使用量: ${usedGB}GB / ${quotaGB}GB${Date.now()}${index}

ファイルアップロード (${this.files.length}個)

0 / ${this.files.length}

${this.queue.map(item => ).join('')}

ユーザー体験を劇的に改善する実装のポイント 1. 透明性の確保 - 何が起きているかを常に表示 - なぜ時間がかかるかを説明 - いつ終わるかの見込みを提示 2. コントロールの提供 - 一時停止・再開ボタン - キャンセルオプション - 優先順位の変更 3. 失敗への配慮 - 自動リトライ機能 - 部分的な成功の保存 - 明確なエラーメッセージと対処法 4. パフォーマンスの最適化 - 適応的なチャンクサイズ - 並列アップロード - 帯域幅の効率的利用まとめ：ユーザーの時間と感情を大切にするファイルアップロードは単なる技術的な機能ではありません。ユーザーの貴重な時間、データ通信量、そして感情が関わる重要なタッチポイントです。適切な実装により： - ⏰ 時間の節約: 失敗による再試行がなくなる - 📱 通信量の節約: 完了した部分は再送信不要 - 😌 ストレスの軽減: 進捗が見え、中断も怖くない - 🎯 目的の達成: ユーザーがやりたいことを確実に実現エンジニアとして、私たちはユーザーの立場に立って、彼らの体験を第一に考えた実装を心がけるべきです。 --- あなたのサービスのファイルアップロード機能は、ユーザーに優しいですか？この記事で紹介した実装方法を参考に、ぜひ改善してみてください。

人生の残り時間 - 人生の残り時間見える化アプリ

Yudai Shiratori — Mon, 18 Aug 2025 01:45:42 GMT

人生の残り時間 — 今日を大切にするために期限から自分を見つめ直す概要人生の残り時間や目標日まで残り日数を計算してくれるスマホ用アプリです使い方 1.生年月日や目標日を設定 2.ホーム画面で自動で計算された残り日数を確認できますスマホのホーム画面にも追加できますこんな人に毎日を無駄にしないため、日頃の自分を見つめ直したい人へアプリ https://jinsei-nokori-jikan.vercel.app/

ビザナビ - 日本人旅行者向けビザ情報チェッカー

Yudai Shiratori — Tue, 05 Aug 2025 00:35:45 GMT

概要ビザナビは、日本国籍の旅行者向けに、行き先のビザ免除／ビザ必要の可否、滞在可能日数、入国時の主な条件を提示するシンプルな検索サービスです。行き先の国名を入力すると、渡航前に知っておきたい基本情報をひと目で確認できます。主な機能国名検索：目的地を入力して、基本的なビザ情報を即時表示ビザ要否の確認：ビザ免除か、事前ビザが必要かを把握滞在可能日数：無査証滞在日数などの目安を表示入国条件の要点：入国時に想定される主な条件や注意点をチェック使い方 1.サイトにアクセスし、目的地の国名を検索 2.表示されたビザ要否・滞在日数・入国条件を確認 3.旅程や持ち物の準備に活用想定ユーザー海外旅行を計画している個人旅行者留意事項掲載内容は一般的な参考情報です。最新かつ正式な要件は各国の大使館・領事館や公式サイトで最終確認してください。

ccexp (Claude Code Explorer)

中村拓実 — Tue, 22 Jul 2025 21:28:52 GMT

実行方法もしくは上記のコマンドで使うことができます。はじめにみなさん、Claude Code を使っていますか？私は個人開発で、Claude Code を主体とした Agentic Coding を日々行っています。ただ、複数のプロジェクトを同時に進めていると、こんな経験はありませんか？「Next.js ではこの CLAUDE.md を、CLI ツールではあっちの CLAUDE.md を...」といった具合に、丹精込めて育てた CLAUDE.md やカスタムコマンドが、あちこちに散らばってしまうことに悩んでいました。 ccexp（claude-code-explorer）は、そんな悩みを解消するために作りました。 ccexp の機能 1. TUI ベース ccexp は Claude Code と同じく、ターミナルで動く UI として作られています。を実行すると、左側にファイルリスト、右側にプレビューという2ペイン構成の画面が表示されます。 ![ccexp のファイルリスト画面 - プロジェクトの CLAUDE.md ファイルやグローバル設定を一覧表示](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/ac12d936-8830-4e4c-bd98-fbb0f97fad7e/5c70608d-178c-48f2-a5f9-398213b305e5.png) ccexp のメイン画面。左側にファイルリスト、右側にプレビューが表示されるプロジェクト内の CLAUDE.md だけでなく、グローバル設定（/.claude/CLAUDE.md）やスラッシュコマンド定義ファイル（.claude/commands/）まで、Claude Code 関連のすべての設定ファイルを一つの画面で確認できます。 2. シンプルな操作一般的な TUI における操作パターンに準拠しています。矢印キーでファイルを選択し、Enter でアクションメニューを開きます。また、キーワード検索も可能で、プロジェクト名やコマンド名による絞り込みが簡単に行えます。 3. 豊富なアクションファイルを選んで Enter を押すと、アクションメニューが表示されます。例えば、こんな操作ができます： ![ccexp のアクションメニュー - ファイル操作のオプション一覧](https://api.izanami.dev/storage/v1/object/public/pictures/eyecatch/ac12d936-8830-4e4c-bd98-fbb0f97fad7e/77477f4f-864f-4492-952d-9338e96f9aef.png) 選択したファイルに対して実行できるアクションメニュー - ファイル内容をクリップボードにコピー - 絶対パスをコピー - 相対パスをコピー - ファイルを現在のディレクトリにコピー - エディタで編集（VSCode や Cursor, Zed などの$EDITOR に設定されているもの） - デフォルトアプリケーションで開くこれらのアクションで、設定ファイルの確認から共有、編集まで、すべての作業をスムーズに進められます。まとめ Claude Code を使っていれば、設定ファイルの管理は避けて通れません。もし同じ悩みを感じている方がいればを一度お試しください！今後は設定ファイル(settings.json)のサポートも予定しており、Claude Code 関連の設定を一元管理できるツールとして改善を重ねていきます。もしよろしければ、[GitHub リポジトリ](https://github.com/nyatinte/ccexp)に star をいただけると励みになります！閲覧ありがとうございました！謝辞 [awesome-claude-code](https://github.com/hesreallyhim/awesome-claude-code)にも掲載いただきました！ありがとうございます！リンク集 - [GitHub リポジトリ](https://github.com/nyatinte/ccexp) - [npm](https://www.npmjs.com/package/ccexp) - [X](https://x.com/nyatinte/status/1942569219117498577)

TrainLCD

関口翼 — Tue, 22 Jul 2025 01:21:57 GMT

個人開発プロダクト「TrainLCD」を2019年より開発・継続運用しています（2025年夏で6周年）。 React Native + Expo によるモバイルアプリ開発を軸に、Rust + gRPC・PostgreSQL を活用したデータ提供基盤の構築、UI/UX設計、テレメトリの整備までを一貫して個人で担当しています。実在の鉄道路線データをもとにした走行表示やリアルタイム連携に対応しており、公共交通における没入型体験の提供を目指して開発を進めています。バックエンドでは Rust 製の gRPC サーバと PostgreSQL による構成を採用し、初期化処理・クエリ設計・リソース制御なども含めて最適化。レスポンスの高速化とクラウドコストの抑制を両立しています。また、アプリ内フィードバックから GitHub Issues 自動起票、Discord 通知までのフローを自動化し、ユーザー起点での改善サイクルを整備しました。

ClaudeCodeも時間が欲しい

栃沢拓実 — Fri, 11 Jul 2025 12:46:26 GMT

ClaudeCodeも時間が欲しいこんにちは。とちです。最近ClaudeCodeを使っていて、時々「もうちょっと深く調査してほしいな」と感じることがありました。例えば、「このエラーを修正して」と頼んでも、関連するファイルを全部は見てくれないとか。「リファクタリングして」とお願いしても、最低限の変更しかしてくれないとか。そんな時にCLAUDE.mdでAIの動きを調整できることを知って、色々試してみた結果を共有してみます。 CLAUDE.mdで試してみたこと CLAUDE.mdに「時間をかけて調査して」みたいな指示を書き込んでみたら、こんな変化がありました： - 調査するファイル数が明らかに増えた - 今まで気づかなかった潜在的な問題を指摘してくれるようになった - 実装方法もより詳細に提案してくれるようになった個人的な体験ですが、変化は確実にありました。具体的な設定方法と実例を紹介します。この記事で分かること - CLAUDE.mdの基本的な設定方法 - 実際に効果があった指示の例 - タスクに応じた使い分け方よくあるシチュエーション「調査が浅い」問題「影響範囲を考慮しない」問題「表面的な実装」問題なんでこうなるの？ AIも基本的には「効率的」に動く AIアシスタントって、基本的には効率的に動くようになってるんですよね。 - 必要最小限で判断：ファイルも必要な分だけ読む - 速い応答を優先：とりあえず回答しようとする - リソース節約：計算コストを抑えようとする普通は良いことなんですが、複雑なタスクだとちょっと物足りない結果になっちゃうこともあります。 AIも人間と同じで「時間」があるといいのかもエンジニアの先輩に難しい問題を相談したとき、いきなり完璧な答えが返ってくることはあまりないですよね。たいてい、こんな感じです： - 「うーん、ちょっと調べさせて」 - 「ああ、こっちにも影響しそうだな」 - 「なるほどね、根本原因はこれか」 AIも同じで、ちゃんと時間をかけて考えると、より丸みのある答えを返してくれるのかもしれません。試してみたい指示のコツ指示の仕方で結果が変わるかも AIへの指示に「時間をかけて」みたいな言葉を加えるだけで、AIの動きが変わるんじゃないかな、という仮説です。特別なツールも設定も不要で、普段の指示を少し変えるだけです。試してみたい指示文の例ケース1：通常の会話で指示する場合ケース2：CLAUDE.mdを使う場合ケース3：プロンプトに直接記載する場合試してみたいキーワードこんな言葉を指示に含めてみるといいかも： - 「時間をかけて」 - 「じっくり」 - 「徹底的に」 - 「全体像を把握してから」 - 「根本原因を特定してから」 - 「慎重に検討して」実際に試してみた結果 Case 1: エラー調査通常の指示：「時間をかけて調査して」と指示した場合： Case 2: TypeScript移行通常の指示：「既存の型定義をじっくり調査してから実装して」と指示した場合： Invalid email: ${user.email} もしかしたら違いを感じられるかもしれません。まとめ CLAUDE.mdでAIの動きを調整すると、確かに調査の深さや実装の質が変わりました。個人的な体験では、特に以下のような場面で効果を感じました： - 複雑なバグの原因調査 - コードのリファクタリング - 新機能の設計・実装もちろん、処理時間は長くなりますし、APIの使用量も増えます。でも、結果的に手戻りの作業が減って、トータルでは効率が上がった感じです。簡単なタスクでは通常通り、複雑なタスクでは時間をかけてもらう、という使い分けができるようになったのは良かったです。参考リソース - [Claude Code公式ドキュメント](https://docs.anthropic.com/en/docs/claude-code) - [CLAUDE.mdの詳細設定ガイド](https://docs.anthropic.com/en/docs/claude-code/memory) - [AIプロンプトエンジニアリングのベストプラクティス](https://www.anthropic.com/news/prompt-engineering)

React NavigationとExpo Routerって結局どちらをを選ぶべき？

栃沢拓実 — Wed, 09 Jul 2025 19:05:39 GMT

React NavigationとExpo Routerって結局どちらを選ぶべき？この記事で得られること個人開発3つのアプリで実際に試行錯誤した体験談 + 夜中にハマった落とし穴 + 本音のパフォーマンス比較により、React Nativeアプリのナビゲーション選択で二度と迷わない判断基準と、個人開発者のための実践的な選び方を提供。選択判断マトリックスプロジェクト評価シート | 項目 | React Navigation | Expo Router | 重要度 | |------|------------------|-------------|--------| | プロジェクト規模 | 大規模に適する | 小〜中規模に適する | ★★★★★ | | 複雑なナビゲーション | 優秀 | 制限あり | ★★★★☆ | | 学習コスト | 高い | 低い（Web経験者） | ★★★☆☆ | | TypeScript対応 | 手動設定 | 自動生成 | ★★★★☆ | 背景・問題の整理 2025年のナビゲーション選択問題 React Nativeアプリ開発において、ナビゲーションライブラリの選択は開発効率とアプリ品質に直結する重要な判断です。2025年現在、主要な選択肢はReact NavigationとExpo Routerの2つに収束していますが、どちらを選ぶべきかの明確な指針が不足している状況です。特に以下の課題が開発チームを悩ませています：個人開発で実際にハマった話正直言うと、この選択で夜3時まで調べ物をした経験があります。個人開発で実際にやらかした「あるある」な失敗談： 1. 「ちょっと試してみよう」の悲劇：自分のアプリで「Expo Routerって話題だし、React Navigationから移行してみよう」と金曜夜に始めたら、土日まるまる潰れた話。しかも月曜の朝に「やっぱり戻そう」と決断。48時間返して... 2. 「型安全性の罠」にハマった深夜：「Expo Routerなら型安全性バッチリでしょ！」と期待して、ユーザーオブジェクトをパラメータで渡そうとして「なんで動かないの...？」と午前2時まで格闘。結局ググったら「シリアライズ可能な値のみ」という制限があることが判明... 3. 「簡単だと思ってた」症候群：Next.js経験があったので「ファイルベースなら楽勝でしょ」と自信満々で始めたものの、React Navigationの基本概念を理解していなくて、結局公式ドキュメントを一から読み直すハメに。学習コスト、むしろ高くなってる... 技術的特徴の詳細比較アーキテクチャの根本的違い React NavigationとExpo Routerの最大の違いは、ナビゲーション構造の定義方法にあります。 > Expo Routerは、React NativeとWebアプリケーション向けのファイルベースのルーターです。これは、Webの最高のファイルシステムルーティングの概念をユニバーサルアプリケーションに持ち込み、すべてのプラットフォームでルーティングが動作するようにします。 > > 引用：[Expo Router公式ドキュメント](https://docs.expo.dev/router/introduction/) React Navigation：コンポーネント駆動型 Expo Router：ファイルシステム駆動型 TypeScript型安全性の実証 React Navigation の型定義 Expo Router の自動型生成型安全性の比較結果： - React Navigation：手動設定で100%の型安全性を実現可能 - Expo Router：自動生成で90%の型安全性を提供（制限あり）パフォーマンス測定結果「実際のところ、どっちが速いの？」という疑問に答えるべく、同じアプリで両方試してみました。測定環境はiPhone 14 Pro、Android Galaxy S23、データは5回の平均値です： | 指標 | React Navigation v6 | Expo Router v3 | 改善率 | |------|---------------------|----------------|--------| | 初期起動時間 | 1,250ms | 1,180ms | 5.6% | | 画面遷移時間 | 180ms | 145ms | 19.4% | | メモリ使用量 | 45MB | 42MB | 6.7% | | バンドルサイズ | 2.8MB | 2.9MB | -3.6% | 正直な感想：数値で見ると「うーん、そんなに変わらない？」と思うかもしれませんが、体感的にはExpo Routerの方がスムーズでした。特に画面遷移時のちらつきが減ったのは嬉しい誤算。ファイルベースルーティングの遅延読み込みが効いてるのかも。プロジェクト規模別推奨パターン小規模プロジェクト（画面数〜20）推奨：Expo Router 理由： - 設定コストが低い（楽したい） - ファイルベースで直感的（頭で考えなくていい） - ディープリンキング自動対応（勝手に動く）個人開発者の実感：「小規模なら絶対Expo Router。設定で悩む時間が減って、その分機能開発に時間を回せる。特に週末開発だと時間が限られるから、この効率化は大きい。」中規模プロジェクト（画面数20〜50）推奨：悩ましい... 判断基準： - Web対応が必要 → Expo Router（楽） - 複雑なナビゲーション → React Navigation（自由度） - TypeScript重視 → どちらでも可（好み）個人開発者の実感：「この規模が一番悩む。最初はExpo Routerで始めて、制約を感じたらReact Navigationに移行、というパターンが多い。」大規模プロジェクト（画面数50〜）推奨：React Navigation 理由： - 柔軟性とカスタマイズ性（必須） - 長期メンテナンス性（重要） - 「あとで困らない」安心感個人開発者の実感：「大規模になると、どうしても複雑な要件が出てくる。最初からReact Navigationにしておけば、後で『あー、これExpo Routerだと無理だわ』って絶望しなくて済む。」実装例：移行時の具体的な課題と対策 React Navigation → Expo Router移行 1. パラメータ制限の対応 /profile/${user.id}移行工数: ${calculateMigrationDays(projectA)}日まとめ重要ポイント（3点） 1. プロジェクト規模が最重要判断基準：小規模はExpo Router、大規模はReact Navigationが適している 2. 移行は慎重に：既存プロジェクトの移行は、明確な利益がある場合のみ実施する 3. TypeScript対応は両方可能：手動 vs 自動の違いはあるが、どちらも型安全性を実現できる参考リソース - [Expo Router公式ドキュメント](https://docs.expo.dev/router/introduction/) - 最新仕様確認 - [React Navigation公式ドキュメント](https://reactnavigation.org/) - TypeScript設定方法 - [移行ガイド（公式）](https://docs.expo.dev/router/migrate/from-react-navigation/) - 段階的移行手順 - [Exploring Navigation Solutions in React Native - Medium](https://medium.com/@pallavi8khedle/exploring-navigation-solutions-in-react-native-expo-router-vs-react-navigation-37c270d45a7b) - 詳細な技術比較 - [Stack Overflow Discussion](https://stackoverflow.com/questions/79331397/how-to-migrate-from-expo-router-to-react-navigation) - 実際の移行課題 - [GitHub Discussion - Is expo-router a replacement?](https://github.com/expo/router/discussions/668) - コミュニティの議論 ---