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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
ライガー
December 08, 2023
Technology
0
130
クソコード鑑賞会
ライガー
December 08, 2023
Tweet
Share
More Decks by ライガー
See All by ライガー
Echo_itself_by__.pdf
raiga0310
0
47
愛知県なんもないよね~www
raiga0310
0
36
make HTTP server with Axum, Rust
raiga0310
0
120
Other Decks in Technology
See All in Technology
コンテナセキュリティの最新事情 ~ 2026年版 ~
kyohmizu
4
780
登壇駆動学習のすすめ — CfPのネタの見つけ方と書くときに意識していること
bicstone
3
130
SREじゃなかった僕らがenablingを通じて「SRE実践者」になるまでのリアル / SRE Kaigi 2026
aeonpeople
6
2.5k
SREが向き合う大規模リアーキテクチャ 〜信頼性とアジリティの両立〜
zepprix
0
470
データの整合性を保ちたいだけなんだ
shoheimitani
8
3.2k
コミュニティが変えるキャリアの地平線:コロナ禍新卒入社のエンジニアがAWSコミュニティで見つけた成長の羅針盤
kentosuzuki
0
130
Greatest Disaster Hits in Web Performance
guaca
0
280
Frontier Agents (Kiro autonomous agent / AWS Security Agent / AWS DevOps Agent) の紹介
msysh
3
180
SchooでVue.js/Nuxtを技術選定している理由
yamanoku
3
160
プロポーザルに込める段取り八分
shoheimitani
1
610
pool.ntp.orgに ⾃宅サーバーで 参加してみたら...
tanyorg
0
140
Bill One急成長の舞台裏 開発組織が直面した失敗と教訓
sansantech
PRO
2
390
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
330
40k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.3k
Believing is Seeing
oripsolob
1
58
Test your architecture with Archunit
thirion
1
2.2k
Making the Leap to Tech Lead
cromwellryan
135
9.7k
The World Runs on Bad Software
bkeepers
PRO
72
12k
GraphQLとの向き合い方2022年版
quramy
50
14k
Amusing Abliteration
ianozsvald
0
100
Leo the Paperboy
mayatellez
4
1.4k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
350
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