Submit Search
Upload
【読書会】プロになるためなるためのWeb技術入門
•
2 likes
•
3,702 views
優之 田中
Follow
「プロになるためなるためのWeb技術入門」の2回目読書会。CGIについてとフレームワークの話を追記。
Read less
Read more
Report
Share
Report
Share
1 of 35
Download now
Download to read offline
Recommended
オンライン・ワークショップで最新のスキルを共有しよう。
オンライン・ワークショップで最新のスキルを共有しよう。
Tsuyoshi Motobe
第85回名古屋アジャイル勉強会「ふりかえりでアジャイルなチームを育てる」
第85回名古屋アジャイル勉強会「ふりかえりでアジャイルなチームを育てる」
hiroyuki Yamamoto
プログラミングのお勉強としてscratchをさわってみた
プログラミングのお勉強としてscratchをさわってみた
HirokiIwanaga
Word bench山梨 takenaka
Word bench山梨 takenaka
Kuniyoshi Takenaka
「Movable Typeの可能性を広げるアドオン「DynamicMTML」について」 v2 (MTDDC Meetup HOKKAIDO 2013版)
「Movable Typeの可能性を広げるアドオン「DynamicMTML」について」 v2 (MTDDC Meetup HOKKAIDO 2013版)
Kentaro Suzuki
Webページで学ぶJavaScript2013 第0回
Webページで学ぶJavaScript2013 第0回
京大 マイコンクラブ
20150622 Bluemix触ってみた、からのー
20150622 Bluemix触ってみた、からのー
Gyori Nagafuchi
ビジネス系大学の学生がMonacaを使ってスマホアプリ制作プロジェクトをやりきった
ビジネス系大学の学生がMonacaを使ってスマホアプリ制作プロジェクトをやりきった
Norio Toyama
Recommended
オンライン・ワークショップで最新のスキルを共有しよう。
オンライン・ワークショップで最新のスキルを共有しよう。
Tsuyoshi Motobe
第85回名古屋アジャイル勉強会「ふりかえりでアジャイルなチームを育てる」
第85回名古屋アジャイル勉強会「ふりかえりでアジャイルなチームを育てる」
hiroyuki Yamamoto
プログラミングのお勉強としてscratchをさわってみた
プログラミングのお勉強としてscratchをさわってみた
HirokiIwanaga
Word bench山梨 takenaka
Word bench山梨 takenaka
Kuniyoshi Takenaka
「Movable Typeの可能性を広げるアドオン「DynamicMTML」について」 v2 (MTDDC Meetup HOKKAIDO 2013版)
「Movable Typeの可能性を広げるアドオン「DynamicMTML」について」 v2 (MTDDC Meetup HOKKAIDO 2013版)
Kentaro Suzuki
Webページで学ぶJavaScript2013 第0回
Webページで学ぶJavaScript2013 第0回
京大 マイコンクラブ
20150622 Bluemix触ってみた、からのー
20150622 Bluemix触ってみた、からのー
Gyori Nagafuchi
ビジネス系大学の学生がMonacaを使ってスマホアプリ制作プロジェクトをやりきった
ビジネス系大学の学生がMonacaを使ってスマホアプリ制作プロジェクトをやりきった
Norio Toyama
【マインドセット3】
【マインドセット3】
Akkun Akkun
自動でバグを見つける!プログラム解析と動的バイナリ計装
自動でバグを見つける!プログラム解析と動的バイナリ計装
uchan_nos
非プログラマ指向学生向けのアプリ作成演習
非プログラマ指向学生向けのアプリ作成演習
Kimiya Fujisawa
第1回 公開スクーリング
第1回 公開スクーリング
r-takagi
はじめてのプログラミング教室(Scratch)
はじめてのプログラミング教室(Scratch)
Akinori Shibuya
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
Juri Minamiyama
プログラミング初心者向け情報サイト「プロスタ」
プログラミング初心者向け情報サイト「プロスタ」
Yosuke Homma
NGUIでスクロールビュー
NGUIでスクロールビュー
優之 田中
サーバ構築実践入門
サーバ構築実践入門
優之 田中
自分をチューニングするために今年やってみたこと
自分をチューニングするために今年やってみたこと
優之 田中
機械学習で名古屋っぽいを判定する
機械学習で名古屋っぽいを判定する
優之 田中
Unity2Dを使ったミニゲーム開発のすすめ
Unity2Dを使ったミニゲーム開発のすすめ
優之 田中
【名古屋】2014/2/8 Unity勉強会1
【名古屋】2014/2/8 Unity勉強会1
優之 田中
NGUIでimage button
NGUIでimage button
優之 田中
【名古屋】2014/2/8 Unity勉強会2
【名古屋】2014/2/8 Unity勉強会2
優之 田中
CloudFormationを活用したリソース管理と環境構築の自動化
CloudFormationを活用したリソース管理と環境構築の自動化
優之 田中
ネットワーク基礎勉強会2回目
ネットワーク基礎勉強会2回目
優之 田中
Linuxの基礎勉強会
Linuxの基礎勉強会
優之 田中
NGUIとUnity2Dをつかってみた
NGUIとUnity2Dをつかってみた
優之 田中
Linux基礎2回目
Linux基礎2回目
優之 田中
PHPで全文検索エンジンをつくるまで
PHPで全文検索エンジンをつくるまで
優之 田中
Unity2DとNewGUIについて
Unity2DとNewGUIについて
Keigo Ando
More Related Content
What's hot
【マインドセット3】
【マインドセット3】
Akkun Akkun
自動でバグを見つける!プログラム解析と動的バイナリ計装
自動でバグを見つける!プログラム解析と動的バイナリ計装
uchan_nos
非プログラマ指向学生向けのアプリ作成演習
非プログラマ指向学生向けのアプリ作成演習
Kimiya Fujisawa
第1回 公開スクーリング
第1回 公開スクーリング
r-takagi
はじめてのプログラミング教室(Scratch)
はじめてのプログラミング教室(Scratch)
Akinori Shibuya
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
Juri Minamiyama
プログラミング初心者向け情報サイト「プロスタ」
プログラミング初心者向け情報サイト「プロスタ」
Yosuke Homma
What's hot
(7)
【マインドセット3】
【マインドセット3】
自動でバグを見つける!プログラム解析と動的バイナリ計装
自動でバグを見つける!プログラム解析と動的バイナリ計装
非プログラマ指向学生向けのアプリ作成演習
非プログラマ指向学生向けのアプリ作成演習
第1回 公開スクーリング
第1回 公開スクーリング
はじめてのプログラミング教室(Scratch)
はじめてのプログラミング教室(Scratch)
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
プログラミング初心者向け情報サイト「プロスタ」
プログラミング初心者向け情報サイト「プロスタ」
Viewers also liked
NGUIでスクロールビュー
NGUIでスクロールビュー
優之 田中
サーバ構築実践入門
サーバ構築実践入門
優之 田中
自分をチューニングするために今年やってみたこと
自分をチューニングするために今年やってみたこと
優之 田中
機械学習で名古屋っぽいを判定する
機械学習で名古屋っぽいを判定する
優之 田中
Unity2Dを使ったミニゲーム開発のすすめ
Unity2Dを使ったミニゲーム開発のすすめ
優之 田中
【名古屋】2014/2/8 Unity勉強会1
【名古屋】2014/2/8 Unity勉強会1
優之 田中
NGUIでimage button
NGUIでimage button
優之 田中
【名古屋】2014/2/8 Unity勉強会2
【名古屋】2014/2/8 Unity勉強会2
優之 田中
CloudFormationを活用したリソース管理と環境構築の自動化
CloudFormationを活用したリソース管理と環境構築の自動化
優之 田中
ネットワーク基礎勉強会2回目
ネットワーク基礎勉強会2回目
優之 田中
Linuxの基礎勉強会
Linuxの基礎勉強会
優之 田中
NGUIとUnity2Dをつかってみた
NGUIとUnity2Dをつかってみた
優之 田中
Linux基礎2回目
Linux基礎2回目
優之 田中
PHPで全文検索エンジンをつくるまで
PHPで全文検索エンジンをつくるまで
優之 田中
Unity2DとNewGUIについて
Unity2DとNewGUIについて
Keigo Ando
NGUI基礎
NGUI基礎
優之 田中
Unityの向こう側へ
Unityの向こう側へ
Nobuhiko Sasaki
Unityで Photonを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【応用編】
Unityで Photonを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【応用編】
GMO GlobalSign Holdings K.K.
ナレッジを共有する文化をつくるために
ナレッジを共有する文化をつくるために
Recruit Lifestyle Co., Ltd.
CloudWatchの使い方
CloudWatchの使い方
ShinsukeYokota
Viewers also liked
(20)
NGUIでスクロールビュー
NGUIでスクロールビュー
サーバ構築実践入門
サーバ構築実践入門
自分をチューニングするために今年やってみたこと
自分をチューニングするために今年やってみたこと
機械学習で名古屋っぽいを判定する
機械学習で名古屋っぽいを判定する
Unity2Dを使ったミニゲーム開発のすすめ
Unity2Dを使ったミニゲーム開発のすすめ
【名古屋】2014/2/8 Unity勉強会1
【名古屋】2014/2/8 Unity勉強会1
NGUIでimage button
NGUIでimage button
【名古屋】2014/2/8 Unity勉強会2
【名古屋】2014/2/8 Unity勉強会2
CloudFormationを活用したリソース管理と環境構築の自動化
CloudFormationを活用したリソース管理と環境構築の自動化
ネットワーク基礎勉強会2回目
ネットワーク基礎勉強会2回目
Linuxの基礎勉強会
Linuxの基礎勉強会
NGUIとUnity2Dをつかってみた
NGUIとUnity2Dをつかってみた
Linux基礎2回目
Linux基礎2回目
PHPで全文検索エンジンをつくるまで
PHPで全文検索エンジンをつくるまで
Unity2DとNewGUIについて
Unity2DとNewGUIについて
NGUI基礎
NGUI基礎
Unityの向こう側へ
Unityの向こう側へ
Unityで Photonを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【応用編】
Unityで Photonを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【応用編】
ナレッジを共有する文化をつくるために
ナレッジを共有する文化をつくるために
CloudWatchの使い方
CloudWatchの使い方
Similar to 【読書会】プロになるためなるためのWeb技術入門
.Netのwebプログラマーに贈るサーバーインフラの比較的かんたんなお話
.Netのwebプログラマーに贈るサーバーインフラの比較的かんたんなお話
Sho Okada
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日
Mitsuru Ogawa
Ict challenge+r2011 final
Ict challenge+r2011 final
Shoot Morii
TENTOプレゼン 2012年5月
TENTOプレゼン 2012年5月
Shinichi Kusano
お互いに教えあおう
お互いに教えあおう
Suzuki Masayuki
TENTO 2012/01 筑波大学プレゼン資料
TENTO 2012/01 筑波大学プレゼン資料
Shinichi Kusano
プログラミング初心者の壁の越え方
プログラミング初心者の壁の越え方
Yuichi Kato
AlphabetBootCamp 第1回勉強スライド
AlphabetBootCamp 第1回勉強スライド
Sawada Makoto
How to collect frontend technology
How to collect frontend technology
RikiyaOzawa
企業向けUXデザイン導入のポイント
企業向けUXデザイン導入のポイント
Roy Kim
「Agileごっこ」で終わらせないために(仮)
「Agileごっこ」で終わらせないために(仮)
Taku Yajima
解り方と教え方
解り方と教え方
健人 井関
レポートの書き方,クリティカルシンキング
レポートの書き方,クリティカルシンキング
kunihikokaneko1
人工知能技術の現状-今後の見通し-社会へのインパクト-岡夏樹
人工知能技術の現状-今後の見通し-社会へのインパクト-岡夏樹
KIT Cognitive Interaction Design
教育というお仕事
教育というお仕事
Yuumi Yoshida
co-meeting_meetup_vol1_利用事例紹介(newデイシス)
co-meeting_meetup_vol1_利用事例紹介(newデイシス)
Satoshi Furuichi
2012ー1 TENTOプレゼン資料
2012ー1 TENTOプレゼン資料
TENTO_slide
武山ゼミ 第2回入ゼミ説明会スライド
武山ゼミ 第2回入ゼミ説明会スライド
SoichiroNishio
今さら聞けないITエンジニアのための7つの習慣
今さら聞けないITエンジニアのための7つの習慣
Keisuke Tameyasu
20201128 Power Automate
20201128 Power Automate
ひかり 影中
Similar to 【読書会】プロになるためなるためのWeb技術入門
(20)
.Netのwebプログラマーに贈るサーバーインフラの比較的かんたんなお話
.Netのwebプログラマーに贈るサーバーインフラの比較的かんたんなお話
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日
Ict challenge+r2011 final
Ict challenge+r2011 final
TENTOプレゼン 2012年5月
TENTOプレゼン 2012年5月
お互いに教えあおう
お互いに教えあおう
TENTO 2012/01 筑波大学プレゼン資料
TENTO 2012/01 筑波大学プレゼン資料
プログラミング初心者の壁の越え方
プログラミング初心者の壁の越え方
AlphabetBootCamp 第1回勉強スライド
AlphabetBootCamp 第1回勉強スライド
How to collect frontend technology
How to collect frontend technology
企業向けUXデザイン導入のポイント
企業向けUXデザイン導入のポイント
「Agileごっこ」で終わらせないために(仮)
「Agileごっこ」で終わらせないために(仮)
解り方と教え方
解り方と教え方
レポートの書き方,クリティカルシンキング
レポートの書き方,クリティカルシンキング
人工知能技術の現状-今後の見通し-社会へのインパクト-岡夏樹
人工知能技術の現状-今後の見通し-社会へのインパクト-岡夏樹
教育というお仕事
教育というお仕事
co-meeting_meetup_vol1_利用事例紹介(newデイシス)
co-meeting_meetup_vol1_利用事例紹介(newデイシス)
2012ー1 TENTOプレゼン資料
2012ー1 TENTOプレゼン資料
武山ゼミ 第2回入ゼミ説明会スライド
武山ゼミ 第2回入ゼミ説明会スライド
今さら聞けないITエンジニアのための7つの習慣
今さら聞けないITエンジニアのための7つの習慣
20201128 Power Automate
20201128 Power Automate
【読書会】プロになるためなるためのWeb技術入門
1.
【読書会】プロになるためのWeb技術入門 田中優之 13年6月30日日曜日
2.
アジェンダ • はじめに(Lesson 0) •
Webアプリケーションとは? (Lesson 1) • Webはどのように発展した? (Lesson 2と Lesson6あたりのフレームワークのお話) 13年6月30日日曜日
3.
はじめに こんな悩みがありませんか??? ★ 障害が発生してもどう対応していいかわか らない。 ★ 自分に足りない技術がわからない、または 何を学んだらよいかわからない。 ★
新しい技術が身に付かない、または身につ けるのに苦労する 13年6月30日日曜日
4.
はじめに その原因はたぶん、 Webアプリケーションが動く仕組みを理 解していないことにあるのでは?? ※Webエンジニアに必要とされる知識はかなり幅広い(サーバ サイドだけでなくフロントエンジニアとしての知識も時には 必要とされたりね)。ほかにもいろいろあると思うけど、今回 は”Webアプリケーションとは”、から始めましょう。 13年6月30日日曜日
5.
Webアプリケーションとは • 例えばWebアプリケーションて何があ るでしょうか?(普段使ってるもので いいですよ。) 13年6月30日日曜日
6.
Webアプリケーションとは • んじゃデスクトップアプリケーション て何があるでしょうか?(普段使って るものでいいですよ。) 13年6月30日日曜日
7.
Webアプリケーションとは • Webアプリケーションの例 ★ Amazon、facebook、とかなんでもあ るよね。 13年6月30日日曜日
8.
Webアプリケーションとは • デスクトップアプリケーションの例 ★ エクセル、パワポ、なんでもあるよ ね。(phpstormもそうだよね) 13年6月30日日曜日
9.
Webアプリケーションとは んじゃ、それってどこで動いてるんだろ う??? ★ Webアプリケーションはどこで? ★ デスクトップアプリケーションはどこ で? ※ヒント:インストールってした??? 13年6月30日日曜日
10.
Webアプリケーションとは • Webアプリケーション ★ ローカルではなく、サーバ上で動いてい る。 ★
表示はHTMLでされ、Webブラウザを使用 してみる ★ ローカルへインストール不要 13年6月30日日曜日
11.
Webアプリケーションとは • デスクトップアプリケーション ★ ローカルで動く。 ★
ローカルへインストール必要。 13年6月30日日曜日
12.
Webはどう発展した? • wwwの誕生 ★ CERNという研究所で情報共有をうまいこ とやりたい∼、と思った研究者が開発をは じめる ★
でも当時は電子メールとファイル転送しか なく、それじゃちょっと不便だった。 13年6月30日日曜日
13.
Webはどう発展した? • wwwの誕生 ★ そこで開発されたのがHTML!!!! ★
当時、HTMLで画期的だったのは、ハイパ ーテキスト!!(今では当たり前につかってる よね。ハイパーリンクで別の文書にとんで くやつね。) 13年6月30日日曜日
14.
Webはどう発展した? 参考:Webとハイパーテキスト http://arena.hyogo-dai.ac.jp/~kawano/?Lecture %2FJouhouC2009%2F2nd%2FHypertext 13年6月30日日曜日
15.
Webはどう発展した? • Webを支える技術(ほかにもあるけど基本だけ) ★ クライアント・サーバモデル ★
HTTP ★ URL ※それぞれどういった技術か自分のことばでお 話できるようになるといいですね! 13年6月30日日曜日
16.
Webを支える技術 (クライアント・サーバモデル) 参考サイト: http://www.jdynasys.co.jp/carnacs5/q8.html 13年6月30日日曜日
17.
Webを支える技術 (クライアント・サーバモデル) 参考サイト:THE・Winnyパニック http://www.nikkeibp.co.jp/sj/2/special/133/ index1.html 13年6月30日日曜日
18.
Webを支える技術 (クライアント・サーバモデル) • クライアント・サーバモデルのまとめ ★ いまの主流はクライアント・サーバモデル ★
クライアントは要求する側。 ★ サーバは常に要求に答える側。(クライアント・サー バモデルの場合はね!) ★ クライアントとサーバの間をインターネットでつな ぐことでWWWは実現されている 13年6月30日日曜日
19.
Webを支える技術(HTTP) 参考サイト:HTTP Status Code
http://www.studyinghttp.net/status_code 13年6月30日日曜日
20.
Webを支える技術(HTTP) 参考サイト:HTTP(S)サイトをTelnetでページ表示。SSLでも大丈夫 http:// takuya-1st.hatenablog.jp/entry/20120728/1345195451 telnetでhttpを体験しよう! ※実演してみます∼ $ telnet
www.yahoo.co.jp 80 Trying 203.216.231.189... Connected to www.g.yahoo.co.jp. Escape character is '^]'. GET / HTTP/1.0 HTTP/1.1 200 OK 13年6月30日日曜日
21.
Webを支える技術(HTTP) 参考サイト:HTTP Status Code
http://www.studyinghttp.net/status_code 13年6月30日日曜日
22.
Webを支える技術(HTTP) • HTTPのまとめ ★ コンピュータ同士が通信をするルールをプロトコル という ★
HTTPは数あるプロトコルの中でもシンプル。だから こそ普及した。 13年6月30日日曜日
23.
Webを支える技術(URL) 参考サイト:http://www.atmarkit.co.jp/ait/articles/0103/02/news003.html 13年6月30日日曜日
24.
Webを支える技術(URL) • URLのまとめ ★ URL(Uniform
Resource Locator) ★ インターネット上で一意な場所を示す ★ URLとURIについて(参考:http://web- tan.forum.impressrd.jp/e/2010/03/09/7539) 13年6月30日日曜日
25.
CGIの誕生 というわけでWebは発展してきたんだけど、、 ★ 全部のページを更新してたらめんどう。 ★ 時刻にあわせて「こんにちは」、「こんばんは」と かしたい。 ★
商品の在庫状況とかだしたい。 といろいろやりたいことがでてくる、、 そこでCGIの登場!! 13年6月30日日曜日
26.
CGIの誕生 参考:http://www.hitachi.co.jp/Prod/comp/soft1/manual/pc/d3M0461/ EM040148.HTM 13年6月30日日曜日
27.
CGIの誕生 • 静的コンテンツ あらかじめ用意されたHTMLを返す • 動的コンテンツ Webサーバ上で動作するプログラムがHTMLを 生成して返す 13年6月30日日曜日
28.
CGIの誕生 CGIのまとめ • 動的コンテンツを生成 • ブラウザからの入力を受け取ってページを生成 •
CGIの代表といえばPerl。CGI = Perlではない よ。 13年6月30日日曜日
29.
でもまだまだ問題が、 いろいろ便利になってはきたんだけど、 • Webアプリケーションの大規模化 • 工数の短縮化 などなど大変だった。 そこでフレームワークの登場! 13年6月30日日曜日
30.
Webアプリケーションフレームワークとは フレームワークはWebアプリケーションの骨組み! 参考:http://thinkit.co.jp/free/tech/9/1/ 13年6月30日日曜日
31.
フレームワークを導入するメリット • 開発工数の短縮化 • 品質の均一化 •
メンテナンス性の向上 Webアプリケーション開発におけるいくつかの 課題の解決手段を提供してくれる 13年6月30日日曜日
32.
フレームワークを導入するメリット • 開発工数の短縮化 フレームワークはWebアプリケーションを開発 するときに必要となる共通の機能を提供してく れてる。そうすると、開発者はメインの部分に 集中して実装できて楽チン! 13年6月30日日曜日
33.
フレームワークを導入するメリット Webアプリケーションが提供する機能例 • セッション管理機能 • テンプレート管理機能 •
DB管理機能 • バリーデーション 13年6月30日日曜日
34.
フレームワークを導入するメリット • 品質の均一化 ★ フレームワークが提供する各種機能の使用 (バグがでにくくなることにもつながる ね) ★
コーディングルール(フレームワークにより いろいろあるけどねー) 13年6月30日日曜日
35.
フレームワークを導入するメリット • メンテナンス性の向上 ★ コーディングルールがあるからね。 ★
そのフレームワークを使ったことのある人 にとっては読みやすいコードになる 13年6月30日日曜日
Download now