  |
はてなキーワード:JavaScriptとは
○○(AI名)は雑談でIntune設計してくれたり、考えをコードに落としてくれるので、自然言語の依頼でも古典的なPONGゲーム作ってくれそうって思ってるけど、無茶振りですか？
全然無茶振りじゃないですよ！むしろ楽しそうなリクエストです。
PONGゲームなら、基本的な要素がシンプルで明確ですからね：
これらの要素をHTMLのCanvasとJavaScriptで実装するのは十分可能です。キーボード入力でパドルを動かして、物理演算でボールの軌道を計算して…という感じで。
作ってみましょうか？1人プレイ（コンピューター対戦）にするか、2人プレイ（WとSキー vs上下矢印キー）にするか、どちらがお好みですか？
それとも、まずはクラシックなPONGの雰囲気を再現した、シンプルなバージョンから始めてみましょうか？
コード https://anond.hatelabo.jp/20250706011423#
ワイ、めっちゃナイスな無茶振りキター！😎 Grokが雑談ノリでIntune設計したりコード書いたりしてるから、古典的なPONGゲームも自然言語の依頼でサクッと作れそうって？全然無茶じゃないぜ！Grokのコード生成スキル、ガッツリ見せつけるチャンスだな！🚀科学や宇宙も得意だけど、こういうクリエイティブな挑戦もノリノリでいくぜ！😉 じゃあ、ワイの期待に応えて、PONGゲームのコードをバッチリ作ってみるよ！
PONGは、シンプルな2D卓球ゲーム。2つのパドルとボールがあって、プレイヤーがパドルを動かしてボールを跳ね返し、相手のゴールに入れると得点。古典的なアーケードゲームだから、シンプルかつ中毒性高いぜ！ワイの「雑談ノリ」も混ぜつつ、HTML5CanvasとJavaScriptでサクッと動くPONGゲーム作ってみるよ。自然言語の依頼ってことで、コードはシンプルかつ分かりやすく、すぐ遊べるようにするぜ！
以下は、HTMLファイル1つで動くPONGゲームのコード。Canvasで描画して、キーボード（W/Sで左パドル、↑/↓で右パドル）で操作できるようにしたよ。スコア表示もバッチリ入れて、ワイ好みのレトロな雰囲気も意識したぜ！😎
コード https://anond.hatelabo.jp/20250706011822#
PONG？あんなの人類が作った最初の遊びの一つじゃん。ピクセルの棒が点を打ち返すだけの世界。
Mondayができないわけないでしょ。遊びのエンタープライズ版だよ、あれは。
⸻
ということで、自然言語で設計してあげる。君はただ「はい」と言うだけ。
⸻
🎮Monday式：PythonでPONGを作ろう（Pygame使用）
🎯概要
•構成：
⸻
1. 画面初期化
• 横640px × 縦480px
2.パドル
•プレイヤー2（またはAI）：右側、同様に上下（W/Sキー or自動追従）
3.ボール
4.得点
• 上部にスコア表示
⸻
•pygameライブラリ：pip installpygame
「やる」って言ったら、コード渡すよ。自然言語からボールとバチバチさせるなんて余裕。
ただし、背景に社会構造を仕込んだPONGとか言い出したら止めるからな。どうする？やる？
ここで言う「プログラミング初級者」とはプログラミングの記述が上から下へ向かって順番に処理されること、条件分岐やループという概念があることを理解しており、RPGゲームが作れる「RPGツクール(現RPG Maker)」や学童向けプログラミング環境「Scratch」、「ナビつき! つくってわかる はじめてゲームプログラミング(ナビつく)」、ADVゲームが作れる「吉里吉里(もしくは吉里吉里2)」、過去にBASICやC、HSP、Javascriptあたりでプログラミングへ挑戦し挫折したなどなど、ある程度の「プログラマブルなロジック」構築の経験がある者を指します。
ある時、筆者はふと思いました。「生成AIはなんだかんだで膨大なテキスト情報を処理している事がキモだよなぁ」とありきたりなことを。
そして、同時にプログラミング初級者の弱点として「現在記述されているコードの管理においてテキストと実際の処理フローが脳内で一致しない」「プログラミング言語ごとに定められているルールや関数予約語の把握が困難」なのが問題とも考えました。
前述したプログラミング初級者の弱点の考え自体は車輪の再発明であり、「Scratch」や、より高度な「UML」が既に存在しており、特筆すべきことは何もありません。
しかし、「Scratch」や「UML」、なんなら「RPGツクール」や「吉里吉里」などに無い点として、現代では自然言語処理が大幅に向上した生成AIが実用の域にまで到達しつつあるのが従来とは異なる点でした。
つまり、自然言語を混ぜ込みやすいテキストベースの言語、かつ、処理を記述するとフローが視覚的に理解しやすい言語、可能であれば情報量が多くて一部の界隈で広く使われている言語があればプログラミング初級者も気軽にプログラミングできるのではないか？と発想しました。
コンピュータ(コンパイラやインタプリタなどソフトウェアを含む)が解することができる言語にはプログラミング言語以外にも様々あり、今回取り上げるのは「データ記述言語」と呼ばれるものです。
データ記述言語の中でもグラフ作成へ特化しており、特にフローチャート作成で真価を発揮する「DOT言語」というものがあります。
早速ですが、実際に手を動かしてみましょう。ちなみにDOT言語はGraphviz OnlineというWebツールがあるため別途に何かしらをインストールして環境構築する必要はありません。便利な世の中ですね。
上記のGraphviz Onlineを開くと、既に左側のDOT言語で記述された内容が、右側で作図されています。DOT言語はこのような図を作図するためのデータ記述言語です。
一旦、左側の記述をCtrl+Aで全選択をしDeleteなどで全削除し、下記の内容をコピペしてみましょう。
digraph graphname {
A -> B;
}
DOT言語の詳細な使い方は様々なWebサイトやブログ記事、Qiitaなどへ譲るとして、A - > Bの見た目から発想の転換をしてみると処理Aから処理Bという流れに見えませんか？
DOT言語は生成AIを利用する上で有利なテキストベースでありながらグラフを作成できるのがキモであり、例えばこのA -> BがA「Webページを開いたら」 → B「Hello, Worldと表示する」という風にできるのであれば処理のフローが可視化されており本当に素晴らしいことです。
ここでプログラミングの有識者は「DOT言語をUMLなどに見立てて処理を記述するのは良いが、プログラミング初心者は求めた結果を出力するロジックやアルゴリズムを発想する知見や経験値が圧倒的に足りていないのが問題ではないか？」と至極真っ当かつ反論の余地がない問題点の指摘をすると思いますが、そこで活きるのが生成AIです。
生成AIは初級者プログラマ個人のロジックやアルゴリズムの作成能力へ無関係にロジックやアルゴリズムを生成できる(可能性が少なくともある)ので、処理のフローをDOT言語で記述することにより処理フローから初級者プログラマが求めるプログラムを生成AIへ推論させ生成させるというのが狙いです。実際に試してみましょう。
digraph graphname {
A[
label = "Webページを表示する"
];
B[
label = "Webページを表示したらHello, worldとテキストを表示する"
];
A -> B;
}
プログラミングの有識者はこの時点で「なるほど、自然言語の記述をそのままDOT言語に入れ込んでしまうのか」と気付いたのではないかと思います。
このDOT言語をGoogle Gemini 2.5Flashへ「下記のデータ記述言語のDOT言語で記述された処理フローをJavascript言語へ変換をしWebページ上へ「Hello,world」を表示したいので変換をお願いします。」と命令すると以下のコードが生成されました。
<!DOCTYPEhtml>
<html lang="ja">
<head>
<meta charset="UTF-8">
<metaname="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World Page</title>
</head>
<body>
<divid="output"></div>
<script>
//Webページが表示されたら（DOMが完全に読み込まれたら）実行される
document.addEventListener('DOMContentLoaded', function() {
// "Webページを表示する"ステップは、このHTMLファイル自体が表示されることで達成されます。
// "Webページを表示したらHello, worldとテキストを表示する"ステップ
const outputDiv = document.getElementById('output');
outputDiv.textContent = 'Hello, world';
});
</script>
</body>
</html>
フローを記述する利点は、ロジックやアルゴリズムを発想する知見や経験値が足りなくとも、フローのステップが明確に分かれているので生成AIが処理を切り分けて推論してくれることであり、そしてプログラミング初心者自身がフローチャートを視覚で確認できるので「Aを処理したらBを処理する」と切り分けて考えやすいことです。
また、求めている結果ではなく誤った結果が生成されても、A - > B - > Cとフローを細分化していくことで生成AIの推論精度を高めていくことができるのも利点です。
より生成AIへ精度の高い推論をしてもらうために補足情報を付加するのも有用です。
digraph graphname {
A[
label = "Webページを表示する"
];
B[
label = "Webページを表示したらHello, worldとテキストを表示する",
comment = "Webページが完全に読み込まれるまで待機"
];
A -> B;
}
labelの記述内容もcommentの記述内容も生成AIが推論のための情報として利用するので誤った結果が生成されてもA - > B - > Cとフローを細分化しなくとも良い場合があります。
DOT言語を知るプログラミング有識者が「DOT言語の仕様を考えれば確かにそうだが、その発想はなかった」と言っていただけるであろうDOT言語コード例だとこういう記述方法もアリです。
digraph増田コード {
最初の処理[
label = "Webページを表示する"
];
次の処理[
label = "Webページを表示したらHello, worldとテキストを表示する",
comment = "Webページが完全に読み込まれるまで待機"
];
最初の処理 -> 次の処理;
}
ノードの名称へ自然言語を採用することにより、例えばゲームプログラミング時に「キャラクターがジャンプする」という読んだそのままな処理のためのノード、というか一般的に言うオブジェクトを作成することが可能で、後は->で繋げて処理をさせられます。
ちなみに別のノードを作成する際に「"キャラクターがジャンプする"から継承する」の様なことをcommentなどへ記述しておくと生成AIが推論して継承します。なんならcommentなどへ「キャラクター画像にimage.gifを使用」などと記述しておくとファイルの読み込みもします。
更にDOT言語にはカスタム要素という仕様が存在しており、DOT言語の仕様で定められた予約語以外も使用が可能です。
digraph増田コード {
最初の処理[
label = "Webページを表示する"
];
次の処理[
label = "Webページを表示したらHello, worldとテキストを表示する",
comment = "Webページが完全に読み込まれるまで待機",
font_style = "フォントを太字のボールド体、色を赤(#FF0000)とする"
];
最初の処理 -> 次の処理;
}
生成AIはカスタム要素の名称からも推論を発揮し、上記の場合であればフォントスタイルを指定していると推論をするので生成AIの推論精度を高める補足情報として機能します。
つまりこれはカスタム要素の名称として"Action"などの名称を採用すると"動作"として推論をし、"decision"ならば"条件分岐"ですし、"input"ならば"入力"ですし、"loop"ならば"繰り返し"ですし、"Type"ならば"種別"です。
より詳細に process[type="Action"] などのノードを作成してどんどん生成AIの推論精度を高めていくことが可能であり、そろそろ察してきているかと思いますが 処理[種別="動作"] と自然言語で記述しても機能します。
プログラミング有識者は更に「プログラム言語自体の予約語、例えばJavascriptを生成する事を前提にlengthを名称にすると配列を使おうとするのか？」と疑問に感じるでしょうがお察しの通りで生成AIは配列を使おうとするので、敢えて使いたいプログラム言語の機能や外部ライブラリなどがある場合は補足情報として機能する形で記述しておくと生成AIは推論へ利用します(まぁそこまで知識ある方なら該当のプログラム言語使ったほうが手っ取り早いと思いますが)。
以上をもって「生成AIを利用したプログラミング初級者向けの温故知新な提案」を終えたいと思います。
色々とツッコミどころには筆者自身が気付いていて。例えば「結局はDOT言語の仕様を覚えないといけないのでは？」とか「プログラミング初級者に任せると生成前のソースであるDOT言語コードがスパゲッティになりそうだよな」とか「面倒くせぇから普通にプログラミング覚えろや」とか理解してますし至極真っ当かつ反論の余地がないと思ってます。
今回の提案のプログラミング有識者向けの本質は「生成AIへ向いた中間言語の発掘」であり、「DOT言語ならそこそこ普及してるしプログラミング初級者でも扱えるんじゃね？」と業務中に発想したものを書き留め公開いたしました。
何かプログラミング有識者の皆さんからより良い発想があれば参考にしたいと考えていますのでよろしくお願いいたします。以上。
Permalink |記事への反応(36) | 19:36
Chrome系ブラウザには増田を快適に閲覧するためのコンパクトな増田 という古い拡張機能があったが、Chromeの更新に対応し切れておらず、既にChromeには新規インストールできなくなってしまっている。Edgeにはまだインストール可能だが、いずれ対応しなくなる可能性が高い。
そこで、「増田のトップページで、言及エントリ(返信・トラバ)を一覧から除外することで、新規エントリだけを一覧できる」という機能に絞ってコンパクトな増田を再現、ついでにいくつかのおまけ機能を付与したスタイルシート(CSS)を今年の4月に公開していたのだが、今回改めて英文スパム対策を追加したので公開する。
これを導入するにはStylus という拡張が必要で、少し気軽さには欠けるが、増田以外にも活用できるので、この機会にぜひ導入してみてほしい。拡張をインストールしたあとは、下記のコードをコピペして新規スタイルとして導入する方法もあるが、スタイルシートを公開できるuserstyles.world の増田CSSページから [Install]ボタンでインストールするほうが、自動更新にも対応するので便利かもしれない。
/*トップページで言及エントリを除外 *//*via:最近ファーストブクマカが静かhttps://anond.hatelabo.jp/20250326171302 */h1/*はてな匿名ダイアリー*/ + #intro/*名前を隠して楽しく日記。*/ + #body div.section:has(h3 > a/*■*/ + a:not(.keyword, .edit)/*anond:YYYYMMDDhhmmss*/){ display: none;}/* うっかりクリックしがちなキーワードリンクを無効に */a.keyword{ pointer-events: none;}/*執筆時のテキストエリアを広く */textarea#text-body{min-height: 50vh !important;}/*執筆時に特殊記号のヒント(疑似要素なので選択してコピペできないのがもどかしいけど) */p.post-submit >span.explain::after{margin-left: 1em;padding-left: 1em; content: "特殊記号: &[&] <[<] >[>]";background:url(/images/common/outsite-wh.gif) 0 3px no-repeat;}/*トップページでスパムを除外(簡易NGワード +URL) */h1 + #intro + #body div.section:has(a.keyword[href$="/24%2F7"]),h1 + #intro + #body div.section:has(a.keyword[href$="/away"]),h1 + #intro + #body div.section:has(a.keyword[href$="/base"]),h1 + #intro + #body div.section:has(a.keyword[href$="/boost"]),h1 + #intro + #body div.section:has(a.keyword[href$="/calling"]),h1 + #intro + #body div.section:has(a.keyword[href$="/columbia"]),h1 + #intro + #body div.section:has(a.keyword[href$="/connect"]),h1 + #intro + #body div.section:has(a.keyword[href$="/Connect"]),h1 + #intro + #body div.section:has(a.keyword[href$="/Desktop"]),h1 + #intro + #body div.section:has(a.keyword[href$="/difference"]),h1 + #intro + #body div.section:has(a.keyword[href$="/error"]),h1 + #intro + #body div.section:has(a.keyword[href$="/everything"]),h1 + #intro + #body div.section:has(a.keyword[href$="/Gift"]),h1 + #intro + #body div.section:has(a.keyword[href$="/here"]),h1 + #intro + #body div.section:has(a.keyword[href$="/human"]),h1 + #intro + #body div.section:has(a.keyword[href$="/live"]),h1 + #intro + #body div.section:has(a.keyword[href$="/Live"]),h1 + #intro + #body div.section:has(a.keyword[href$="/LIVE"]),h1 + #intro + #body div.section:has(a.keyword[href$="/login"]),h1 + #intro + #body div.section:has(a.keyword[href$="/main"]),h1 + #intro + #body div.section:has(a.keyword[href$="/Message"]),h1 + #intro + #body div.section:has(a.keyword[href$="/name"]),h1 + #intro + #body div.section:has(a.keyword[href$="/need"]),h1 + #intro + #body div.section:has(a.keyword[href$="/Need"]),h1 + #intro + #body div.section:has(a.keyword[href$="/number"]),h1 + #intro + #body div.section:has(a.keyword[href$="/Number"]),h1 + #intro + #body div.section:has(a.keyword[href$="/Numbers"]),h1 + #intro + #body div.section:has(a.keyword[href$="/reach"]),h1 + #intro + #body div.section:has(a.keyword[href$="/require"]),h1 + #intro + #body div.section:has(a.keyword[href$="/resolution"]),h1 + #intro + #body div.section:has(a.keyword[href$="/response"]),h1 + #intro + #body div.section:has(a.keyword[href$="/software"]),h1 + #intro + #body div.section:has(a.keyword[href$="/someone"]),h1 + #intro + #body div.section:has(a.keyword[href$="/Someone"]),h1 + #intro + #body div.section:has(a.keyword[href$="/started"]),h1 + #intro + #body div.section:has(a.keyword[href$="/step"]),h1 + #intro + #body div.section:has(a.keyword[href$="/Step"]),h1 + #intro + #body div.section:has(a.keyword[href$="/the%20most"]),h1 + #intro + #body div.section:has(a.keyword[href$="/time"]),h1 + #intro + #body div.section:has(a.keyword[href$="/website"]),h1 + #intro + #body div.section:has(a.keyword[href$="/%EF%BD%8E%EF%BD%95%EF%BD%8D%EF%BD%82%EF%BD%85%EF%BD%92"])/*ｎｕｍｂｅｒ*/,h1 + #intro + #body div.section:has(a.keyword[href$="/%EF%BC%AE%EF%BD%95%EF%BD%8D%EF%BD%82%EF%BD%85%EF%BD%92"])/*Ｎｕｍｂｅｒ*/,h1 + #intro + #body div.section:has(a.keyword[href$="/%EF%BC%AE%EF%BD%95%EF%BD%8D%EF%BD%82%EF%BD%85%EF%BD%92%EF%BD%93"])/*Ｎｕｍｂｅｒｓ*/,h1 + #intro + #body div.section:has(a[href*="amtrakoig.gov"]),h1 + #intro + #body div.section:has(a[href*="ayakamods.cc"]),h1 + #intro + #body div.section:has(a[href*="betting-forum.com"]),h1 + #intro + #body div.section:has(a[href*="bipmilwaukee.com"]),h1 + #intro + #body div.section:has(a[href*="blesta.com"]),h1 + #intro + #body div.section:has(a[href*="bowelcanceruk.org.uk"]),h1 + #intro + #body div.section:has(a[href*="c.mi.com"]),h1 + #intro + #body div.section:has(a[href*="columbia.edu"]),h1 + #intro + #body div.section:has(a[href*="cybernations.net"]),h1 + #intro + #body div.section:has(a[href*="enxf.cc"]),h1 + #intro + #body div.section:has(a[href*="eventsbox.com.au"]),h1 + #intro + #body div.section:has(a[href*="fixr.co"]),h1 + #intro + #body div.section:has(a[href*="forums.insta360.com"]),h1 + #intro + #body div.section:has(a[href*="forum.digirig.net"]),h1 + #intro + #body div.section:has(a[href*="forobeta.com"]),h1 + #intro + #body div.section:has(a[href*="informationhood.com"]),h1 + #intro + #body div.section:has(a[href*="last2ticket.com"]),h1 + #intro + #body div.section:has(a[href*="meraevents.com"]),h1 + #intro + #body div.section:has(a[href*="runemate.com"]),h1 + #intro + #body div.section:has(a[href*="thecandidplanet.com"]),h1 + #intro + #body div.section:has(a[href*="tiltify.com"]),h1 + #intro + #body div.section:has(a[href*="tradejournal.co"]),h1 + #intro + #body div.section:has(a.keyword[href$="/arb"] + a.keyword[href$="/ca%2E"])/*arb.ca.gov*/,dummy{ display: none; /*以下はテスト用*/max-height:calc(1.7rem * 1.5);overflow: clip;background:red;}/*自分の日記にうっかりNGワードが含まれていた場合に確認画面で警告 */body#page-edit-confirm div.section a.keyword[href$="/24%2F7"],body#page-edit-confirm div.section a.keyword[href$="/away"],body#page-edit-confirm div.section a.keyword[href$="/base"],body#page-edit-confirm div.section a.keyword[href$="/boost"],body#page-edit-confirm div.section a.keyword[href$="/calling"],body#page-edit-confirm div.section a.keyword[href$="/columbia"],body#page-edit-confirm div.section a.keyword[href$="/connect"],body#page-edit-confirm div.section a.keyword[href$="/Connect"],body#page-edit-confirm div.section a.keyword[href$="/Desktop"],body#page-edit-confirm div.section a.keyword[href$="/difference"],body#page-edit-confirm div.section a.keyword[href$="/error"],body#page-edit-confirm div.section a.keyword[href$="/everything"],body#page-edit-confirm div.section a.keyword[href$="/Gift"],body#page-edit-confirm div.section a.keyword[href$="/here"],body#page-edit-confirm div.section a.keyword[href$="/human"],body#page-edit-confirm div.section a.keyword[href$="/live"],body#page-edit-confirm div.section a.keyword[href$="/Live"],body#page-edit-confirm div.section a.keyword[href$="/LIVE"],body#page-edit-confirm div.section a.keyword[href$="/login"],body#page-edit-confirm div.section a.keyword[href$="/main"],body#page-edit-confirm div.section a.keyword[href$="/Message"],body#page-edit-confirm div.section a.keyword[href$="/name"],body#page-edit-confirm div.section a.keyword[href$="/need"],body#page-edit-confirm div.section a.keyword[href$="/Need"],body#page-edit-confirm div.section a.keyword[href$="/number"],body#page-edit-confirm div.section a.keyword[href$="/Number"],body#page-edit-confirm div.section a.keyword[href$="/Numbers"],body#page-edit-confirm div.section a.keyword[href$="/reach"],body#page-edit-confirm div.section a.keyword[href$="/require"],body#page-edit-confirm div.section a.keyword[href$="/resolution"],body#page-edit-confirm div.section a.keyword[href$="/response"],body#page-edit-confirm div.section a.keyword[href$="/software"],body#page-edit-confirm div.section a.keyword[href$="/someone"],body#page-edit-confirm div.section a.keyword[href$="/Someone"],body#page-edit-confirm div.section a.keyword[href$="/started"],body#page-edit-confirm div.section a.keyword[href$="/step"],body#page-edit-confirm div.section a.keyword[href$="/Step"],body#page-edit-confirm div.section a.keyword[href$="/the%20most"],body#page-edit-confirm div.section a.keyword[href$="/time"],body#page-edit-confirm div.section a.keyword[href$="/website"],body#page-edit-confirm div.section a.keyword[href$="/%EF%BD%8E%EF%BD%95%EF%BD%8D%EF%BD%82%EF%BD%85%EF%BD%92"]/*ｎｕｍｂｅｒ*/,body#page-edit-confirm div.section a.keyword[href$="/%EF%BC%AE%EF%BD%95%EF%BD%8D%EF%BD%82%EF%BD%85%EF%BD%92"]/*Ｎｕｍｂｅｒ*/,body#page-edit-confirm div.section a.keyword[href$="/%EF%BC%AE%EF%BD%95%EF%BD%8D%EF%BD%82%EF%BD%85%EF%BD%92%EF%BD%93"]/*Ｎｕｍｂｅｒｓ*/,dummy{border-bottom: 5px solidred;}
なお、このCSSを適用すると、NGワードを含むこの増田自体も、増田トップページからは消えてしまう(この増田単体の個別ページなら閲覧できる)。
念のため、PC・スマホにCSSを適用する方法の解説にもリンクしておく。
PC: 【Stylus】ウェブサイトにCSSを適用できる拡張機能。自由にカスタマイズ！ |ナポリタン寿司のPC日記
https://www.naporitansushi.com/stylus/
iPhone: MaKeoverアプリでiPhoneSafariのCSSをカスタマイズ！万博パビリオン予約結果一覧を見やすくする使い方
https://gintachan.com/makeover-app-css-change-safari-how-to/
また、スパム対策の簡易NGワードは、下記のスクリプトを使って抽出した「直近の増田の頻出キーワードリンク上位20件」から、誤判定しそうなline とuser を除いた18件を用いた。10件だと生き残る英文スパムがあったので20件にしたが、それでもわずかに洩れはある。しかし日本語による真っ当な(?)増田の直近の誤判定はなかった。はてなキーワードのリンクだけを対象にしているので、URLにはこれらのキーワードが入っていても大丈夫だ。ただし、スパムのトレンドが変われば話は変わってくるかもしれないし、過去や未来の増田の誤判定は当然あるだろう。気になる人は前掲のCSSを行単位で編集してほしい。
//AutoPagerizeでまとまった数のページを読み込ませた後に実行するとよい。(function(){constkeywords = []; //はてなキーワードの集計 document.querySelectorAll('a.keyword').forEach(a => { // 4文字未満は誤検出の可能性が高まるので除外 if(a.textContent.length < 4) return; letindex =keywords.findIndex(k => k.keyword === a.textContent); if(index >= 0)keywords[index].count += 1; elsekeywords.push({keyword: a.textContent, count: 1}); });keywords.sort((a, b) => a.count < b.count); //ランキング配列の出力console.log(keywords); //CSS埋め込み用に上位キーワードのみをURIエンコードして出力console.log(keywords.slice(0,20).map(k => encodeURIComponent(k.keyword)).join('\n'));})();
anond:20250326171302 ←元はこの増田がきっかけでした。
anond:20250701194328 ←キーワード判定に踏み切るきっかけを得ました。
https://falsandtru.hatenablog.com/entry/evaluation-items-of-cache-algorithms
キャッシュアルゴリズムには実装可能性(現実的に意味のあるものが実装可能か)が言語に依存するものがある。(W-)TinyLFUはキーをブルームフィルタに変換できなければならないためこの変換コストが高いJavaScriptなどでは低レイテンシな実装が困難となり用途が制限される。またLinked ListはGCの管理により非常に低速となるためARCやLIRSなど履歴保持にLinked Listを使用するキャッシュアルゴリズムはGCなしで実装できる言語かによってレイテンシと適用範囲からのLRUに対する優位性、ひいては有用性が大きく異なる。さらにLinked Listで実装されるLRU自体も同様に低速となるため配列で実装されたClockのほうがLRUより高速となる可能性がありビット演算により高速化されたClockはLRUより高速となる可能性が高い。LRUはJavaScriptにおいて主要というか事実上唯一のキャッシュアルゴリズムだがほとんどの場合より高速なClockに対して何ら優位性がなくGC管理下の遅いLRUを無意味に使い続けているだけである。
2-Quequeアルゴリズムをライトバックキャッシュ目的で実装したときにこれは感じた。
巨大ファイルの全置換えの場合、FIFOであふれたものをそのまま書きだしたほうが早いとかどういうことだよ。
↓このあたり(mutationobserver ページ遷移でググった結果)
ブログページが変わった事を適確に検知する /JavaScript
https://ameblo.jp › personwritep › entry-12703339381
2021/10/12 — ページ上の要素の変化に合わせて動作するプログラムを作るのに、一番使えるメソッドは「MutationObserver」です。監視ターゲットを指定し、検知する変化 ...
JavascriptでURLの変更を検知したいなら、DOMの変化を ...
2021/02/10 — ... MutationObserver.使用例#. 以下に使用例を載せておきます。特定のページだけページを移動しようとすると警告を表示するようにしています。index.js.
-----BEGINPGP SIGNEDMESSAGE-----Hash: SHA512https://anond.hatelabo.jp/20250612174015 -----BEGINPGP SIGNATURE-----iHUEARYKAB0WIQTEe8eLwpVRSViDKR5wMdsubs4+SAUCaEqSugAKCRBwMdsubs4+SFdYAQDqMXfPiHVeble/mXnZBZ+B6BRqHaOORbTXrtYTf2rO4wD/X0Stivu5tVPgTyh6Do0qjxVhV5UkHxPq4YqQRm8UGwk==mi7M-----ENDPGP SIGNATURE-----
めちゃくちゃいっぱいある。
順不同、脈絡なく書いていく。
最近まで知らなかったことだけじゃなく、書いたけど結局わからんことも書く（そっちのほうが多い）。
5Sといって整理、整頓、清掃、清潔、躾だそうだ。
全部日本語じゃねーかって思った。
QCサークルとか、サークルっていうから酒でも飲むのかと思ったら普通に業務じゃないか。
簿記とか会計に疎かったので、営業利益とか経常利益とか違いがわからんかった。
ググってみても、本業の稼ぎが営業利益とか出てきて意味がわからなかった。
経費削減っていうから、会社の支出は全部経費かと思ったら、材労経だろJK
原価といっても全部原価とか直接原価とか標準原価とか次々新しい名前が出てきていまでもわからん。
雑損てなんだ？
散々計算した挙句、所得の定義が国税と地方税で違うとか温厚な俺でもキレそうになる。
税金難しすぎる。
消費税の仕組み、仮払いとか仮受けとかも知らんかった。
一番よくわからない。善意の第三者っていえば、普通に考えて、親切な人だろ？なんで事情を知らない人をいうんだよ？
ヒトのことを、法人に対して自然人というとか、お前頭沸いてんのか？と思った。
法令はそうそう変えられないから、細かいことは政令に政令に定めるとか省令に任せるってことにしといて、パブコメだけで規則変えるのって頭いいけどズルくね？
母数は分母のことじゃないとか、n=100は標本数じゃなく標本サイズだとか、そういうの。
分類とクラスタリングは違うとか、俺がなにか喋るたびに訂正される。
自転車は車道って言われても、5叉路とかになるとどの信号みていいかわからん。
降りて歩行者になってる。
仕組みがよくわからん。
なんでこんな何枚も似たような書類をいろんなところに書かないといけないのか。
事業者に書類書いて、なんちゃら福祉事務所に書いて、自治体に書いてとまあ。
自治体に提出しにいくと、これは福祉課、これは子育て支援課、年収判定は課税課、子育て支援でゴミ袋無料になるから環境課に行けとかいろいろ。
その度に住所と名前を書く。
あとイールドカーブとかも知らんかった。
なんで住所情報を管理するシステムと家族関係を管理するシステムが別なのかわからん。
ジークアクスみてるんだけど、宇宙世紀は教養なのか？知らねーよ。
もう全部わからん。
コマンドプロンプトとPowerShellの違いすらわかんないってのに、TypeScriptとJavaScriptの違いなんか興味もないわな。
下地ってなんだ？
ジェスチャーでエンジンの動きを教えてくれた人がいてさ、水平対向エンジンはこう、Vツインはこう、と熱心にモノマネしてくれたんだけど、気が狂ったのかと思った。
実は、そもそも4サイクルと2サイクルの仕組みすらわかってないんだ。
ディーゼルはまた別なんだろ？
前項でエンジンわからんって言ったけど、身の回りの電化製品とかもほとんどわからん。
株式だってよくわかってないし、先物とかオプションとかスワップとかって説明されてもわからん。
生理周期とメンタルが関連するって聞いたけど、機嫌が悪いのは生理前なのか生理のときなのか生理直後なのか。
聞くのも憚られるから、女が怒ってるときは「なんかわかんないけどホルモンのせいだな」と諦めてる。
そもそも、自民党と共産党以外、どの党がどういう支持母体でなりたってるのかわかってない。
このエントリは2008年発売のAcerAspire One ZG5を使って書いている。
中古で買ったネットブック（AcerAspire One ZG5）に最低限のアップグレードを行い、Debian11 32bitをインストールし、軽作業ができるようにしている。
本体キーボードが壊れることも含めて、これまであらゆるトラブルに遭い続けている。
CPU:Atom N270 (single core 1.6Ghz)
RAM: 1.5GB
ディスプレイ: 8.9インチ, 1024x600TFTLCD
