[第2回] Webサービス開発講座

Slide 1

Slide 1 text

Webサービス開発講座第2回この資料はenPiT2023向けのものです。第3者へのリンクの配布等は作者(@notch_man8600）を提⽰した上でお願いします（ついでに感想もいただけると私が泣いて喜びます）

Slide 2

Slide 2 text

2 DISCLAIMER ● この講座は⼤学講義レベルのプログラミング履修者が対象です ● 即座にサービスを作れる実践的なテクニックは学びません ● 本講座はPythonを中⼼に進めますが作者はPythonが嫌いです ● 本サンプルコードを実⾏したことによる、いかなる責任を作者は負いません At your OWN risk！！

Slide 3

Slide 3 text

3 おしながき 1. 第2回の雑な説明 2. 第2回の雑な解説 3. お〇まけトーク 4. 技術選定の話（⽔曜にやる予定だった物のLT）

Slide 4

Slide 4 text

4 各種資料 [Web開発基礎講座] https://overjoyed-yew-99e.notion.site/Web-cd8dcd9eee9e46cfa5591ec e2179a4a5 [第2回notion資料] https://overjoyed-yew-99e.notion.site/2-OreChat-11021654de08466aa a0dc7a827e44bf5

Slide 5

Slide 5 text

5 ⾃⼰紹介クラウドソーシングサービスなどを開発しています notch_man twitter: @notch_man8600 ● 認定スクラムマスター（CSM) ● ラボのシステム開発の全責任を負う（⾟い） ● 学類パンフに載ったけど留年したよ（笑） ● 現場で都合良く使われています [概要] ● 2020年3⽉⾹川⾼専卒業 ● 2021年4⽉筑波⼤編⼊ ● enPiT2021（受講）&2022〜（メンター） [略歴]

Slide 6

Slide 6 text

6 この講座のゴールについて 1. シンプルなWebアプリを作れるようになる 2. Webアプリケーションを作る上でのお作法を学ぶ 3. 汎⽤的なスキルとノウハウを知る 4. オレオレFWを作りたくなる気持ちになる 5. オレオレFWを安易に使うと⽕傷をすることを知る 6. 巷のFWが何故受け⼊れられたのか考えられるようになる 7. おまけ話を聞いて世間を知る⽬標段階のレベルを定義しました。これらいずれかを⽬指しましょう！

Slide 7

Slide 7 text

7 本⽇の⽬標：シンプルなWebアプリを作れるようになる ● コピペしたらフロントとバックエンドが動くコードを作ります ○ Pythonなので分かりやすい！ ○ クリーンなコードでGPL3だから使いやすい！ ● それを写経したら何かが作れます ● ちょっと弄ると⾃分らしさが出せます ● 良い感じに弄られるようになると、⾊々なサービスが作れます ○ ロジックとかで使い回せるようになると⾮常に楽になります

Slide 8

Slide 8 text

皆さんできましたか？？

Slide 9

Slide 9 text

9 第2〜3回で作るもの ● OreChatというチャットサービスを作ります ○ ＷebSocketというイケてる（主観）技術を学べます ○ HTML+CSS+JSというシンプルな構成です ● Web開発の⼀連のお作法を学ぶことが出来ます ○ フロントエンドとは？ ○ バックエンドとは？ ○ Webサービスが実際に⽴ち上がるまで

Slide 10

Slide 10 text

10 Web開発のお作法 ● フロントエンド ○ 情報を提⽰するために使う ○ HTML+CSS+JavaScriptなどで記述されることが多い ○ イケてるライブラリやフレームワークとしてはReactやVueなどがある ● バックエンド ○ 定時する情報を保存するために使う ○ GoやGoやPythonやTypeScriptなどが⽤いられることが多い

Slide 11

Slide 11 text

11 フロントエンド 1. ユーザーに親切なHTMLを表⽰する 2. ユーザーからのイベントを受け取る 3. サーバーに（データを送り）処理をリクエストする 4. リクエストに対するレスポンスを受け取りユーザーに⾒せる

Slide 12

Slide 12 text

12 バックエンド 1. ユーザーからのリクエストを受け付ける 2. ユーザーからのリクエストを受け取り、何らかの処理する 3. ユーザーに対してリクエストの結果を返す

Slide 13

Slide 13 text

13 Web開発の学び⽅ 1. 基本的な流れを理解する a. 情報が表⽰されるまでの流れ b. フロントエンドとバックエンドの役割 2. 基本的な流れに従った⼩さなアプリを作る or 写経する a. OreChatが最適 3. 2の中で1の流れを実際のコードと対応付ける 4. 実際に⾃分でフルスクラッチで作ってみる

Slide 14

Slide 14 text

14 次回予告 ● マルチクライアント対応のチャットサービスを作ります ○ 今回のコードではまだマルチクライアントに対応していません ● コードリーディングのお作法を学びます ● バグとの歩き⽅を学びます ● 未知の問題の向き合い⽅を学びます

Slide 15

Slide 15 text

おま〇け

Slide 16

Slide 16 text

Python漫談

Slide 17

Slide 17 text

問：Pythonの良い所を3つ挙げよ

Slide 18

Slide 18 text

🤔

Slide 19

Slide 19 text

😇

Slide 20

Slide 20 text

20 Pythonの良い所 1. さっと動く物が作れる a. FastAPIのあれ、1時間くらいで⽴てられました b. 退屈な事はPythonにさせようみたいな本が出るくらい気軽に書ける 2. ⾯倒なことを考えなくて良い a. numpyとかはある程度勝⼿に最適化をしてくれる b. メモリの事を考えなくても良い（？） 3. 使ってる⼈が多い a. 数は正義です。草オレオレFWを⾒てくださいよ、酷すぎます。 b. メンターにC++の話を振ってみてください、多分1⼈くらいしか反応できません

Slide 21

Slide 21 text

21 数の正義 ● この界隈は⼤体数の正義で成り⽴っています ○ GitHubのスター数 ○ Fork数 ○ コミッター数 ○ ダウンロード‧アクセス数 ● 数が少ないものはウケていないかヤバい物である可能性が⾼いです

Slide 22

Slide 22 text

22 プログラミングの⼈気（？）ランキング出典：https://www.tiobe.com/tiobe-index/

Slide 23

Slide 23 text

23 とりあえずPythonを使おう ● 数は正義です ● 数が多い物には知識が集まります ● 我々のゴールは何かを考えましょう ● ⼤体の⼈のゴールはサービスを作ることですよね（？） ○ なら、ナレッジが集まっている物を使いましょう ○ Pythonは⾮常に豊富なナレッジが集積されています ○ メンターの充実した対応を期待できます（これ⼤事）

Slide 24

Slide 24 text

次回予告

Slide 25

Slide 25 text

Pythonを捨てよう

Slide 26

Slide 26 text

キーワード：Webサービス

Slide 27

Slide 27 text

あなたの視点で理由を考えてみてください

Slide 28

Slide 28 text

28 今⽇のまとめ ● ⻑く⽣きている流⾏り物を使いましょう ● 迷った時は多数派に従えば失敗しにくいです ● Pythonは初⼼者におすすめの⾔語です（notch_manのお墨付き） ○ 適当に素早くものが作れる ○ ライブラリが便利 ● ⼿段ではなく⽬的にフォーカスしましょう ○ 極論、バイナリを書いてもええんや ○ 我々は課題を解決するのが⽬的である

Slide 29

Slide 29 text

レガシーを克服しサービスを提供したい⼈現場の知⾒を得ながらものづくりをしたい⼈融合知能デザイン研究室に興味のある⼈ notch_man君へこっそり連絡を