JavaScript × コードゴルフ

-- Views

September 13, 26

スライド概要

オープンセミナー2026@岡山 懇親会LTでお話した内容です。
https://oso.connpass.com/event/401702/

以下はスライド内で紹介している記事です。
※スライドの内容のネタバレになるので後で読む方が良いかもしれません。
https://blog.dnek.net/entry/2026/09/04/173646

profile-image

DNEK(でぃーねっく)です。 個人で運ゲー排除マインスイーパー、二字熟語穴埋めパズル、にじぷよ(にじさんじの同人ゲーム)、VTuber検索サイト「v-data」、ブラウザ拡張機能(ニコニコ、AtCoder)、Piet IDE「Pietron」等々を開発しています。 詳しくは以下を御覧ください。 https://dnek.net/ja/

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

JavaScript × コードゴルフ 2026/9/12 オープンセミナー2026@岡山 懇親会LT DNEK(でぃーねっく)

2.

自己紹介 「DNEK(でぃーねっく)」と言います。 個人でモバイルアプリや Webサイトを開発・運営 「京大マイコンクラブ (KMC)」所属 X: @dnek_ コーディング系の趣味多め HP: dnek.net (競プロ, esolang, コードゴルフ) Rating 1613 Rating(Heuristic) 1863

3.

「コードゴルフ」って何? お題に従って「なるべく”短い”コード」を書く遊び 「ショートコーディング」とも言う

4.
[beta]
コードゴルフの例(113B → 49B)
const isHere = Math.random() < 0.5; // 0〜1の乱数
if (isHere) { //「0.0 <= 乱数 < 0.5」の場合
console.log('Okayama'); // 'Okayama' を出力
} else {
//「0.5 <= 乱数 < 1.0」の場合
console.log('Wakayama'); // 'Wakayama' を出力
} // コメント以外で計113B

↓ 省略( 0.5 → .5 )、置換( if else → ? : )等
console.log(`${Math.random()<.5?'O':'Wa'}kayama`)

5.

コードの”短さ”に意味はあるのか? 人間 → 単なる短さより可読性・保守性優先 機械 →(特に単純なテクは)ほぼ実行前に捨象される コンパイル後のバイナリ、抽象構文木 → ”楽しい”が、実用上の利点はほぼ無い

6.

それでも”短さ”が役立つ場面 特にJavaScriptで有用な場合がある エッジランタイム等、非富豪的な環境で実行される Cloudflare Worker size上限: gzip前で 64 MiB Web閲覧時、転送量の約1/4を占めるらしい ビルド時の最適化が重要

7.

最適化の一例(DNEK運営 v-data.info より) コードゴルフに共通する手法が見られる

8.

賞金付きコードゴルフもある 2024年8-9月 第1回MN-Core Challenge Preferred Networks 主催 「実行時間が行数にほぼ比例する」、という特徴の PFN独自開発AIプロセッサー「MN-Core 2」のアセ ンブリコードを、なるべく”少ない”行数で書く → 私は10位入賞で2万円獲得(1位は40万円)

9.

本題

10.

最近”巻き込まれ”に行った話 「ブラウザで〇〇を実行する」JSコードの投稿を目撃 作者: yuiさん(海外の方、今まで関わり無し) 元の362バイトに、私が「まだ短くなる」と指摘 → 2人で何日にも及ぶ縮め合いの応酬が始まる → 247バイトになった

11.
[beta]
クイズ「247バイトの〇〇」
b=e=>document.body.innerHTML=m(73,e||[~
9,..."1172711",~9].map(j=>m[i-=j]?++e:
i).map(j=>b(b[i=j]^1|e),b[i]=!m[O--,i]*
~e));b(m=t=>t--?`<a onmouseup=b(b[i=
${t}]^=event.which)>${t%9?"*#F"[x=b
[t]??=(O-=m[t]=Math.random()<.1,1)]??~
x:"<p>"}`+m(t):O,O=64)

12.

抜き出しヒント → <body> を更新する <a onmouseup= → マウスを離したときに何かする "*#F"[...] → 文字 "*" "#" "F" を使う m[t]=Math.random()<.1 → 乱数を使う document.body.innerHTML=

13.

答え合わせ(実行方法) 1. about:blank で 空のタブを開く 2. コンソールにコピペ

14.

答え(?) A. マインスイーパー……? 各文字を左右クリックで 開ける or 旗切替 ……ちょっと見辛い 開始直後 プレイ中

15.

答え(CSSで微調整) A. マインスイーパー ちょっと見やすくなった 上: 8x8 の盤面 初期 "#" 、旗 "F" 左下: 残りのマス数 ※ CSS無しでもちゃんと遊べる

16.

おまけ

17.
[beta]
プロンプト版

さっきのは(比較的)「遊べる版」
機能を絞った133バイト「プロンプト版」も書いた

m=i=>{a=8;for(j of"01182811")a-=!m[i-=
j];b[i+=11]=m[i]||a;m(-~prompt(t?b[--t]=
t%10?(M-=m[t]=new Date%7<1,9):`
`:M+b))};m(b=M=[],t=90)

18.

プロンプト版画面 1. Enterキー90回連打で初期化 2. 次に開ける座標を入力 右上 ( 1, 9 ) なら 19 旗を立てられない 0 の周りは再帰的に開かない

19.

解説記事 ↓解説記事QR 詳しいコード解説はブログ記事で yuiさんの記事も紹介 または 「DNEK ブログ」 で検索

20.

DNEKの主な製作物 (dnek.net より) ↓解説記事QR

21.

↓解説記事QR おわり または 「DNEK ブログ」 で検索