Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
技術選定の話 〜安易に〇〇を選ぶな〜 2023/5/10 Kentaro Miyake
Slide 2
Slide 2 text
2 おしながき 1. 自己紹介 2. 技術選定とは？ 3. [実例で学ぶ] 技術選定で大火傷を負う方法 4. 現実的な技術選定とは？ 5. [実例で学ぶ] 現実的な技術選定 6. とりあえず、みんなは技術選定をやめよう 7. まとめ
Slide 3
Slide 3 text
3 ⾃⼰紹介 クラウドソーシングサービスなどを 開発しています notch_man twitter: @notch_man8600 ● 認定スクラムマスター（CSM) ● ラボのシステム開発の全責任を負う（辛い） ● 学類パンフに載ったけど留年したよ（笑） ● 現場で都合良く使われています [概要] ● 2020年3月 香川高専卒業 ● 2021年4月 筑波大編入 ● enPiT2021（受講）&2022～（メンター） [略歴]
Slide 4
Slide 4 text
4 What is it? このトークは技術スタックの 優劣を決める話ではありません And, there is no hate for Python
Slide 5
Slide 5 text
5 What is it? 技術選定で大火傷をしないために 技術選定で押さえるべきポイントを知る
Slide 6
Slide 6 text
6 DISCLAIMER ● enPiT特有の問題に向き合うための技術選定の話です ○ not 一般的な技術選定の話 ● 現場ではこの考えを捨ててください ● 私見が豊富に含まれます ● 後半の火力が高めですが、ラジオだと思ってください
Slide 7
Slide 7 text
7 技術選定とは 道具選び
Slide 8
Slide 8 text
8 技術選定とは その考えは捨てよう
Slide 9
Slide 9 text
9 技術選定とは 次の電柱まで歩く方法を考える
Slide 10
Slide 10 text
10 技術選定とは 現実的に使い物になりそうなトンカチを見つけて そのトンカチで釘を打ち付けて とりあえず、木と木をくっつける 微妙にくっつかなかったらボンドで止める
Slide 11
Slide 11 text
11 1. 使い物になるトンカチを⾒つける
Slide 12
Slide 12 text
12 1. 使い物になるトンカチを⾒つける 明日までにWebサイト作っといて
Slide 13
Slide 13 text
13 1. 使い物になるトンカチを⾒つける
Slide 14
Slide 14 text
14 1. 使い物になるトンカチを⾒つける あなたはどう要望に応えますか？
Slide 15
Slide 15 text
15 1. 使い物になるトンカチを⾒つける ● う～ん、WebサイトということはHTMLを触れば良さげ... ● HTMLであればLAMP生やすか、時代はレンサバ！ ● いや、講義資料はnotionで十分だしそれで良くね？ ● う～ん、俺はイケてるNext.jsで良い感じにSSRしてやるぜ！ 使ったことがある or 使い方が見える もっとも簡単な方法を選びましょう！
Slide 16
Slide 16 text
16 1. 使い物になるトンカチを⾒つける [実例] トンカチ選びの失敗談
Slide 17
Slide 17 text
17 過去の失敗談 ● う～ん、あのメンターがDjango最高！って言っていた ● 別のメンターはGoを推している ● 最近、TwitterでNext.js+Nest.jsが最高のWebFWだと言われるね ● 時代はGoogle！時代はAngular！ ● いや、俺はLaravelで攻める ● あそこでオレオレしてる人が格好いい！憧れる！あれに成りたい！ 全部アンチパターンです
Slide 18
Slide 18 text
18 1. 使い物になるトンカチを⾒つける 使ったことがある物以外使うな！
Slide 19
Slide 19 text
19 1. 使い物になるトンカチを⾒つける せめて、90%の確度で使えそうな物を選べ
Slide 20
Slide 20 text
20 技術選定とは 現実的に使い物になりそうなトンカチを見つけて そのトンカチで釘を打ち付けて とりあえず、木と木をくっつける 微妙にくっつかなかったらボンドで止める
Slide 21
Slide 21 text
21 2. トンカチで釘を打ち付ける 美しさ、作法、実行速度
Slide 22
Slide 22 text
22 2. トンカチで釘を打ち付ける 全て捨ててください
Slide 23
Slide 23 text
23 2. トンカチで釘を打ち付ける HTMLと決めたらHTMLで書いてください ex.) 自己紹介サイトを作る 私はnotch_man（23）です。
Slide 24
Slide 24 text
24 2. トンカチで釘を打ち付ける これを早く作れ
Slide 25
Slide 25 text
25 2. トンカチで釘を打ち付ける ● 格好いいCSSフレームワークは何だろう？ ● コードフォーマッタは何がおすすめ... ● エディタはviかvimかnvimのどれが良いのか...？ ● 5年後も死なないHTMLを書くにはどういう命名規則で... ● 良い情報提示のお作法を知りたい！ よおこそ、富士の樹海へ
Slide 26
Slide 26 text
26 2. トンカチで釘を打ち付ける トンカチを持ったらさっさと釘を打て！
Slide 27
Slide 27 text
27 技術選定とは 現実的に使い物になりそうなトンカチを見つけて そのトンカチで釘を打ち付けて とりあえず、木と木をくっつける 微妙にくっつかなかったらボンドで止める
Slide 28
Slide 28 text
28 3. とりあえず、⽊と⽊を繋ぐ 先ほどの話ですが... ● 格好いいCSSフレームワークは何だろう？ ● コードフォーマッタは何がおすすめ... ● エディタはviかvimかnvimのどれが良いのか...？ ● 5年後も死なないHTMLを書くにはどういう命名規則で... ● 良い情報提示のお作法を知りたい！
Slide 29
Slide 29 text
29 3. とりあえず、⽊と⽊を繋ぐ 木と木が繋がれば良いんです
Slide 30
Slide 30 text
30 3. とりあえず、⽊と⽊を繋ぐ トンカチを持ったらさっさと釘を打て！
Slide 31
Slide 31 text
31 3. とりあえず、⽊と⽊を繋ぐ とりあえず、繋がればOK
Slide 32
Slide 32 text
32 2,3の事例 notch_manの経験 ● ものづくりの美しさを追求するチームがありました ● ソフトウェア設計やチームの在り方の議論を費やす ● 気がついたら、作法を巡りヒートアップ ● コンテストの2週間前に物が出来ていない ● 付け焼き刃でプロダクトを開発 ● 結局、終わって1週間もすると誰も触れないプログラムが残る 樹海を歩いた意味が...
Slide 33
Slide 33 text
33 技術選定とは 現実的に使い物になりそうなトンカチを見つけて そのトンカチで釘を打ち付けて とりあえず、木と木をくっつける 微妙にくっつかなかったらボンドで止める
Slide 34
Slide 34 text
34 4. ボンドで⽌める 木と木が繋がれば良いんです
Slide 35
Slide 35 text
35 4. ボンドで⽌める 最悪、手を添え続けなさい
Slide 36
Slide 36 text
36 4. ボンドで⽌める 手→ボンド
Slide 37
Slide 37 text
37 4. ボンドで応急処置をする ● 文字が小さいんですけど？ ex.) 文字を大きくしたバージョン
私はnotch_man（23）です。
Slide 38
Slide 38 text
38 4. ボンドで応急処置をする 変更箇所1行でとりあえず解決
Slide 39
Slide 39 text
39 4. ボンドで応急処置をする ● 変更方法が分かりやすい ● 変更した痕跡が残りやすい ● 将来的にきちんと治さないといけないことが自覚できる ○ 付け焼き刃は分かりやすく見えます（分かっているものであれば） ● 変更を素早く反映することができる ○ 最初のHTMLをデプロイした方法は知っている ○ 確実に変更を届けることができる
Slide 40
Slide 40 text
40 4. のアンチパターン ● text-sm,text-lg,text-xlどれにしよう...？ ● えっと、それぞれの値は... ○ 0.875rem、remって何だよ... ● あ～、お客さんの環境は高DIPだから手元と値が狂う... ● 私は〇〇〇〇wind分からないです ○ よし、
で対応だ！ ● あらゆる所に現われる !important 結局、道具の使い方を間違えることになる
Slide 41
Slide 41 text
41 4. ボンドで応急処置をする 愚直な方法で治せる物を使おう
Slide 42
Slide 42 text
42 4. ボンドで応急処置をする 治し方が分からない物を使わない
Slide 43
Slide 43 text
43 現実的な技術選定とは 以下の4つを押さえた物にしましょう 1. 何となく（90%以上の自信）で使えそうなトンカチ 2. 誰でも使えそうなトンカチ 3. 治し方が現実的に分かる物 4. 治した跡が分かりやすい物
Slide 44
Slide 44 text
44 現実的な技術選定とは 現実的に使い物になりそうなトンカチを見つけて => ホームセンターのトンカチなら誰でも使える そのトンカチで釘を打ち付けて => 釘の打ち方は中学校で習ったからとりあえず出来そう とりあえず、木と木をくっつける => くっつけばOK！ 微妙にくっつかなかったらボンドで止める => 木工用ボンドは小学校で使ったことある => 跡が分かりやすいのでそのうち良い感じに治そう！
Slide 45
Slide 45 text
45 現実的な技術選定とは 甘言に流されず分からない物は使わない
Slide 46
Slide 46 text
46 弊ラボでは技術選定をどうしたか？ ● Pythonをメインにすることはこれまで通り ○ メンバーが最も触っている言語である ○ 元々のコードベースを踏襲する ○ 新規に入る人もPythonの履修率は高い ● 今後はGo”も”使っていく ○ 家庭菜園では使い始めている ○ 一部、Goでの開発を行なった経験がある ○ notch_manが対応できる
Slide 47
Slide 47 text
47 現実的な技術選定の補⾜ 上級者向けテク
Slide 48
Slide 48 text
48 フロントエンドの技術選定について ● notch_manの独断でReactを採用 ○ メンバーはほぼ分からない ○ これはアンチパターン ● notch_man1人で全てをカバー出来るので採用 ○ 現状、React化の範囲は狭い ○ 最悪、分からなくなったら素JSに置き換えられる仕組みを導入 ○ Webのデファクトになりつつあるので今後 React勢が来ることを期待
Slide 49
Slide 49 text
49 現実的な技術選定の補⾜ あなたが全責任を負えるなら好きにしろ
Slide 50
Slide 50 text
50 現実的な技術選定の補⾜ ただし、アンチパターンである
Slide 51
Slide 51 text
51 ところで、技術選定の話を⽌めませんか？ ex.) 私たちはデータベースを使うべきか否か... ● 辛辣ですが、このレベルの話はそもそも技術レベルが足りません ● 使う決断をしても十中八九大火傷を負います ● 90%の理解があったとしたら、これらの判断はできます ○ どこでDBを使うか使わないか？ ○ RDBかオブジェクトDBを使うか...？ “この時点で既に目の前のトンカチではないです”
Slide 52
Slide 52 text
52 技術選定の話をするなら ● 使えるトンカチを増やしましょう ○ 技術に対する知見をためましょう！ ○ 普段から様々な技術に触れてみましょう！ ○ 春学期は、新しいトンカチを探す旅をするのに絶好の機会です ○ メンターはトンカチ探しが大好きです ● 使えるトンカチの限界に挑んでみましょう ○ 去年のチームで大量のデータを埋め込んだところがあります ○ HTML+CSSはチューリング完全です ■ https://www.youtube.com/watch?v=Ak_sWZyHi3E
Slide 53
Slide 53 text
53 まとめ 技術選定で押さえるべきポイント a. （90%以上の自信）何となくで使えそうな物を選ぶ b. (a)が、誰でも使えそうなトンカチ c. トンカチの使い方を間違えたときの治し方が分かるか？ d. 将来の改修に備えて、修復跡が残る物であるか？ 技術選定に捕らわれず使える物で どんどん物作りをやりましょう！