Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
クソコード鑑賞会
Search
ライガー
December 08, 2023
Technology
0
110
クソコード鑑賞会
ライガー
December 08, 2023
Tweet
Share
More Decks by ライガー
See All by ライガー
Echo_itself_by__.pdf
raiga0310
0
46
愛知県なんもないよね~www
raiga0310
0
36
make HTTP server with Axum, Rust
raiga0310
0
120
Other Decks in Technology
See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
10
75k
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
870
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
110
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
270
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
10k
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
330
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
450
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
2
270
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
500
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
210
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Rails Girls Zürich Keynote
gr2m
95
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Statistics for Hackers
jakevdp
799
220k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Git: the NoSQL Database
bkeepers
PRO
431
66k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
The Invisible Side of Design
smashingmag
301
51k
Transcript
クソコード鑑賞会 Kloud LT
自己紹介 • raiga0310/AHOXA/ライガー • (元)豊田高専 • B3 • インターン(PHP、PostgreSQL、バックエンド) •
twitter: @ahoxa1rx • portfolio: https://profile.a6x.dev • Rust,TypeScript • Hono.jsがきになるお年頃
はじめに • Done is better than perfect(出さない神レポより出すゴミレポ) • どんなに設計がきれいでも動かないと意味がありません ◦
どんなに読みづらいコードや仕様がなくてもそれがうごいてかつお金になっているコードはたくさ んある ◦ 動くから金になる ◦ もちろん、きれいなことに越したことは無い (脆弱性とか、拡張性とか )
クソコードって何?
人によるかもしれません
クソコードの種類 世で動いているクソコード • 動いて「は」いる • この時点で正義だが保守的にはつらい • 脆弱性が多いことがある • 改良しづらい
世に動いていないクソコード • 動作するかの保証もない • 仕様がない場合、まずコードを読み解くのも 難しい • 改良しようとしたときには手詰まりになるかも • 作り直したほうが早い ?
クソコードを読んでみよう
コードを読む前に ハックツハッカソン https://cup.hackz.team/ • 宿泊費タダでハッカソン • 3日間集中できる!
作ったもの 3人称弾幕シューティング ゲーム本体 https://game.a6x.dev 紹介記事 https://topaz.dev/projects/50c8c6208a1e8e39e421 Vercel+Next.js+Babylon.js
本体 いわゆるAppRouter メンター陣がNextできる方が多かった Vercelならデプロイし易い
クソコードポイント: 全部盛り
こちらご覧ください
何がいけないか • ファイル分けをしていない ◦ ゲームのどこかに変更を加えたコミットでも「 Canvas.tsx」の差分にしかならないため、差分を見 るまで実際に何が行われたかを (メッセージがあるとはいえ )読まないといけない ◦
下手な変更をするとゲーム全体に影響が出る ▪ テストがあったとしても・・・・・・
何がいけないか • WhatとHowの分離 • 要はViewとLogicが分かれていない • 違う関心のコードが近い位置にあると改良時のコストが高い • UIが何をするのか、エージェントは何をするのか、とか
何がいけないか • 型ァ!!!!!!!! ◦ もうこんなのほぼJSです ◦ 型チェックがないとつらい
クソコードポイント:技術選定
どうしてNext.jsなんですか もはや素のWebGL描画だけでよかったやん • デフォルトのSSRのせいでゲームが描画されない不具合に2h溶かした • (あとUnityで良くねとかになるよね)
クソコードポイント:ない仕様
何がいけないか ふと思い立って改良しよう!→該当部分はどこ? ドキュメントは書こうね!手書きでも
まとめ • コードは役割やロジックでちゃんとファイル・ディレクトリ分けをする • 型が用意されていればちゃんと型を使う • 仕様はちゃんと書く • 仕様はちゃんと書く
鑑賞会 会場: https://github.com/raiga0310/hackz-hackathon2023