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
notch_man
August 23, 2023
Technology
0
83
本当に初心者目線で考えた時の技術選定の話
2023年度の筑波大学enPiTで使用した資料です。全4回+αでWeb開発の基礎を学ぶことが出来ます。
※notion資料は近日公開予定です。
notch_man
August 23, 2023
Tweet
Share
More Decks by notch_man
See All by notch_man
[第4回] Webサービス開発講座
notchman8600
0
33
新人的ソフトウェアサバイバルガイド:荒野に向かい、瓦礫にぶつかり、迷子になり、広野に赴く
notchman8600
1
970
最高の開発手法、アジャイルを捨てよう
notchman8600
0
29
[第1回] Webサービス開発講座
notchman8600
0
50
[第2回] Webサービス開発講座
notchman8600
0
63
[第3回] Webサービス開発講座
notchman8600
0
65
Pythonけものみち(という名のオレオレFWを作った言い訳)
notchman8600
0
30
Other Decks in Technology
See All in Technology
撤退危機からのピボット : 4年目エンジニアがリードする TypeScript で挑む事業復活 / crisis-to-pivot-4th-year-engineer-ts-relaunch
carta_engineering
2
720
SRE/インフラエンジニアの市場価値とキャリアパス/Market value and career path for SRE-infrastructure engineers
takumakume
1
320
さくらのクラウド 開発の挑戦とその舞台裏
kazeburo
0
690
Slackひと声でブログ校正!Claudeレビュー自動化編
yusukeshimizu
3
120
他チームへ越境したら、生データ提供ソリューションのクエリ費用95%削減へ繋がった話 / Cross-Team Impact: 95% Off Raw Data Query Costs
yamamotoyuta
0
150
GitHub ActionsをTypeScriptで作ろう!
sansantech
PRO
2
360
declaration mergingの威力:ライブラリアップデート時の書き換え作業を90%短縮するテクニック
yutake27
2
240
初めてのGoogle Cloud by AWS出身者
harukasakihara
1
700
AWS LambdaでSocket通信サーバーレスアプリケーションのリアルタイム通信 / 20250523 Kumiko Hennmi
shift_evolve
1
270
大規模PaaSにおける監視基盤の構築と効率化の道のり
lycorptech_jp
PRO
0
130
スプリントゴールで価値を駆動しよう
takufujii
3
1.6k
主要ライブラリの実例に学ぶ、TypeScriptで実現する型安全な座標定義
tiroljpn
1
220
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Navigating Team Friction
lara
185
15k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Balancing Empowerment & Direction
lara
0
70
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Transcript
技術選定の話 〜安易に〇〇を選ぶな〜 2023/5/10 Kentaro Miyake
2 おしながき 1. 自己紹介 2. 技術選定とは? 3. [実例で学ぶ] 技術選定で大火傷を負う方法 4.
現実的な技術選定とは? 5. [実例で学ぶ] 現実的な技術選定 6. とりあえず、みんなは技術選定をやめよう 7. まとめ
3 ⾃⼰紹介 クラウドソーシングサービスなどを 開発しています notch_man twitter: @notch_man8600 • 認定スクラムマスター(CSM) •
ラボのシステム開発の全責任を負う(辛い) • 学類パンフに載ったけど留年したよ(笑) • 現場で都合良く使われています [概要] • 2020年3月 香川高専卒業 • 2021年4月 筑波大編入 • enPiT2021(受講)&2022~(メンター) [略歴]
4 What is it? このトークは技術スタックの 優劣を決める話ではありません And, there is no
hate for Python
5 What is it? 技術選定で大火傷をしないために 技術選定で押さえるべきポイントを知る
6 DISCLAIMER • enPiT特有の問題に向き合うための技術選定の話です ◦ not 一般的な技術選定の話 • 現場ではこの考えを捨ててください •
私見が豊富に含まれます • 後半の火力が高めですが、ラジオだと思ってください
7 技術選定とは 道具選び
8 技術選定とは その考えは捨てよう
9 技術選定とは 次の電柱まで歩く方法を考える
10 技術選定とは 現実的に使い物になりそうなトンカチを見つけて そのトンカチで釘を打ち付けて とりあえず、木と木をくっつける 微妙にくっつかなかったらボンドで止める
11 1. 使い物になるトンカチを⾒つける
12 1. 使い物になるトンカチを⾒つける 明日までにWebサイト作っといて
13 1. 使い物になるトンカチを⾒つける
14 1. 使い物になるトンカチを⾒つける あなたはどう要望に応えますか?
15 1. 使い物になるトンカチを⾒つける • う~ん、WebサイトということはHTMLを触れば良さげ... • HTMLであればLAMP生やすか、時代はレンサバ! • いや、講義資料はnotionで十分だしそれで良くね? •
う~ん、俺はイケてるNext.jsで良い感じにSSRしてやるぜ! 使ったことがある or 使い方が見える もっとも簡単な方法を選びましょう!
16 1. 使い物になるトンカチを⾒つける [実例] トンカチ選びの失敗談
17 過去の失敗談 • う~ん、あのメンターがDjango最高!って言っていた • 別のメンターはGoを推している • 最近、TwitterでNext.js+Nest.jsが最高のWebFWだと言われるね • 時代はGoogle!時代はAngular!
• いや、俺はLaravelで攻める • あそこでオレオレしてる人が格好いい!憧れる!あれに成りたい! 全部アンチパターンです
18 1. 使い物になるトンカチを⾒つける 使ったことがある物以外使うな!
19 1. 使い物になるトンカチを⾒つける せめて、90%の確度で使えそうな物を選べ
20 技術選定とは 現実的に使い物になりそうなトンカチを見つけて そのトンカチで釘を打ち付けて とりあえず、木と木をくっつける 微妙にくっつかなかったらボンドで止める
21 2. トンカチで釘を打ち付ける 美しさ、作法、実行速度
22 2. トンカチで釘を打ち付ける 全て捨ててください
23 2. トンカチで釘を打ち付ける HTMLと決めたらHTMLで書いてください ex.) 自己紹介サイトを作る <!DOCTYPE> <html> <body> 私はnotch_man(23)です。
</body> </html>
24 2. トンカチで釘を打ち付ける これを早く作れ
25 2. トンカチで釘を打ち付ける • 格好いいCSSフレームワークは何だろう? • コードフォーマッタは何がおすすめ... • エディタはviかvimかnvimのどれが良いのか...? •
5年後も死なないHTMLを書くにはどういう命名規則で... • 良い情報提示のお作法を知りたい! よおこそ、富士の樹海へ
26 2. トンカチで釘を打ち付ける トンカチを持ったらさっさと釘を打て!
27 技術選定とは 現実的に使い物になりそうなトンカチを見つけて そのトンカチで釘を打ち付けて とりあえず、木と木をくっつける 微妙にくっつかなかったらボンドで止める
28 3. とりあえず、⽊と⽊を繋ぐ 先ほどの話ですが... • 格好いいCSSフレームワークは何だろう? • コードフォーマッタは何がおすすめ... • エディタはviかvimかnvimのどれが良いのか...?
• 5年後も死なないHTMLを書くにはどういう命名規則で... • 良い情報提示のお作法を知りたい!
29 3. とりあえず、⽊と⽊を繋ぐ 木と木が繋がれば良いんです
30 3. とりあえず、⽊と⽊を繋ぐ トンカチを持ったらさっさと釘を打て!
31 3. とりあえず、⽊と⽊を繋ぐ とりあえず、繋がればOK
32 2,3の事例 notch_manの経験 • ものづくりの美しさを追求するチームがありました • ソフトウェア設計やチームの在り方の議論を費やす • 気がついたら、作法を巡りヒートアップ •
コンテストの2週間前に物が出来ていない • 付け焼き刃でプロダクトを開発 • 結局、終わって1週間もすると誰も触れないプログラムが残る 樹海を歩いた意味が...
33 技術選定とは 現実的に使い物になりそうなトンカチを見つけて そのトンカチで釘を打ち付けて とりあえず、木と木をくっつける 微妙にくっつかなかったらボンドで止める
34 4. ボンドで⽌める 木と木が繋がれば良いんです
35 4. ボンドで⽌める 最悪、手を添え続けなさい
36 4. ボンドで⽌める 手→ボンド
37 4. ボンドで応急処置をする • 文字が小さいんですけど? ex.) 文字を大きくしたバージョン <!DOCTYPE> <html> <body>
<h1> 私はnotch_man(23)です。</h1> </body> </html>
38 4. ボンドで応急処置をする 変更箇所1行でとりあえず解決
39 4. ボンドで応急処置をする • 変更方法が分かりやすい • 変更した痕跡が残りやすい • 将来的にきちんと治さないといけないことが自覚できる ◦
付け焼き刃は分かりやすく見えます(分かっているものであれば) • 変更を素早く反映することができる ◦ 最初のHTMLをデプロイした方法は知っている ◦ 確実に変更を届けることができる
40 4. のアンチパターン • text-sm,text-lg,text-xlどれにしよう...? • えっと、それぞれの値は... ◦ 0.875rem、remって何だよ... •
あ~、お客さんの環境は高DIPだから手元と値が狂う... • 私は〇〇〇〇wind分からないです ◦ よし、<h1 style=”font-size:100px”>で対応だ! • あらゆる所に現われる !important 結局、道具の使い方を間違えることになる
41 4. ボンドで応急処置をする 愚直な方法で治せる物を使おう
42 4. ボンドで応急処置をする 治し方が分からない物を使わない
43 現実的な技術選定とは 以下の4つを押さえた物にしましょう 1. 何となく(90%以上の自信)で使えそうなトンカチ 2. 誰でも使えそうなトンカチ 3. 治し方が現実的に分かる物 4.
治した跡が分かりやすい物
44 現実的な技術選定とは 現実的に使い物になりそうなトンカチを見つけて => ホームセンターのトンカチなら誰でも使える そのトンカチで釘を打ち付けて => 釘の打ち方は中学校で習ったからとりあえず出来そう とりあえず、木と木をくっつける =>
くっつけばOK! 微妙にくっつかなかったらボンドで止める => 木工用ボンドは小学校で使ったことある => 跡が分かりやすいのでそのうち良い感じに治そう!
45 現実的な技術選定とは 甘言に流されず分からない物は使わない
46 弊ラボでは技術選定をどうしたか? • Pythonをメインにすることはこれまで通り ◦ メンバーが最も触っている言語である ◦ 元々のコードベースを踏襲する ◦ 新規に入る人もPythonの履修率は高い
• 今後はGo”も”使っていく ◦ 家庭菜園では使い始めている ◦ 一部、Goでの開発を行なった経験がある ◦ notch_manが対応できる
47 現実的な技術選定の補⾜ 上級者向けテク
48 フロントエンドの技術選定について • notch_manの独断でReactを採用 ◦ メンバーはほぼ分からない ◦ これはアンチパターン • notch_man1人で全てをカバー出来るので採用
◦ 現状、React化の範囲は狭い ◦ 最悪、分からなくなったら素JSに置き換えられる仕組みを導入 ◦ Webのデファクトになりつつあるので今後 React勢が来ることを期待
49 現実的な技術選定の補⾜ あなたが全責任を負えるなら好きにしろ
50 現実的な技術選定の補⾜ ただし、アンチパターンである
51 ところで、技術選定の話を⽌めませんか? ex.) 私たちはデータベースを使うべきか否か... • 辛辣ですが、このレベルの話はそもそも技術レベルが足りません • 使う決断をしても十中八九大火傷を負います • 90%の理解があったとしたら、これらの判断はできます
◦ どこでDBを使うか使わないか? ◦ RDBかオブジェクトDBを使うか...? “この時点で既に目の前のトンカチではないです”
52 技術選定の話をするなら • 使えるトンカチを増やしましょう ◦ 技術に対する知見をためましょう! ◦ 普段から様々な技術に触れてみましょう! ◦ 春学期は、新しいトンカチを探す旅をするのに絶好の機会です
◦ メンターはトンカチ探しが大好きです • 使えるトンカチの限界に挑んでみましょう ◦ 去年のチームで大量のデータを埋め込んだところがあります ◦ HTML+CSSはチューリング完全です ▪ https://www.youtube.com/watch?v=Ak_sWZyHi3E
53 まとめ 技術選定で押さえるべきポイント a. (90%以上の自信)何となくで使えそうな物を選ぶ b. (a)が、誰でも使えそうなトンカチ c. トンカチの使い方を間違えたときの治し方が分かるか? d.
将来の改修に備えて、修復跡が残る物であるか? 技術選定に捕らわれず使える物で どんどん物作りをやりましょう!