resource-curator

コンセプトページ向けリソースキュレーターのスキル

このスキルでは、コンセプトドキュメントページ向けに、高品質な外部リソース（記事、動画、コース）を探し、評価、追加、管理する方法を紹介します。既存リソースのリンク切れや古いコンテンツの監査も対象です。

使用するタイミング

• 新しいコンセプトページにリソースを追加するとき
• 既存ページのリソースを更新するとき
• リンク切れや古いリンクを監査するとき
• コミュニティから投稿されたリソースを確認するとき
• 定期的なリンクメンテナンスを行うとき

リソースキュレーションの方法

包括的なリソースキュレーションを行うには、次の5つのフェーズに従います。

フェーズ1：既存リソースの監査

新しいリソースを追加する前に、既存のリソースを監査します。

1. リンクのアクセス性を確認する — 各リンクは200を返しますか？
2. 内容の正確性を確認する — 内容は現在も正確ですか？
3. 公開日を確認する — トピックに対して古すぎませんか？
4. 古いコンテンツを特定する — 古い構文やパターンを使っていませんか？
5. 説明を見直す — 具体的ですか、それとも一般的ですか？

フェーズ2：リソースの不足を特定する

現在のリソースを目標数と比較します。

セクション	目標数	アイコン
リファレンス	MDNリンク2～4件	book
記事	4～6件の記事	newspaper
動画	3～4本の動画	video
コース	1～3件（任意）	graduation-cap
書籍	1～2冊（任意）	book

次の点を確認します。

• 初心者と上級者の両方に十分なリソースがありますか？
• 図やアニメーションなどの視覚的なコンテンツがありますか？
• 公式リファレンス（MDN）が含まれていますか？
• 教え方に多様性がありますか？

フェーズ3：新しいリソースを探す

対象を絞ったクエリを使い、信頼できる情報源を検索します。

記事の場合：

[concept] javascript tutorial site:javascript.info
[concept] javascript explained site:freecodecamp.org
[concept] javascript site:dev.to
[concept] javascript deep dive site:2ality.com
[concept] javascript guide site:css-tricks.com

動画の場合：

YouTube: [concept] javascript explained
YouTube: [concept] javascript tutorial
YouTube: jsconf [concept]
YouTube: [concept] javascript fireship
YouTube: [concept] javascript web dev simplified

MDNの場合：

[concept] site:developer.mozilla.org
[API name] MDN

フェーズ4：説明を作成する

各リソースには、具体的で価値のある説明が必要です。

形式：

Sentence 1: What makes this resource unique OR what it specifically covers
Sentence 2: Why reader should click (what they'll gain, who it's best for)

フェーズ5：フォーマットして整理する

• 適切なアイコンを使い、正しいCard構文を使用します
• リソースを論理的な順序に並べます（基礎的なものを先に、高度なものを後にします）
• 一貫したフォーマットにします

---

信頼できる情報源

リファレンスの情報源（優先順位順）

優先順位	情報源	URL	最適な用途
1	MDN Web Docs	developer.mozilla.org	APIドキュメント、ガイド、互換性
2	ECMAScript Spec	tc39.es/ecma262	権威ある動作仕様
3	Node.js Docs	nodejs.org/docs	Node.js固有のAPI
4	Web.dev	web.dev	パフォーマンス、ベストプラクティス
5	Can I Use	caniuse.com	ブラウザー互換性

記事の情報源（優先順位順）

優先順位	情報源	信頼できる理由
1	javascript.info	網羅的で、演習があり、よくメンテナンスされている
2	MDN Guides	公式で正確、定期的に更新されている
3	freeCodeCamp	初心者にもわかりやすく、実践的
4	2ality (Dr. Axel)	技術的な深掘り、仕様に重点
5	CSS-Tricks	DOMや視覚的なトピックに強く、文章も読みやすい
6	dev.to (Lydia Hallie)	視覚的な解説、アニメーション
7	LogRocket Blog	実践的なチュートリアル、実例に基づく内容
8	Smashing Magazine	詳細で、十分に調査されている
9	Digital Ocean	わかりやすいチュートリアル、例
10	Kent C. Dodds	テスト、React、ベストプラクティス

動画クリエイター（優先順位順）

