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
76
クソコード鑑賞会
ライガー
December 08, 2023
Tweet
Share
More Decks by ライガー
See All by ライガー
Echo_itself_by__.pdf
raiga0310
0
42
愛知県なんもないよね~www
raiga0310
0
25
make HTTP server with Axum, Rust
raiga0310
0
110
Other Decks in Technology
See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
君も受託系GISエンジニアにならないか
sudataka
2
370
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
AndroidデバイスにFTPサーバを建立する
e10dokup
0
240
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.8k
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
1
110
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building Adaptive Systems
keathley
40
2.4k
Writing Fast Ruby
sferik
628
61k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Site-Speed That Sticks
csswizardry
3
370
The World Runs on Bad Software
bkeepers
PRO
67
11k
Six Lessons from altMBA
skipperchong
27
3.6k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Done Done
chrislema
182
16k
Scaling GitHub
holman
459
140k
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