+
+
+ 表示する用語
+ チェックしたカテゴリの用語を強調表示し、カーソルを合わせると説明を表示します。
+ +設定を読み込み中…
+ +カテゴリを無効にしても、お気に入りは残ります。
+
+
+
+ お気に入り
+0件
+お気に入りはまだありません。
+チェックしたカテゴリの用語を強調表示し、カーソルを合わせると説明を表示します。
+ +設定を読み込み中…
+ +カテゴリを無効にしても、お気に入りは残ります。
+0件
+お気に入りはまだありません。
+JavaScript
') { + const d = new JSDOM(html, { runScripts: 'outside-only', pretendToBeVisual: true }); + const observers = []; + const NativeObserver = d.window.MutationObserver; + d.window.MutationObserver = class extends NativeObserver { + constructor(callback) { super(callback); observers.push(this); } + }; + const close = d.window.close.bind(d.window); + d.window.close = () => { observers.forEach(observer => observer.disconnect()); close(); }; + d.window.Highlight = class extends Set {}; + d.window.CSS = { highlights: new Map() }; + return d; +} +const settle = async (w) => { await new Promise(resolve => w.requestAnimationFrame(() => w.requestAnimationFrame(resolve))); }; +function storage(w, initial = {}, options = {}) { + const data = { ...initial }; + const listeners = new Set(); + const emit = (changes, area = 'sync') => listeners.forEach(fn => fn(changes, area)); + w.chrome = { storage: { onChanged: { addListener: fn => listeners.add(fn), removeListener: fn => listeners.delete(fn) }, sync: { + get: async () => { + const snapshot = { ...data }; + if (options.beforeRead) await options.beforeRead(emit); + return snapshot; + }, + set: async (values) => { + if (options.failWrite) throw Error('write failed'); + const changes = Object.fromEntries(Object.entries(values).map(([k, v]) => [k, { oldValue: data[k], newValue: v }])); + Object.assign(data, values); emit(changes); + }, + } } }; + return { data, emit }; +} + +test('1,000段落のうち変更・追加されたテキストだけを検索し、削除Rangeを除去する', async () => { + const d = dom('JavaScript
'.repeat(1000) + 'React
Vue
'; + w.document.querySelector('main').append(wrapper); + wrapper.firstChild.firstChild.data = 'Nuxt'; + await settle(w); + assert.deepEqual(calls, ['Nuxt', 'Vue']); + calls.length = 0; + wrapper.remove(); + await settle(w); + assert.equal(highlight.size, 1000); + assert.equal(calls.length, 0); + h.disconnect(); + } finally { w.close(); } +}); + +test('ノード移動・body差し替え・編集領域の切り替えでも古いRangeを残さない', async () => { + const d = dom('React
Git
'; + w.document.body.replaceWith(body); await settle(w); + assert.equal(ranges.size, 1); assert.equal([...ranges][0].toString(), 'Git'); + h.disconnect(); + } finally { w.close(); } +}); + +test('設定の初回読込中に受信した変更が古い値で上書きされない', async () => { + const d = dom(); const w = d.window; + try { + storage(w, {}, { beforeRead: async emit => emit({ 'termCategory.javascript': { newValue: false } }) }); + w.eval(settingsCode); + let received; + const stop = w.TestModule.observeCategorySettings(value => { received = value; }, assert.fail); + await settle(w); + assert.equal(received.javascript, false); + assert.equal(received.basics, true); + await w.TestModule.setCategoryEnabled('basics', false); + assert.equal(received.javascript, false); assert.equal(received.basics, false); + stop(); + } finally { w.close(); } +}); + +test('カテゴリOFFで表示済みの説明とハイライトが消え、ONで戻る。お気に入りは保持', async () => { + const d = dom('JavaScript
'); const w = d.window; + try { + const { data } = storage(w, { favoriteTermIds: ['javascript'] }); + const node = w.document.querySelector('p').firstChild; + w.document.caretRangeFromPoint = () => { const r = w.document.createRange(); r.setStart(node, 2); return r; }; + w.Range.prototype.getBoundingClientRect = () => ({ left: 10, bottom: 20, top: 5 }); + w.eval(contentCode); await settle(w); + const hover = async () => { w.document.dispatchEvent(new w.MouseEvent('mousemove', { clientX: 20, clientY: 10 })); await new Promise(r => w.setTimeout(r, 280)); }; + const host = w.document.querySelector('[data-techterm-ui]'); + assert.equal(w.CSS.highlights.get('tw-highlight').size, 1); + await hover(); assert.equal(host.style.display, 'block'); + await w.chrome.storage.sync.set({ 'termCategory.javascript': false }); + assert.equal(host.style.display, 'none'); + assert.equal(w.CSS.highlights.get('tw-highlight').size, 0); + await hover(); assert.equal(host.style.display, 'none'); + await w.chrome.storage.sync.set({ 'termCategory.javascript': true }); + assert.equal(w.CSS.highlights.get('tw-highlight').size, 1); + await hover(); assert.equal(host.style.display, 'block'); + assert.deepEqual(data.favoriteTermIds, ['javascript']); + } finally { w.close(); } +}); + +test('サイドパネルに7カテゴリを表示し、保存と失敗時の復元を行う', async () => { + const d = dom(fs.readFileSync(path.join(root, 'sidepanel.html'), 'utf8')); const w = d.window; + try { + const options = {}; const { data, emit } = storage(w, { 'termCategory.javascript': false }, options); + w.eval(sidepanelCode); await settle(w); + const inputs = [...w.document.querySelectorAll('#term-categories input')]; + assert.equal(inputs.length, 7); assert.equal(inputs[1].checked, false); + inputs[0].click(); await settle(w); + assert.equal(data['termCategory.basics'], false); + assert.equal(data['termCategory.javascript'], false); + const errors = []; w.console.error = (...args) => errors.push(args); + options.failWrite = true; inputs[0].click(); await settle(w); + assert.equal(errors.length, 1); + assert.equal(inputs[0].checked, false); assert.equal(inputs[0].disabled, false); + assert.equal(w.document.querySelector('#settings-error').hidden, false); + emit({ 'termCategory.javascript': { newValue: true } }); + assert.equal(inputs[1].checked, true); + } finally { w.close(); } +}); + +test('全カテゴリOFFの保存状態で起動すると、後から追加した用語も表示しない', async () => { + const d = dom('JavaScript Git API
'); const w = d.window; + try { + const ids = ['basics', 'javascript', 'frameworks', 'html-css', 'development', 'network-data', 'design-performance']; + storage(w, Object.fromEntries(ids.map(id => ['termCategory.' + id, false]))); + w.eval(contentCode); await settle(w); + assert.equal(w.CSS.highlights.get('tw-highlight').size, 0); + const p = w.document.createElement('p'); p.textContent = 'React'; w.document.body.append(p); + await settle(w); + assert.equal(w.CSS.highlights.get('tw-highlight').size, 0); + await w.chrome.storage.sync.set({ 'termCategory.frameworks': true }); + assert.equal(w.CSS.highlights.get('tw-highlight').size, 1); + } finally { w.close(); } +}); diff --git a/packages/browser/tsconfig.json b/packages/browser/tsconfig.json new file mode 100644 index 0000000..1290cee --- /dev/null +++ b/packages/browser/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "target": "ES2022", + "module": "ESNext", + "moduleResolution": "Bundler", + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "types": ["chrome"], + "strict": true, + "noEmit": true, + "skipLibCheck": true + }, + "include": ["src/**/*.ts"] +} diff --git a/packages/core/src/categories.ts b/packages/core/src/categories.ts new file mode 100644 index 0000000..3d50928 --- /dev/null +++ b/packages/core/src/categories.ts @@ -0,0 +1,12 @@ +/** 表示設定で使う安定したカテゴリIDと表示名。 */ +export const termCategories = [ + { id: 'basics', label: 'プログラミング基礎' }, + { id: 'javascript', label: 'JavaScript・TypeScript' }, + { id: 'frameworks', label: 'React・Vue' }, + { id: 'html-css', label: 'HTML・CSS' }, + { id: 'development', label: 'Git・開発ツール' }, + { id: 'network-data', label: '通信・データベース' }, + { id: 'design-performance', label: '設計・性能' }, +] as const; + +export type TermCategory = (typeof termCategories)[number]['id']; diff --git a/packages/core/src/data/terms.json b/packages/core/src/data/terms.json index 86c7ba5..ed57fdd 100644 --- a/packages/core/src/data/terms.json +++ b/packages/core/src/data/terms.json @@ -1,6 +1,7 @@ [ { "id": "closure", + "category": "javascript", "term": "closure", "match": ["クロージャ", "クロージャー"], "short": "自分が作られた場所の変数を覚えている関数。", @@ -10,6 +11,7 @@ }, { "id": "idempotent", + "category": "design-performance", "term": "idempotent", "match": ["冪等", "べき等", "idempotency"], "short": "何回実行しても結果が同じになる性質。", @@ -17,6 +19,7 @@ }, { "id": "race-condition", + "category": "design-performance", "term": "race condition", "match": ["競合状態", "レースコンディション"], "short": "処理の実行順序次第で結果が変わってしまうバグ。", @@ -24,6 +27,7 @@ }, { "id": "memoization", + "category": "design-performance", "term": "memoization", "match": ["メモ化", "memoize", "memo"], "short": "一度計算した結果を覚えておいて使い回すこと。", @@ -31,6 +35,7 @@ }, { "id": "gc", + "category": "design-performance", "term": "garbage collection", "match": ["GC", "ガベージコレクション", "ガベコレ"], "short": "使われなくなったメモリを自動で回収する仕組み。", @@ -38,6 +43,7 @@ }, { "id": "immutable", + "category": "design-performance", "term": "immutable", "match": ["イミュータブル", "不変", "immutability"], "short": "作った後に中身を書き換えられないデータ。", @@ -45,6 +51,7 @@ }, { "id": "dependency-injection", + "category": "design-performance", "term": "dependency injection", "match": ["DI", "依存性注入"], "short": "使う部品を自分で作らず、外から渡してもらう設計。", @@ -52,6 +59,7 @@ }, { "id": "middleware", + "category": "network-data", "term": "middleware", "match": ["ミドルウェア"], "short": "リクエストと本処理の間に挟まる共通処理。", @@ -59,6 +67,7 @@ }, { "id": "polyfill", + "category": "javascript", "term": "polyfill", "match": ["ポリフィル"], "short": "古い環境に新しい機能を後付けするコード。", @@ -66,6 +75,7 @@ }, { "id": "hoisting", + "category": "javascript", "term": "hoisting", "match": ["巻き上げ", "ホイスティング"], "short": "宣言がスコープの先頭に持ち上げられる挙動。", @@ -74,6 +84,7 @@ }, { "id": "use-state", + "category": "frameworks", "term": "useState", "match": ["ユーズステート"], "short": "React で「変わる値」を持つためのフック。", @@ -84,6 +95,7 @@ }, { "id": "use-effect", + "category": "frameworks", "term": "useEffect", "short": "React で描画のあとに副作用を走らせるフック。", "detail": "通信・購読・DOM 操作など、描画そのものではない処理を置く。第 2 引数の依存配列に入れた値が変わったときだけ再実行される。", @@ -92,6 +104,7 @@ }, { "id": "promise", + "category": "javascript", "term": "Promise", "match": ["プロミス"], "short": "「あとで結果が入る箱」を表すオブジェクト。", @@ -100,6 +113,7 @@ }, { "id": "generic", + "category": "javascript", "term": "generics", "match": ["ジェネリクス", "generic", "型引数"], "short": "型を後から差し込めるようにする仕組み。", @@ -107,6 +121,7 @@ }, { "id": "type-guard", + "category": "javascript", "term": "type guard", "match": ["型ガード"], "short": "実行時のチェックで型を絞り込む書き方。", @@ -115,6 +130,7 @@ }, { "id": "orm", + "category": "network-data", "term": "ORM", "match": ["オーアールエム", "object relational mapping"], "short": "DB のテーブルをコードのオブジェクトとして扱う道具。", @@ -122,6 +138,7 @@ }, { "id": "n-plus-one", + "category": "network-data", "term": "N+1 problem", "match": ["N+1", "エヌプラスワン"], "short": "一覧を出すたびに件数ぶん追加クエリが飛ぶ性能問題。", @@ -129,6 +146,7 @@ }, { "id": "idempotency-key", + "category": "design-performance", "term": "idempotency key", "match": ["冪等キー"], "short": "同じリクエストの二重実行を防ぐための識別子。", @@ -136,6 +154,7 @@ }, { "id": "cors", + "category": "network-data", "term": "CORS", "match": ["オリジン間リソース共有", "cross origin resource sharing"], "short": "別ドメインへのブラウザからの通信を許可する仕組み。", @@ -143,6 +162,7 @@ }, { "id": "jwt", + "category": "network-data", "term": "JWT", "match": ["json web token", "ジョット"], "short": "署名つきで中身を自分で検証できるトークン。", @@ -150,6 +170,7 @@ }, { "id": "migration", + "category": "network-data", "term": "migration", "match": ["マイグレーション", "マイグレ"], "short": "DB のスキーマ変更を手順として記録したファイル。", @@ -157,6 +178,7 @@ }, { "id": "debounce", + "category": "design-performance", "term": "debounce", "match": ["デバウンス"], "short": "連続した呼び出しを、止まってから 1 回にまとめる。", @@ -164,6 +186,7 @@ }, { "id": "throttle", + "category": "design-performance", "term": "throttle", "match": ["スロットル", "スロットリング", "throttling"], "short": "呼び出しの頻度を一定間隔までに制限する。", @@ -171,6 +194,7 @@ }, { "id": "exponential-backoff", + "category": "design-performance", "term": "exponential backoff", "match": ["指数バックオフ", "backoff"], "short": "リトライ間隔を 1秒, 2秒, 4秒…と伸ばしていく方式。", @@ -178,6 +202,7 @@ }, { "id": "single-source-of-truth", + "category": "design-performance", "term": "single source of truth", "match": ["SSOT", "信頼できる唯一の情報源"], "short": "同じ情報の正本を 1 箇所だけに持つ設計方針。", @@ -185,6 +210,7 @@ }, { "id": "feature-flag", + "category": "design-performance", "term": "feature flag", "match": ["フィーチャーフラグ", "feature toggle", "機能フラグ"], "short": "コードを出したまま機能のオン/オフを切り替える仕組み。", @@ -192,6 +218,7 @@ }, { "id": "cache", + "category": "design-performance", "term": "cache", "match": ["キャッシュ", "caching"], "short": "一度取得・計算したデータを保存し、次回から素早く使う仕組み。", @@ -199,6 +226,7 @@ }, { "id": "api", + "category": "network-data", "term": "API", "match": ["エーピーアイ", "application programming interface"], "short": "ソフトウェア同士が機能やデータをやり取りするための窓口。", @@ -206,6 +234,7 @@ }, { "id": "refactoring", + "category": "design-performance", "term": "refactoring", "match": ["リファクタリング", "リファクタ"], "short": "動作を変えずに、コードを読みやすく整理すること。", @@ -213,6 +242,7 @@ }, { "id": "object", + "category": "basics", "term": "object", "match": ["オブジェクト"], "short": "複数のデータや処理をひとまとまりにしたもの。", @@ -222,6 +252,7 @@ }, { "id": "class", + "category": "basics", "term": "class", "match": ["クラス"], "short": "同じ種類のオブジェクトを作るための設計図。", @@ -231,6 +262,7 @@ }, { "id": "instance", + "category": "basics", "term": "instance", "match": ["インスタンス"], "short": "クラスなどの設計をもとに実際に作られたオブジェクト。", @@ -239,6 +271,7 @@ }, { "id": "key", + "category": "basics", "term": "key", "match": ["キー", "property name", "プロパティ名"], "short": "オブジェクトなどから値を取り出すための名前。", @@ -247,6 +280,7 @@ }, { "id": "value", + "category": "basics", "term": "value", "match": ["バリュー", "値"], "short": "変数やキーに対応して保存されているデータ。", @@ -255,6 +289,7 @@ }, { "id": "path", + "category": "development", "term": "path", "match": ["パス", "ファイルパス"], "short": "ファイルやディレクトリの場所を表す文字列。", @@ -263,6 +298,7 @@ }, { "id": "directory", + "category": "development", "term": "directory", "match": ["ディレクトリ", "folder", "フォルダ"], "short": "ファイルや別のディレクトリをまとめて置く場所。", @@ -271,6 +307,7 @@ }, { "id": "root-directory", + "category": "development", "term": "root directory", "match": ["ルートディレクトリ", "root folder", "ルートフォルダ"], "short": "ディレクトリ階層のいちばん上にある場所。", @@ -279,6 +316,7 @@ }, { "id": "current-directory", + "category": "development", "term": "current directory", "match": ["カレントディレクトリ", "working directory", "作業ディレクトリ"], "short": "プログラムやコマンドが現在の基準にしているディレクトリ。", @@ -287,6 +325,7 @@ }, { "id": "javascript", + "category": "javascript", "term": "JavaScript", "match": ["ジャバスクリプト", "JS"], "short": "Web ページなどに動きや処理を加えるプログラミング言語。", @@ -296,6 +335,7 @@ }, { "id": "typescript", + "category": "javascript", "term": "TypeScript", "match": ["タイプスクリプト", "TS"], "short": "JavaScript に型の仕組みを加えたプログラミング言語。", @@ -305,6 +345,7 @@ }, { "id": "nodejs", + "category": "javascript", "term": "Node.js", "match": ["Node", "NodeJS", "ノード", "ノードジェイエス"], "short": "ブラウザの外で JavaScript を実行するための環境。", @@ -314,6 +355,7 @@ }, { "id": "vue", + "category": "frameworks", "term": "Vue.js", "match": ["Vue", "VueJS", "ビュー", "ビュージェイエス"], "short": "Web の画面を部品に分けて作るための JavaScript フレームワーク。", @@ -323,6 +365,7 @@ }, { "id": "nextjs", + "category": "frameworks", "term": "Next.js", "match": ["Next", "NextJS", "ネクスト", "ネクストジェイエス"], "short": "React を使った Web アプリ開発のためのフレームワーク。", @@ -332,6 +375,7 @@ }, { "id": "react", + "category": "frameworks", "term": "React", "match": ["React.js", "ReactJS", "リアクト"], "short": "Web の画面をコンポーネントとして作る JavaScript ライブラリ。", @@ -341,6 +385,7 @@ }, { "id": "python", + "category": "basics", "term": "Python", "match": ["パイソン"], "short": "読みやすく簡潔な文法を持つプログラミング言語。", @@ -350,6 +395,7 @@ }, { "id": "ruby", + "category": "basics", "term": "Ruby", "match": ["ルビー"], "short": "人が読み書きしやすいことを重視したプログラミング言語。", @@ -359,6 +405,7 @@ }, { "id": "html", + "category": "html-css", "term": "HTML", "match": ["エイチティーエムエル", "HyperText Markup Language"], "short": "Web ページの内容と構造を記述するためのマークアップ言語。", @@ -368,6 +415,7 @@ }, { "id": "css", + "category": "html-css", "term": "CSS", "match": ["シーエスエス", "Cascading Style Sheets"], "short": "Web ページの見た目やレイアウトを指定するための言語。", @@ -377,6 +425,7 @@ }, { "id": "vscode", + "category": "development", "term": "Visual Studio Code", "match": ["VS Code", "VSCode", "ブイエスコード"], "short": "プログラムの作成や編集に使うソースコードエディタ。", @@ -386,6 +435,7 @@ }, { "id": "nuxt", + "category": "frameworks", "term": "Nuxt", "match": ["Nuxt.js", "NuxtJS", "ナクスト"], "short": "Vue を使った Web アプリ開発のためのフレームワーク。", @@ -395,6 +445,7 @@ }, { "id": "terminal", + "category": "development", "term": "terminal", "match": ["ターミナル", "command line", "コマンドライン"], "short": "文字でコマンドを入力してコンピュータを操作する画面。", @@ -403,6 +454,7 @@ }, { "id": "github", + "category": "development", "term": "GitHub", "match": ["ギットハブ"], "short": "Git のリポジトリを保存・共有できるWebサービス。", @@ -411,6 +463,7 @@ }, { "id": "git", + "category": "development", "term": "Git", "match": ["ギット", "version control system", "バージョン管理システム"], "short": "ファイルの変更履歴を記録・管理するためのツール。", @@ -420,6 +473,7 @@ }, { "id": "commit", + "category": "development", "term": "commit", "match": ["コミット", "git commit"], "short": "Git でファイルの変更をひとまとまりとして記録すること。", @@ -429,6 +483,7 @@ }, { "id": "pull-request", + "category": "development", "term": "pull request", "match": ["プルリクエスト", "PR", "プルリク"], "short": "ブランチの変更を取り込み、レビューしてもらうための依頼。", @@ -437,6 +492,7 @@ }, { "id": "merge", + "category": "development", "term": "merge", "match": ["マージ", "git merge"], "short": "別のブランチにある変更履歴をひとつに統合すること。", @@ -446,6 +502,7 @@ }, { "id": "git-pull", + "category": "development", "term": "git pull", "match": ["pull", "プル"], "short": "リモートリポジトリの変更を取得し、現在のブランチへ反映する操作。", @@ -455,6 +512,7 @@ }, { "id": "git-push", + "category": "development", "term": "git push", "match": ["push", "プッシュ"], "short": "ローカルのコミットをリモートリポジトリへ送る操作。", @@ -464,6 +522,7 @@ }, { "id": "git-clone", + "category": "development", "term": "git clone", "match": ["clone", "クローン"], "short": "リモートリポジトリを履歴ごと手元へ複製する操作。", @@ -473,6 +532,7 @@ }, { "id": "git-checkout", + "category": "development", "term": "git checkout", "match": ["checkout", "チェックアウト"], "short": "ブランチを切り替えたり、ファイルを指定した状態へ戻したりする操作。", @@ -482,6 +542,7 @@ }, { "id": "git-fetch", + "category": "development", "term": "git fetch", "match": ["fetch", "フェッチ"], "short": "リモートリポジトリの最新情報を手元へ取得する操作。", @@ -491,6 +552,7 @@ }, { "id": "branch", + "category": "development", "term": "branch", "match": ["ブランチ", "git branch"], "short": "Git の変更履歴を枝分かれさせて作業する仕組み。", @@ -500,6 +562,7 @@ }, { "id": "repository", + "category": "development", "term": "repository", "match": ["リポジトリ", "repo", "レポジトリ"], "short": "Git がファイルと変更履歴をまとめて管理する場所。", @@ -509,6 +572,7 @@ }, { "id": "git-init", + "category": "development", "term": "git init", "match": ["init", "イニット", "初期化"], "short": "現在のディレクトリを新しい Git リポジトリにする操作。", @@ -518,6 +582,7 @@ }, { "id": "staging-area", + "category": "development", "term": "staging area", "match": ["stage", "staging", "ステージ", "ステージング", "index", "インデックス"], "short": "次のコミットに含める変更を一時的に置く場所。", @@ -527,6 +592,7 @@ }, { "id": "html-id", + "category": "html-css", "term": "id attribute", "match": ["id", "ID", "アイディー", "id属性"], "short": "HTML 要素にページ内で固有の名前を付ける属性。", @@ -537,6 +603,7 @@ }, { "id": "html-tag", + "category": "html-css", "term": "HTML tag", "match": ["tag", "タグ", "HTMLタグ"], "short": "HTML で要素の種類や範囲を示すための記号。", @@ -547,6 +614,7 @@ }, { "id": "css-margin", + "category": "html-css", "term": "margin", "match": ["マージン", "外側の余白"], "short": "CSS で要素の境界線より外側に作る余白。", @@ -557,6 +625,7 @@ }, { "id": "css-border", + "category": "html-css", "term": "border", "match": ["ボーダー", "境界線"], "short": "CSS で要素の周囲に表示する境界線。", @@ -567,6 +636,7 @@ }, { "id": "css-padding", + "category": "html-css", "term": "padding", "match": ["パディング", "内側の余白"], "short": "CSS で要素の内容と境界線の間に作る余白。", @@ -577,6 +647,7 @@ }, { "id": "css-height", + "category": "html-css", "term": "height", "match": ["ハイト", "高さ"], "short": "CSS で要素の高さを指定するプロパティ。", @@ -587,6 +658,7 @@ }, { "id": "css-width", + "category": "html-css", "term": "width", "match": ["ウィズ", "幅"], "short": "CSS で要素の横幅を指定するプロパティ。", @@ -597,6 +669,7 @@ }, { "id": "box-model", + "category": "html-css", "term": "box model", "match": ["ボックスモデル", "CSS box model"], "short": "HTML 要素を四角い領域として扱う CSS の考え方。", @@ -607,6 +680,7 @@ }, { "id": "responsive-web-design", + "category": "html-css", "term": "responsive web design", "match": ["レスポンシブウェブデザイン", "responsive design", "レスポンシブデザイン", "RWD"], "short": "画面の大きさに応じてレイアウトを調整する設計手法。", @@ -616,6 +690,7 @@ }, { "id": "npm", + "category": "development", "term": "npm", "match": ["エヌピーエム"], "short": "Node.js のパッケージを管理するためのツール。", @@ -625,6 +700,7 @@ }, { "id": "ubuntu", + "category": "development", "term": "Ubuntu", "match": ["ウブンツ"], "short": "使いやすさを重視して作られた Linux ディストリビューション。", @@ -634,10 +710,839 @@ }, { "id": "component", + "category": "frameworks", "term": "component", "match": ["コンポーネント", "UI component", "UIコンポーネント"], "short": "画面を構成する再利用可能な部品。", "detail": "ボタン、入力欄、ヘッダーなどを独立した単位として作り、組み合わせて画面を構築する。見た目や処理をまとめることで保守しやすくなる。", "example": "" + }, + { + "id": "variable", + "category": "basics", + "term": "variable", + "match": [ + "変数", + "バリアブル" + ], + "short": "値に名前を付けて、プログラムの中で参照するためのもの。", + "detail": "言語や宣言方法によって、あとから別の値を代入できるかどうかが異なる。", + "example": "let score = 10;" + }, + { + "id": "constant", + "category": "basics", + "term": "constant", + "match": [ + "定数" + ], + "short": "変更しない値や、再代入できない名前。", + "detail": "JavaScriptのconstは再代入を禁止する。オブジェクトや配列の中身まで変更できなくなるわけではない。", + "example": "const limit = 100;" + }, + { + "id": "function", + "category": "basics", + "term": "function", + "match": [ + "関数", + "ファンクション" + ], + "short": "ひとまとまりの処理に名前などを付け、繰り返し使えるようにしたもの。", + "detail": "引数で値を受け取り、戻り値として結果を返すことができる。", + "example": "function double(n) { return n * 2; }" + }, + { + "id": "argument", + "category": "basics", + "term": "argument", + "match": [ + "引数", + "アーギュメント" + ], + "short": "関数を呼び出すときに渡す値。", + "detail": "関数を定義するときの受け取り口は仮引数（parameter）、呼び出すときの値は実引数（argument）と区別することもある。", + "example": "Math.max(3, 7);" + }, + { + "id": "parameter", + "category": "basics", + "term": "parameter", + "match": [ + "仮引数", + "パラメータ", + "パラメーター" + ], + "short": "関数の定義で、呼び出し時の値を受け取るために付ける名前。", + "detail": "一般には設定値や処理に与える条件を指す場合もある。", + "example": "function greet(name) { return name; }" + }, + { + "id": "return-value", + "category": "basics", + "term": "return value", + "match": [ + "戻り値", + "返り値" + ], + "short": "関数が処理の結果として呼び出し元に返す値。", + "detail": "JavaScriptではreturnで指定する。値を返さず終了した関数の戻り値はundefinedになる。", + "example": "const result = Math.max(3, 7);" + }, + { + "id": "array", + "category": "basics", + "term": "array", + "match": [ + "配列", + "アレイ" + ], + "short": "複数の値を順番に並べてまとめたもの。", + "detail": "各要素を位置を示す番号で取り出す。JavaScriptでは先頭の番号は0。", + "example": "const colors = ['red', 'blue'];" + }, + { + "id": "string", + "category": "basics", + "term": "string", + "match": [ + "文字列", + "ストリング" + ], + "short": "文字や記号を並べたデータ。", + "detail": "JavaScriptでは引用符などで囲んで書く。数字でも引用符で囲むと数値とは異なる文字列になる。", + "example": "const message = 'Hello';" + }, + { + "id": "boolean", + "category": "basics", + "term": "boolean", + "match": [ + "真偽値", + "ブーリアン" + ], + "short": "trueかfalseのどちらかを表すデータ型。", + "detail": "条件の成立・不成立や、機能が有効かどうかなどを表す。", + "example": "const isReady = true;" + }, + { + "id": "conditional", + "category": "basics", + "term": "conditional statement", + "match": [ + "条件分岐" + ], + "short": "条件に応じて実行する処理を変えること。", + "detail": "ifやswitchなどを使い、入力や状態によって処理を選ぶ。", + "example": "if (score >= 60) { console.log('合格'); }" + }, + { + "id": "loop", + "category": "basics", + "term": "loop", + "match": [ + "ループ", + "繰り返し処理" + ], + "short": "同じ処理を繰り返し実行する仕組み。", + "detail": "forやwhileなどを使う。終了条件が満たされないと無限ループになることがある。", + "example": "for (let i = 0; i < 3; i++) { console.log(i); }" + }, + { + "id": "scope", + "category": "basics", + "term": "scope", + "match": [ + "スコープ", + "有効範囲" + ], + "short": "変数などの名前を参照できる範囲。", + "detail": "JavaScriptでは関数やブロックが範囲を作る。letやconstで宣言した名前は、そのブロック内で参照できる。" + }, + { + "id": "null", + "category": "basics", + "term": "null", + "match": [ + "ヌル" + ], + "short": "値が存在しないことを意図的に表す値。", + "detail": "JavaScriptでは、まだ選択されていない項目などを明示するときに使う。undefinedとは別の値。", + "example": "const selectedUser = null;" + }, + { + "id": "undefined", + "category": "basics", + "term": "undefined", + "match": [ + "アンディファインド" + ], + "short": "JavaScriptで値が未設定であることなどを表す値。", + "detail": "未代入の変数、存在しないプロパティ、値を返さない関数の戻り値などに現れる。", + "example": "let result;" + }, + { + "id": "exception", + "category": "basics", + "term": "exception", + "match": [ + "例外", + "エクセプション" + ], + "short": "通常の処理を続けられない状況を知らせる仕組み。", + "detail": "JavaScriptではthrowで発生させ、tryとcatchで処理できる。" + }, + { + "id": "recursion", + "category": "basics", + "term": "recursion", + "match": [ + "再帰", + "リカージョン" + ], + "short": "関数が自分自身を呼び出して問題を解く方法。", + "detail": "小さな問題に分けて処理する。呼び出しを止める条件が必要。" + }, + { + "id": "operator", + "category": "basics", + "term": "operator", + "match": [ + "演算子" + ], + "short": "値の計算や比較などの操作を表す記号。", + "detail": "足し算の+、比較の===、論理演算の&&などがある。", + "example": "const total = 2 + 3;" + }, + { + "id": "data-type", + "category": "basics", + "term": "data type", + "match": [ + "データ型" + ], + "short": "値の種類や、その値にできる操作を表す分類。", + "detail": "数値、文字列、真偽値などがある。言語によって型の扱いや検査の方法が異なる。" + }, + { + "id": "callback", + "category": "javascript", + "term": "callback", + "match": [ + "コールバック", + "コールバック関数" + ], + "short": "別の処理に渡し、その処理から呼び出してもらう関数。", + "detail": "イベント処理や配列操作などに使う。コールバックが必ず非同期で呼ばれるとは限らない。", + "example": "[1, 2].map(n => n * 2);" + }, + { + "id": "asynchronous", + "category": "javascript", + "term": "asynchronous", + "match": [ + "非同期処理", + "非同期", + "async processing" + ], + "short": "処理の完了を待つ間に、ほかの処理を進められる仕組み。", + "detail": "通信やタイマーなどで使う。同時に複数のCPUで実行する並列処理とは同じ意味ではない。" + }, + { + "id": "async-await", + "category": "javascript", + "term": "async/await", + "match": [ + "async await", + "アシンクアウェイト" + ], + "short": "Promiseを使う非同期処理を、順番に読む形で書く構文。", + "detail": "async関数はPromiseを返す。awaitはその処理を一時停止して結果を待つが、JavaScript全体を停止するわけではない。", + "example": "const response = await fetch('/api/users');" + }, + { + "id": "arrow-function", + "category": "javascript", + "term": "arrow function", + "match": [ + "アロー関数" + ], + "short": "矢印の記号を使って関数を書く構文。", + "detail": "通常の関数とはthisの扱いが異なり、外側のthisを引き継ぐ。", + "example": "const double = n => n * 2;" + }, + { + "id": "destructuring", + "category": "javascript", + "term": "destructuring", + "match": [ + "分割代入" + ], + "short": "配列やオブジェクトから値を取り出し、変数にまとめて代入する構文。", + "detail": "必要な要素やプロパティを短く取り出せる。", + "example": "const { name, age } = user;" + }, + { + "id": "spread-syntax", + "category": "javascript", + "term": "spread syntax", + "match": [ + "スプレッド構文" + ], + "short": "配列の要素やオブジェクトのプロパティなどを展開する構文。", + "detail": "コピーや結合に使えるが、入れ子のオブジェクトまで複製する深いコピーではない。", + "example": "const copy = [...items];" + }, + { + "id": "optional-chaining", + "category": "javascript", + "term": "optional chaining", + "match": [ + "オプショナルチェーン", + "オプショナルチェイニング" + ], + "short": "途中の値がnullやundefinedでもエラーにせずアクセスを止める構文。", + "detail": "その場合の結果はundefinedになる。存在するか分からないプロパティを参照するときに使う。", + "example": "const name = user?.profile?.name;" + }, + { + "id": "type-inference", + "category": "javascript", + "term": "type inference", + "match": [ + "型推論" + ], + "short": "明示的に書かれていない型を、値や使い方から推定する仕組み。", + "detail": "TypeScriptでは初期値などから型が決まるため、すべての変数に型注釈を書く必要はない。", + "example": "const count = 3;" + }, + { + "id": "union-type", + "category": "javascript", + "term": "union type", + "match": [ + "ユニオン型", + "共用体型" + ], + "short": "複数の型のいずれかを受け付ける型。", + "detail": "TypeScriptでは縦棒で型を並べる。使うときは型を絞り込む必要がある場合がある。" + }, + { + "id": "event-loop", + "category": "javascript", + "term": "event loop", + "match": [ + "イベントループ" + ], + "short": "イベントや非同期処理のコールバックを実行する順序を管理する仕組み。", + "detail": "JavaScriptの実行中に長い同期処理を行うと、ほかのイベント処理や画面更新が遅れる。" + }, + { + "id": "props", + "category": "frameworks", + "term": "props", + "match": [ + "プロップス" + ], + "short": "親コンポーネントから子コンポーネントに渡す入力。", + "detail": "Reactでは子側で直接書き換えず、渡された値を使って表示や動作を決める。", + "example": "