優先順位	クリエイター	スタイル	最適な用途
1	Fireship	テンポが速く、現代的で、楽しい	手短な概要、現代のJS
2	Web Dev Simplified	わかりやすく、初心者にも親しみやすい	初心者、基礎
3	Fun Fun Function	深掘り、個性豊か	「なぜ」を理解する
4	Traversy Media	網羅的な集中講座	トピック全体の学習
5	JSConf/dotJS	専門家によるカンファレンストーク	高度な内容、詳細な解説
6	Academind	丁寧な解説	完全な理解
7	The Coding Train	創造的で、視覚的	視覚的に学ぶ人
8	Wes Bos	実践的で、実例に基づく	応用的な学習
9	The Net Ninja	手順を追ったチュートリアル	一緒に手を動かしながら学ぶ
10	Programming with Mosh	プロフェッショナルで、わかりやすい	キャリアを意識した学習

コースの情報源

情報源	種類	備考
javascript.info	無料	内容が充実しており、演習もあります
Piccalilli	無料	読みやすく、現代的です
freeCodeCamp	無料	プロジェクトベースです
Frontend Masters	有料	講師は各分野のエキスパートです
Egghead.io	有料	短く、要点を絞ったレッスンです
Udemy（高評価のコース）	有料	レビューをよく確認してください
Codecademy	フリーミアム	インタラクティブです

---

品質基準

必須条件（必須）

• リンクが有効 — 200 を返す（404、301、5xx ではない）
• JavaScript に焦点を当てている — 主に C#、Python、Java などを扱っていない
• 技術的に正確 — 事実誤認やアンチパターンがない
• 利用しやすい — 無料、または十分な無料プレビューがある

望ましい条件（推奨）

• 十分に新しい — 以下の公開日ガイドラインを参照
• 信頼できる情報源 — 信頼できる情報源の一覧にあるか、著名な制作者によるもの
• 独自の視点がある — 既存のリソースと重複していない
• 適切な深さ — 概念の複雑さに合っている
• 反応が良い — 肯定的なコメントや多くの視聴数がある（動画の場合）

却下すべき危険信号

危険信号	重要な理由
どこでも var を使っている	ES6 以降のトピックでは時代遅れです
アンチパターンを教えている	学習者に悪影響を与えます
主に他の言語を扱っている	焦点が適切ではありません
厳しいペイウォール（プレビューなし）	利用できません
現代的なトピックなのに 2015 年より前	古くなっている可能性が高いです
質の低いコメント	問題があることを示す場合が多いです
事実誤認	誤った情報を広めます
釣りタイトルで内容が薄い	読者の時間を無駄にします

---

公開日のガイドライン

トピックのカテゴリー	最低年	理由
ES6 以降の機能	2015 年以降	ES6 は 2015 年 6 月にリリースされました
Promises	2015 年以降	ES6 でネイティブの Promise が導入されました
async/await	2017 年以降	ES2017 の機能です
ES Modules	2018 年以降	ブラウザーでのサポートが安定しました
オプショナルチェーン（?.）	2020 年以降	ES2020 の機能です
Null 合体演算子（??）	2020 年以降	ES2020 の機能です
トップレベル await	2022 年以降	ES2022 の機能です
基礎（クロージャー、スコープ、this）	いつでも	中核となる概念は変わりません
DOM 操作	2018 年以降	最新の API が推奨されます
Fetch API	2017 年以降	広くサポートされています

目安： 時代とともに変化するトピックでは、過去 3〜5 年以内のコンテンツを優先してください。基礎については、古典的なコンテンツが今でも優れていることがよくあります。

---

説明文の書き方ガイド

公式

Sentence 1: What makes this resource unique OR what it specifically covers
Sentence 2: Why reader should click (what they'll gain, who it's best for)

良い例

<Card title="JavaScript Visualized: Promises & Async/Await — Lydia Hallie" icon="newspaper" href="https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke">
  Animated GIFs showing the call stack, microtask queue, and event loop in action. 
  The visuals make Promise execution order finally click for visual learners.
</Card>

<Card title="What the heck is the event loop anyway? — Philip Roberts" icon="video" href="https://www.youtube.com/watch?v=8aGhZQkoFbQ">
  The legendary JSConf talk that made the event loop click for millions of developers. 
  Philip Roberts' live visualizations are the gold standard — a must-watch.
