コードスニペット保存

使い方

code

/snippet

保存先（自動判定）

存在する方に保存:

•会社PC: C:\Users\guest04\Desktop\高橋研三\03_knowledge\その他\00_サンプルソース\★{名前}.md
•自宅PC: D:\50_knowledge\その他\00_サンプルソース\★{名前}.md

フォーマット

markdown

# タイトル

1行説明文

★核心的な要点・重要な式を抜粋
if (scroll > target - windowHeight + 200) {

## ★重要ポイント

【★ポイント1: タイトル】
```言語
実際に画面で動作するコード例（必須）

1行説明文

【★ポイント2: タイトル】

言語

実際に画面で動作するコード例（必須）

1行説明文

HTML

html

<!-- HTML コード -->

CSS

css

/* CSS コード */

JavaScript

javascript

// JavaScript コード

動作フロー（任意）

•手順1
•手順2

トラブルシューティング（任意）

エラー: 〜

原因: 〜対処: 〜

code


### 例
```markdown
# jQuery スクロールフェードイン - カードを下から上に動かす（スクロール量 > ターゲット位置 - 画面高さ で発火）

スクロールで要素が画面内に入ったら、下から上にフェードインするアニメーション。

★ようするに式を覚える。スクロール量がふえたら、ターゲット位置より発火する
if (scroll > target - windowHeight + 200) {

## ★重要ポイント

【★ポイント1: jQuery読込確認必須】
```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/work.js"></script>

【★ポイント2: :not(.is-visible) 除外構文】 .is-visibleクラスが無い要素だけ処理することで、一度表示した要素は次回スキップされる。

HTML

（フルソース）

CSS

（フルソース）

JavaScript

（フルソース）

code


## 動作
1. 会話履歴を分析して★ポイントを自動抽出
2. ユーザーに★ポイントを提示して確認・修正
3. 分かりやすいファイル名を自動生成
4. スニペット作成（フルソース + ★ポイント）
5. memo.mdに自動追記（★ポイント + リンク）

## Claudeへの実行指示

/snippet 実行時は以下の手順で進める：

### 1. 会話履歴分析
- エラーと修正内容を抽出
- つまずいた箇所を特定
- Before/After の比較を整理

### 2. ユーザーヒアリング（必須）
以下のように提示：

📋 今回の★ポイントを抽出しました：

【気づき】

•★ポイント1の概要
•★ポイント2の概要

【詳細ポイント】 ★ポイント1: 詳しい説明 ★ポイント2: 詳しい説明

追加・修正したい★ポイントはありますか？なければ「OK」と答えてください。

code


### 3. ファイル名確認
「★{名前}.md」形式で提案 → ユーザー確認

### 4. スニペット作成
- フルソース（HTML/CSS/JS）
- ★ポイントをソース横に配置

### 5. memo.md自動追記
- **ファイルの最後（一番下）に追記**
- **Read + Edit ツール使用（Bash禁止・文字化け防止）**
- 【気づき】【ポイント】形式
- 重要コード部分も含める
- リンク追加

## 自動抽出される★ポイント
- エラーと修正内容
- つまずいた箇所
- 重要な気づき
- Before/After の比較

## memo.md 追記フォーマット
```markdown
▢
メモ：タイトル（例: jQuery セレクター - カンマは""の中に入れる（複数クラスを一度に選択・引数で分けると無視される））

【気づき】
★ポイント1の説明
★ポイント2の説明

【ポイント】

★ポイント1詳細
```言語
重要なコード部分

★ポイント2詳細

言語

重要なコード部分

★コピペで動く最小コード（ファイル分離版）

HTML

html

（HTML部分のみ。CSSはlink、JSはscriptで外部読込）

CSS（css/ファイル名.css）

css

（CSS部分のみ）

JavaScript（js/ファイル名.js）

javascript

（JS部分のみ）

📋 詳細ソース

code


### memo.mdコピペコードのルール
- **HTML/CSS/JSを必ず別ブロックで記載**（1ファイルにまとめない）
- HTMLにはCSS/JSの読込タグ（link, script）を含める
- 会社でそのままファイル分けてコピペできる形にする

## 注意
- **★ポイントには必ず画面で動作するコード例を含める（説明だけ禁止）**
- ファイル名は必ず `★` で開始
- 重要ポイントには `★` マークを付ける
- コードブロックは言語別に分ける
- ★ポイントはソースの近くに配置
- memo.mdは `D:\50_knowledge\01_memo.md`
- **memo.mdへの追記は必ずファイルの最後（一番下）に行う**
- **memo.md追記時は Read + Edit ツールを使用（Bash禁止・UTF-8文字化け防止）**
- **リンクは `./その他/00_サンプルソース/` を使用**（`../` ではない）
  - `D:\50_knowledge\01_memo.md` から `D:\50_knowledge\その他\00_サンプルソース\` へは同じディレクトリ内なので `./`