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
[第3回] Webサービス開発講座
Search
notch_man
August 23, 2023
Education
0
63
[第3回] Webサービス開発講座
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
29
新人的ソフトウェアサバイバルガイド:荒野に向かい、瓦礫にぶつかり、迷子になり、広野に赴く
notchman8600
1
900
最高の開発手法、アジャイルを捨てよう
notchman8600
0
22
[第1回] Webサービス開発講座
notchman8600
0
45
[第2回] Webサービス開発講座
notchman8600
0
55
本当に初心者目線で考えた時の技術選定の話
notchman8600
0
74
Pythonけものみち(という名のオレオレFWを作った言い訳)
notchman8600
0
22
Other Decks in Education
See All in Education
Казармы и гарнизоны
pnuslide
0
180
The Task is not the End: The Role of Task Repetition and Sequencing In Language Teaching
uranoken
0
300
2024年度秋学期 統計学 第12回 分布の平均を推測する - 区間推定 (2024. 12. 11)
akiraasano
PRO
0
120
Monaca Education 活用事例セミナー:「年間通してMonaca Educationを活用する授業実践のご報告」
asial_edu
0
110
A Chatbot is Not a Search Engine (it's more like a roleplaying game)
dsalo
0
150
世界の将来人口を誰でも語れるようになる
jo76shin
0
120
Tips for the Presentation - Lecture 2 - Advanced Topics in Big Data (4023256FNR)
signer
PRO
0
210
Ilman kirjautumista toimivia sovelluksia
matleenalaakso
1
20k
Medidas en informática
irocho
0
1.1k
Ch4_-_Cours_2.pdf
bernhardsvt
0
170
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
2.6k
Introduction - Lecture 1 - Advanced Topics in Big Data (4023256FNR)
signer
PRO
1
1.7k
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Designing Experiences People Love
moore
140
23k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Building Applications with DynamoDB
mza
93
6.2k
Visualization
eitanlees
146
15k
Speed Design
sergeychernyshev
27
800
The Invisible Side of Design
smashingmag
299
50k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Site-Speed That Sticks
csswizardry
4
390
Build your cross-platform service in a week with App Engine
jlugia
229
18k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Transcript
Webサービス開発講座 第3回 この資料はenPiT2023向けのものです。 第3者へのリンクの配布等は 作者(@notch_man8600)を提⽰した上でお願いします (ついでに感想もいただけると私が泣いて喜びます)
2 DISCLAIMER • この講座は⼤学講義レベルのプログラミング履修者が対象です • 即座にサービスを作れる実践的なテクニックは学びません • 本講座はPythonを中⼼に進めますが作者はPythonが嫌いです • 本サンプルコードを実⾏したことによる、いかなる責任を作者
は負いません At your OWN risk!!
3 おしながき 1. 第3回の雑な説明 2. 第3回の雑な解説 3. お〇まけトーク 4. 技術選定の話(⽔曜にやる予定だった物のLT)
4 各種資料 [Web開発基礎講座] https://overjoyed-yew-99e.notion.site/Web-cd8dcd9eee9e46cfa5591ec e2179a4a5 [第3回notion資料] https://overjoyed-yew-99e.notion.site/3-OreChat-91d84ca65de74c82b 2d446b99fa95367
5 ⾃⼰紹介 クラウドソーシングサービスなどを 開発しています notch_man twitter: @notch_man8600 • 認定スクラムマスター(CSM) •
ラボのシステム開発の全責任を負う(⾟い) • 学類パンフに載ったけど留年したよ(笑) • 現場で都合良く使われています [概要] • 2020年3⽉ ⾹川⾼専卒業 • 2021年4⽉ 筑波⼤編⼊ • enPiT2021(受講)&2022〜(メンター) [略歴]
6 この講座のゴールについて 1. シンプルなWebアプリを作れるようになる 2. Webアプリケーションを作る上でのお作法を学ぶ 3. 汎⽤的なスキルとノウハウを知る 4. オレオレFWを作りたくなる気持ちになる
5. オレオレFWを安易に使うと⽕傷をすることを知る 6. 巷のFWが何故受け⼊れられたのか考えられるようになる 7. おまけ話を聞いて世間を知る ⽬標段階のレベルを定義しました。 これらいずれかを⽬指しましょう!
7 本⽇の⽬標:シンプルなWebアプリを作れるようになる • コピペしたらフロントとバックエンドが動くコードを作ります ◦ Pythonなので分かりやすい! ◦ クリーンなコードでGPL3だから使いやすい! • それを写経したら何かが作れます
• ちょっと弄ると⾃分らしさが出せます • 良い感じに弄られるようになると、⾊々なサービスが作れます ◦ ロジックとかで使い回せるようになると⾮常に楽になります
皆さんできましたか??
9 第2〜3回で作るもの • OreChatというチャットサービスを作ります ◦ WebSocketというイケてる(主観)技術を学べます ◦ HTML+CSS+JSというシンプルな構成です • Web開発の⼀連のお作法を学ぶことが出来ます
◦ フロントエンドとは? ◦ バックエンドとは? ◦ Webサービスが実際に⽴ち上がるまで
10 Web開発のお作法 • フロントエンド ◦ 情報を提⽰するために使う ◦ HTML+CSS+JavaScriptなどで記述されることが多い ◦ イケてるライブラリやフレームワークとしてはReactやVueなどがある
• バックエンド ◦ 定時する情報を保存するために使う ◦ GoやGoやPythonやTypeScriptなどが⽤いられることが多い
11 フロントエンド 1. ユーザーに親切なHTMLを表⽰する 2. ユーザーからのイベントを受け取る 3. サーバーに(データを送り)処理をリクエストする 4. リクエストに対するレスポンスを受け取りユーザーに⾒せる
12 バックエンド 1. ユーザーからのリクエストを受け付ける 2. ユーザーからのリクエストを受け取り、何らかの処理する 3. ユーザーに対してリクエストの結果を返す
13 未知の問題との戦い⽅ 1. 静的解析ツールを使う 2. GitHubを頼る 3. StackOverflowを漁ってみる 4. ChatGPTに聞いてみる
14 静的解析ツールに頼る • クラスや構造体のプロパティ名を⾒る • 基底クラスの定義を覗いてみる • 参照先を追跡して挙動を追う
15 GitHubやStackOverflowを頼る • エラーコードでググると⼤体いろいろなサイトが出てくる ◦ GitHubとStackOverflow以外はあまり信⽤できない • GitHubのissuesやpull requestsを⾒ると同じ課題に直⾯した⼈が居る
16 ChatGPTに聞いてみる • 良い感じに聞くと答えを教えてくれます • 私の研究のコードはChatGPTが100倍以上早くなりました
17 開発⼒を⾼める • ものごとを何とかする道筋を知識と知る • 未知の問題を解くための道筋の開き⽅を経験する • トライアンドエラーを繰り返して知恵を得る
18 次回予告 • 未定
おま〇け
Python漫談
Pythonを捨てよう
キーワード:Webサービス
Pythonの可愛らしい点(⽋点)を上げよ!
24 Pythonの可愛らしい点 • ゆるふわな辞書型 ◦ あらゆるデータ構造を扱える • interfaceが無いのが⾟い ◦ 旅をしてしまうクラス
• そもそも実⾏速度が遅い • 型を安⼼して書けないので⾟い • 静的解析ツールもオレオレしており⾮常に苦しい(あと重い) • ライブラリがブロークンに変わる
25 可愛らしいdictの例 request = { "data": 1, "user_id": "example-user-id", "password":
"password", "method": "add", } router = { "/add": lambda a, b: a + b, "/sub": lambda a, b: a - b, } if "method" in request: print(router[request["method"]](request["data"], 2)) try: print(request["1"]) # もしパスワードカラムみたいなものがあったら削除しよう request.pop("password") except Exception as e: pass print(request["user_id"]) ex.) 辞書を使ったルーターの様な物体
26 可愛らしいdictの例 • key-valueの型が揺れる ◦ 静的解析で追跡しにくい ◦ ⾃由に値を書き換える • 気軽に抽象クラスでエラーを掴んでしまう
◦ エラータイプが分からん ◦ passの恐ろしさ • 無い物が⽣まれたり、あるものが無くなったり • ありとあらゆることが⾃由にできる
27 私がPythonをサービス開発で使いたくない理由 • 静的解析が効きづらい ◦ 後任が苦しむ ◦ バグの温床になる(静的解析はテストの1⼿法) • エラーハンドリングが弱い
◦ エラーに型があるため、基底クラスで掴みがち ◦ ゆるふわにpassをするサンプルが多いため死んでしまう • パフォーマンスが遅い ◦ FastAPIとかを使うとある程度は解決できるが... • FWがブロークンに変わる(まあ⾔語も...)
28 私がPythonをサービス開発で使いたくない理由 • サービスは⻑⽣きしてしまう ◦ うっかり、作ったサービスが10年以上 • あなたは毎年リプレイス(という名の終わらない作り直し)をやる? • ソフトウェアの品質特性を担保するのが苦しい
◦ 信頼性 ◦ 保守性 ◦ 機能性
29 サービス開発の⼿段として抑えて欲しい点 • とりあえず、3年は⽣かしてくれ ◦ 3年は⼤幅には壊れない技術選定 ◦ メンテナンスし続けられる技術選定 ◦ ブロークンに変わる可能性の低い技術選定
• コードの中と外に頼れるものであるか? • コードの中に頼れるか ◦ コメントアウト、型宣⾔‧型ヒント、docstring • コードの外に頼れるか ◦ テスト、静的解析、フォーマッタ...
それでも
それでも
それでも
Pythonでサービスを作りたい
よおこそ、けもの道へ
次回予告
Python漫談
Pythonけものみち 〜Pythonで3年⽣かせるコードを⽬指して〜
おたのしみに
39 本⽇のまとめ • Pythonでサービスを作るのは⾟い ◦ ⾃由が故に⾃由に翻弄され、責任は誰も負わない • サービス開発をする上で⼼得て欲しい点 ◦ 90%の⼈が分かる技術選定である
◦ 直し⽅が現実的で傷跡が分かりやすいものである ◦ テストや静的解析など外から傷をフォローできる • 3年は⽣きるコードを書いてくれ!
レガシーを克服しサービスを提供したい⼈ 現場の知⾒を得ながらものづくりをしたい⼈ 融合知能デザイン研究室に興味のある⼈ notch_man君へこっそり連絡を