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
65
クソコード鑑賞会
ライガー
December 08, 2023
Tweet
Share
More Decks by ライガー
See All by ライガー
Echo_itself_by__.pdf
raiga0310
0
35
愛知県なんもないよね~www
raiga0310
0
23
make HTTP server with Axum, Rust
raiga0310
0
110
Other Decks in Technology
See All in Technology
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
190
あなたの知らない Function.prototype.toString() の世界
mizdra
PRO
3
760
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
790
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
560
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.7k
SAP Community and Developer Update
sygyzmundovych
0
350
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
230
Taming you application's environments
salaboy
0
200
静的解析で実現した効率的なi18n対応の仕組みづくり
minako__ph
2
340
電話を切らさない技術 電話自動応答サービスを支える フロントエンド
barometrica
1
220
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
10
1.5k
The Role of Developer Relations in AI Product Success.
giftojabu1
0
150
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
The World Runs on Bad Software
bkeepers
PRO
65
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Building Your Own Lightsaber
phodgson
103
6.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
Producing Creativity
orderedlist
PRO
341
39k
YesSQL, Process and Tooling at Scale
rocio
169
14k
GraphQLとの向き合い方2022年版
quramy
43
13k
Embracing the Ebb and Flow
colly
84
4.5k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
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