</Card>

<Card title="You Don't Know JS: Scope & Closures — Kyle Simpson" icon="book" href="https://github.com/getify/You-Dont-Know-JS/blob/2nd-ed/scope-closures/README.md">
  Kyle Simpson's deep dive into JavaScript's scope mechanics and closure behavior. 
  Goes beyond the basics into edge cases and mental models for truly understanding scope.
</Card>

<Card title="JavaScript Promises in 10 Minutes — Web Dev Simplified" icon="video" href="https://www.youtube.com/watch?v=DHvZLI7Db8E">
  Quick, clear explanation covering Promise creation, chaining, and error handling. 
  Perfect starting point if you're new to async JavaScript.
</Card>

<Card title="How to Escape Async/Await Hell — Aditya Agarwal" icon="newspaper" href="https://medium.com/free-code-camp/avoiding-the-async-await-hell-c77a0fb71c4c">
  The pizza-and-drinks ordering analogy makes parallel vs sequential execution crystal clear. 
  Essential reading once you know async/await basics but want to write faster code.
</Card>

悪い例（避ける）

<Card title="Promises Tutorial" icon="newspaper" href="...">
  A comprehensive guide to Promises in JavaScript.
</Card>


<Card title="Learn Closures" icon="video" href="...">
  This video explains closures in JavaScript.
</Card>


<Card title="JavaScript Guide" icon="newspaper" href="...">
  Everything you need to know about JavaScript.
</Card>


<Card title="Understanding the Event Loop" icon="video" href="...">
  A video about understanding the event loop.
</Card>

避けるべき単語やフレーズ

避ける表現	理由	代わりに使う表現
"包括的なガイド..."	曖昧で、使われすぎています	扱う内容を具体的に示す
"すべてを学ぶ..."	ありきたりです	具体的に何を学べるのか？
"知っておくべきすべてのこと..."	大げさです	具体的に述べる
"素晴らしいチュートリアル..."	主観的な埋め草です	何が素晴らしいのか？
"X を説明する"	漠然としすぎています	どのように説明するのか？何が独自なのか？
"X を深く掘り下げる"	曖昧です	どの程度深く、どの側面を扱うのか？

効果的な単語やフレーズ

効果的なフレーズ	例
"段階を追った解説"	"Promise を一から構築する段階を追った解説"
"視覚的な説明"	"アニメーション図解を使った視覚的な説明"
"〜を深く掘り下げる"	"V8 の最適化戦略を深く掘り下げる"
"〜の実践例"	"React フックでのクロージャーの実践例"
"〜の定番リファレンス"	"配列メソッドのシグネチャーを調べる定番リファレンス"
"ようやく X が腑に落ちる"	"プロトタイプチェーンがようやく腑に落ちる"
"〜を始めたばかりの人に最適"	"非同期コードを始めたばかりの人に最適"
"X、Y、Z を扱う"	"作成、チェーン、エラー処理を扱う"

---

リンク監査プロセス

ステップ 1：各リンクを確認する

コンセプトページの各リソースについて：

1. リンクをクリックする — 表示されますか？
2. HTTP ステータスを記録する：

ステータス	意味	対応
200	OK	残して、コンテンツを確認する
301/302	リダイレクト	最終 URL に更新する
404	見つかりません	削除するか、代替を探す
403	アクセス禁止	手動で確認する。地域制限の可能性があります
5xx	サーバーエラー	後で再試行する。一時的な問題の可能性があります

ステップ 2：コンテンツを検証する

アクセスできる各リンクについて：

1. 内容に目を通す — 現在も正確ですか？
2. 日付を確認する — いつ公開・更新されましたか？
3. JavaScript が中心か確認する — 主に JS を扱っていますか？
4. 問題の兆候を探す — アンチパターン、誤り、古い構文

ステップ 3：説明を見直す

各リソースについて：

1. 現在の説明を読む — 具体的ですか？
2. 実際のコンテンツと比較する — 内容と一致していますか？
3. 一般的な表現がないか確認する — 「包括的なガイド」など
4. 改善点を特定する — さらに具体的にするにはどうすればよいですか？

ステップ 4：不足を分析する

