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日日曜日