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
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
1
240
現場で役立つAPIデザイン
nagix
29
10k
High Performance PHP
cmuench
0
140
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
7
1k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.5k
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
Larkご案内資料
customercloud
PRO
0
600
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Adaptive Systems
keathley
40
2.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Facilitating Awesome Meetings
lara
51
6.2k
It's Worth the Effort
3n
184
28k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
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