すべてのリソースを監査した後：

1. セクションごとに数える — 目標数を満たしていますか？
2. 多様性を確認する — 初心者向けと上級者向け、ビジュアルとテキストの両方がありますか？
3. 不足している種類を特定する — MDN がない？動画がない？
4. 推奨事項を記録する — 何を追加すべきですか？

---

リソースセクションのテンプレート

リファレンスセクション

## Reference

<CardGroup cols={2}>
  <Card title="[Main Topic] — MDN" icon="book" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/...">
    Official MDN documentation covering [specific aspects]. 
    The authoritative reference for [what it's best for].
  </Card>
  <Card title="[Related API/Concept] — MDN" icon="book" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/...">
    [What this reference covers]. 
    Essential reading for understanding [specific aspect].
  </Card>
</CardGroup>

記事セクション

## Articles

<CardGroup cols={2}>
  <Card title="[Article Title]" icon="newspaper" href="...">
    [What makes it unique/what it covers]. 
    [Why read this one/who it's for].
  </Card>
  <Card title="[Article Title]" icon="newspaper" href="...">
    [Specific coverage]. 
    [Value proposition].
  </Card>
  <Card title="[Article Title]" icon="newspaper" href="...">
    [Unique angle]. 
    [Why it's worth reading].
  </Card>
  <Card title="[Article Title]" icon="newspaper" href="...">
    [What it covers]. 
    [Best for whom].
  </Card>
</CardGroup>

動画セクション

## Videos

<CardGroup cols={2}>
  <Card title="[Video Title] — [Creator]" icon="video" href="https://www.youtube.com/watch?v=...">
    [What it covers/unique approach]. 
    [Why watch/who it's for].
  </Card>
  <Card title="[Video Title] — [Creator]" icon="video" href="https://www.youtube.com/watch?v=...">
    [Specific focus]. 
    [What makes it stand out].
  </Card>
  <Card title="[Video Title] — [Creator]" icon="video" href="https://www.youtube.com/watch?v=...">
    [Coverage]. 
    [Value].
  </Card>
</CardGroup>

書籍セクション（任意）

<Card title="[Book Title] — [Author]" icon="book" href="...">
  [What the book covers and its approach]. 
  [Who should read it and what they'll gain].
</Card>

コースセクション（任意）

<CardGroup cols={2}>
  <Card title="[Course Title] — [Platform]" icon="graduation-cap" href="...">
    [What the course covers]. 
    [Format and who it's best for].
  </Card>
</CardGroup>

---

リソース監査レポートのテンプレート

このテンプレートを使用して、監査結果を記録します。

# Resource Audit Report: [Concept Name]

**File:** `/docs/concepts/[slug].mdx`
**Date:** YYYY-MM-DD
**Auditor:** [Name/Claude]

---

## Summary

| Metric | Count |
|--------|-------|
| Total Resources | XX |
| Working Links (200) | XX |
| Broken Links (404) | XX |
| Redirects (301/302) | XX |
| Outdated Content | XX |
| Generic Descriptions | XX |

## Resource Count vs Targets

| Section | Current | Target | Status |
|---------|---------|--------|--------|
| Reference (MDN) | X | 2-4 | ✅/⚠️/❌ |
| Articles | X | 4-6 | ✅/⚠️/❌ |
| Videos | X | 3-4 | ✅/⚠️/❌ |
| Courses | X | 0-3 | ✅/⚠️/❌ |

---

## Broken Links (Remove or Replace)

| Resource | Line | URL | Status | Action |
|----------|------|-----|--------|--------|
| [Title] | XX | [URL] | 404 | Remove |
| [Title] | XX | [URL] | 404 | Replace with [alternative] |

---

## Redirects (Update URLs)

| Resource | Line | Old URL | New URL |
|----------|------|---------|---------|
| [Title] | XX | [old] | [new] |

---

## Outdated Resources (Consider Replacing)

| Resource | Line | Issue | Recommendation |
|----------|------|-------|----------------|
| [Title] | XX | Published 2014, uses var throughout | Replace with [modern alternative] |
| [Title] | XX | Pre-ES6, no mention of let/const | Find updated version or replace |

---

## Description Improvements Needed

| Resource | Line | Current | Suggested |
|----------|------|---------|-----------|
| [Title] | XX | "A guide to closures" | "[Specific description with value prop]" |
| [Title] | XX | "Learn about promises" | "[What makes it unique]. [Why read it]." |

---

## Missing Resources (Recommendations)

| Type | Gap | Suggested Resource | URL |
|------|-----|-------------------|-----|
| Reference | No main MDN link | [Topic] — MDN | [URL] |
| Article | No beginner guide | [Title] — javascript.info | [URL] |
| Video | No visual explanation | [Title] — [Creator] | [URL] |
| Article | No advanced deep-dive | [Title] — 2ality | [URL] |

---

## Non-JavaScript Resources (Remove)

| Resource | Line | Issue |
|----------|------|-------|
| [Title] | XX | Primarily about C#, not JavaScript |

---

## Action Items

### High Priority (Do First)
1. **Remove broken link:** [Title] (line XX)
2. **Add missing MDN reference:** [Topic]
3. **Replace outdated resource:** [Title] with [alternative]

### Medium Priority
1. **Update redirect URL:** [Title] (line XX)
2. **Improve description:** [Title] (line XX)
3. **Add beginner-friendly article**

### Low Priority
1. **Add additional video resource**
2. **Consider adding course section**

---

## Verification Checklist

After making changes:

- [ ] All broken links removed or replaced
- [ ] All redirect URLs updated
- [ ] Outdated resources replaced
- [ ] Generic descriptions rewritten
- [ ] Missing resource types added
- [ ] Resource counts meet targets
- [ ] All new links verified working
- [ ] All descriptions are specific and valuable

---

クイックリファレンス

アイコンのリファレンス

コンテンツの種類	アイコンの値
MDN／公式ドキュメント	book
記事／ブログ投稿	newspaper
動画	video
コース	graduation-cap
書籍	book
関連コンセプト	文脈に適したもの

文字数のガイドライン

要素	ガイドライン
カードのタイトル	簡潔にし、動画の場合は制作者を含める
説明の 1 文目	扱う内容／独自の特徴
説明の 2 文目	読む・見る理由／対象者

リソースの並べ方

各セクション内で、リソースを次の順に並べます：

1. 基礎的で初心者にもわかりやすいものを先に
2. コミュニティのコンテンツより公式リファレンスを先に
3. 特におすすめのものを目立つ位置に
4. 上級者向け・ニッチなコンテンツを最後に

---

品質チェックリスト

リンクの確認

• すべてのリンクが 200 を返す（404、301 ではない）
• リダイレクトの連鎖がない
• 事前の告知なしにハードペイウォールへ誘導していない
• 利用可能な場合、すべての URL が HTTPS になっている

コンテンツの品質

• すべてのリソースが JavaScript を中心に扱っている
• アンチパターンを教えるリソースがない
• 公開日がトピックに適している
• 初心者向けと上級者向けのコンテンツが混在している
• ビジュアルとテキストのリソースが含まれている

説明の品質

• すべての説明が具体的である（一般的な表現ではない）
• 説明で独自の価値が伝わる
• 「包括的なガイド…」という表現がない
• 各説明が 2 文である
• 説明が実際のコンテンツと一致している

網羅性

• MDN／公式リファレンスが 2～4 件
• 良質な記事が 4～6 件
• 良質な動画が 3～4 件
• リソースが論理的な順序で並んでいる
• 教え方に多様性がある

---

まとめ

コンセプトページのリソースを選定する際は：

1. まず監査する — 既存のリンクとコンテンツをすべて確認する
2. 不足を特定する — 目標数（リファレンス 2～4 件、記事 4～6 件、動画 3～4 件）と比較する
3. 質の高いリソースを探す — 信頼できる情報源を検索する
4. 具体的な説明を書く — 独自の特徴と、読む・見る理由を記載する
5. 正しく書式を整える — Card の構文、アイコン、並び順を適切にする
6. 変更を記録する — 監査レポートのテンプレートを使用する

覚えておきましょう： リソースは学習を促進するためのものであり、ページのかさ増しのためのものではありません。すべてのリンクが本当の価値を提供する必要があります。量より質です。平凡なリソースをたくさん並べるより、優れたリソースを少数掲載するほうが効果的です。