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
[第2回] Webサービス開発講座
Search
notch_man
August 23, 2023
Education
0
37
[第2回] 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
20
新人的ソフトウェアサバイバルガイド:荒野に向かい、瓦礫にぶつかり、迷子になり、広野に赴く
notchman8600
1
640
最高の開発手法、アジャイルを捨てよう
notchman8600
0
13
[第1回] Webサービス開発講座
notchman8600
0
28
[第3回] Webサービス開発講座
notchman8600
0
41
本当に初心者目線で考えた時の技術選定の話
notchman8600
0
48
Pythonけものみち(という名のオレオレFWを作った言い訳)
notchman8600
0
14
Other Decks in Education
See All in Education
Ch7_-_Partie_1.pdf
bernhardsvt
0
140
H5P-työkalut
matleenalaakso
3
33k
LinkedIn
matleenalaakso
0
1.9k
令和6年度 無料トライアルキャンペーン説明会
asial_edu
0
1.2k
🎓 ChatGPT を組み込んだ24時間TA : 教育現場における LLM 活用の課題と改善
yasslab
PRO
0
350
Sähköiset kyselyt, kokeet ja arviointi
matleenalaakso
1
16k
論文の読み方 / How to survey
kaityo256
PRO
183
130k
生成AIを活用できる大学教職員になる-基本と実践-
gmoriki
0
330
WordPressを教える人のための視点と考え方
crebowinfo
1
260
Earthquake and Disaster Prevention Information for UTokyo International Students
utokyoissr2360
0
650
キャリアと組織の成長塾#1 アスリートからエンジニアの道へ
takashi_toyosaki
2
820
Multimodal Interaction - Lecture 3 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.1k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Become a Pro
speakerdeck
PRO
13
4.6k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
In The Pink: A Labor of Love
frogandcode
138
21k
The Invisible Customer
myddelton
114
12k
Designing for humans not robots
tammielis
247
25k
4 Signs Your Business is Dying
shpigford
176
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Transcript
Webサービス開発講座 第2回 この資料はenPiT2023向けのものです。 第3者へのリンクの配布等は 作者(@notch_man8600)を提⽰した上でお願いします (ついでに感想もいただけると私が泣いて喜びます)
2 DISCLAIMER • この講座は⼤学講義レベルのプログラミング履修者が対象です • 即座にサービスを作れる実践的なテクニックは学びません • 本講座はPythonを中⼼に進めますが作者はPythonが嫌いです • 本サンプルコードを実⾏したことによる、いかなる責任を作者
は負いません At your OWN risk!!
3 おしながき 1. 第2回の雑な説明 2. 第2回の雑な解説 3. お〇まけトーク 4. 技術選定の話(⽔曜にやる予定だった物のLT)
4 各種資料 [Web開発基礎講座] https://overjoyed-yew-99e.notion.site/Web-cd8dcd9eee9e46cfa5591ec e2179a4a5 [第2回notion資料] https://overjoyed-yew-99e.notion.site/2-OreChat-11021654de08466aa a0dc7a827e44bf5
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 Web開発の学び⽅ 1. 基本的な流れを理解する a. 情報が表⽰されるまでの流れ b. フロントエンドとバックエンドの役割 2. 基本的な流れに従った⼩さなアプリを作る
or 写経する a. OreChatが最適 3. 2の中で1の流れを実際のコードと対応付ける 4. 実際に⾃分でフルスクラッチで作ってみる
14 次回予告 • マルチクライアント対応のチャットサービスを作ります ◦ 今回のコードではまだマルチクライアントに対応していません • コードリーディングのお作法を学びます • バグとの歩き⽅を学びます
• 未知の問題の向き合い⽅を学びます
おま〇け
Python漫談
問:Pythonの良い所を3つ挙げよ
🤔
😇
20 Pythonの良い所 1. さっと動く物が作れる a. FastAPIのあれ、1時間くらいで⽴てられました b. 退屈な事はPythonにさせようみたいな本が出るくらい気軽に書ける 2. ⾯倒なことを考えなくて良い
a. numpyとかはある程度勝⼿に最適化をしてくれる b. メモリの事を考えなくても良い(?) 3. 使ってる⼈が多い a. 数は正義です。草オレオレFWを⾒てくださいよ、酷すぎます。 b. メンターにC++の話を振ってみてください、多分1⼈くらいしか反応できません
21 数の正義 • この界隈は⼤体数の正義で成り⽴っています ◦ GitHubのスター数 ◦ Fork数 ◦ コミッター数
◦ ダウンロード‧アクセス数 • 数が少ないものはウケていないかヤバい物である可能性が⾼いです
22 プログラミングの⼈気(?)ランキング 出典:https://www.tiobe.com/tiobe-index/
23 とりあえずPythonを使おう • 数は正義です • 数が多い物には知識が集まります • 我々のゴールは何かを考えましょう • ⼤体の⼈のゴールはサービスを作ることですよね(?)
◦ なら、ナレッジが集まっている物を使いましょう ◦ Pythonは⾮常に豊富なナレッジが集積されています ◦ メンターの充実した対応を期待できます(これ⼤事)
次回予告
Pythonを捨てよう
キーワード:Webサービス
あなたの視点で理由を考えてみてください
28 今⽇のまとめ • ⻑く⽣きている流⾏り物を使いましょう • 迷った時は多数派に従えば失敗しにくいです • Pythonは初⼼者におすすめの⾔語です(notch_manのお墨付き) ◦ 適当に素早くものが作れる
◦ ライブラリが便利 • ⼿段ではなく⽬的にフォーカスしましょう ◦ 極論、バイナリを書いてもええんや ◦ 我々は課題を解決するのが⽬的である
レガシーを克服しサービスを提供したい⼈ 現場の知⾒を得ながらものづくりをしたい⼈ 融合知能デザイン研究室に興味のある⼈ notch_man君へこっそり連絡を