Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

【読書会】プロになるためなるためのWeb技術入門

3,426 views

Published on

「プロになるためなるためのWeb技術入門」の2回目読書会。CGIについてとフレームワークの話を追記。

  • Follow the link, new dating source: ❤❤❤ http://bit.ly/2Q98JRS ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❤❤❤ http://bit.ly/2Q98JRS ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

【読書会】プロになるためなるためのWeb技術入門

  1. 1. 【読書会】プロになるためのWeb技術入門 田中優之 13年6月30日日曜日
  2. 2. アジェンダ • はじめに(Lesson 0) • Webアプリケーションとは? (Lesson 1) • Webはどのように発展した? (Lesson 2と Lesson6あたりのフレームワークのお話) 13年6月30日日曜日
  3. 3. はじめに こんな悩みがありませんか??? ★ 障害が発生してもどう対応していいかわか らない。 ★ 自分に足りない技術がわからない、または 何を学んだらよいかわからない。 ★ 新しい技術が身に付かない、または身につ けるのに苦労する 13年6月30日日曜日
  4. 4. はじめに その原因はたぶん、 Webアプリケーションが動く仕組みを理 解していないことにあるのでは?? ※Webエンジニアに必要とされる知識はかなり幅広い(サーバ サイドだけでなくフロントエンジニアとしての知識も時には 必要とされたりね)。ほかにもいろいろあると思うけど、今回 は”Webアプリケーションとは”、から始めましょう。 13年6月30日日曜日
  5. 5. Webアプリケーションとは • 例えばWebアプリケーションて何があ るでしょうか?(普段使ってるもので いいですよ。) 13年6月30日日曜日
  6. 6. Webアプリケーションとは • んじゃデスクトップアプリケーション て何があるでしょうか?(普段使って るものでいいですよ。) 13年6月30日日曜日
  7. 7. Webアプリケーションとは • Webアプリケーションの例 ★ Amazon、facebook、とかなんでもあ るよね。 13年6月30日日曜日
  8. 8. Webアプリケーションとは • デスクトップアプリケーションの例 ★ エクセル、パワポ、なんでもあるよ ね。(phpstormもそうだよね) 13年6月30日日曜日
  9. 9. Webアプリケーションとは んじゃ、それってどこで動いてるんだろ う??? ★ Webアプリケーションはどこで? ★ デスクトップアプリケーションはどこ で? ※ヒント:インストールってした??? 13年6月30日日曜日
  10. 10. Webアプリケーションとは • Webアプリケーション ★ ローカルではなく、サーバ上で動いてい る。 ★ 表示はHTMLでされ、Webブラウザを使用 してみる ★ ローカルへインストール不要 13年6月30日日曜日
  11. 11. Webアプリケーションとは • デスクトップアプリケーション ★ ローカルで動く。 ★ ローカルへインストール必要。 13年6月30日日曜日
  12. 12. Webはどう発展した? • wwwの誕生 ★ CERNという研究所で情報共有をうまいこ とやりたい∼、と思った研究者が開発をは じめる ★ でも当時は電子メールとファイル転送しか なく、それじゃちょっと不便だった。 13年6月30日日曜日
  13. 13. Webはどう発展した? • wwwの誕生 ★ そこで開発されたのがHTML!!!! ★ 当時、HTMLで画期的だったのは、ハイパ ーテキスト!!(今では当たり前につかってる よね。ハイパーリンクで別の文書にとんで くやつね。) 13年6月30日日曜日
  14. 14. Webはどう発展した? 参考:Webとハイパーテキスト http://arena.hyogo-dai.ac.jp/~kawano/?Lecture %2FJouhouC2009%2F2nd%2FHypertext 13年6月30日日曜日
  15. 15. Webはどう発展した? • Webを支える技術(ほかにもあるけど基本だけ) ★ クライアント・サーバモデル ★ HTTP ★ URL ※それぞれどういった技術か自分のことばでお 話できるようになるといいですね! 13年6月30日日曜日
  16. 16. Webを支える技術 (クライアント・サーバモデル) 参考サイト: http://www.jdynasys.co.jp/carnacs5/q8.html 13年6月30日日曜日
  17. 17. Webを支える技術 (クライアント・サーバモデル) 参考サイト:THE・Winnyパニック http://www.nikkeibp.co.jp/sj/2/special/133/ index1.html 13年6月30日日曜日
  18. 18. Webを支える技術 (クライアント・サーバモデル) • クライアント・サーバモデルのまとめ ★ いまの主流はクライアント・サーバモデル ★ クライアントは要求する側。 ★ サーバは常に要求に答える側。(クライアント・サー バモデルの場合はね!) ★ クライアントとサーバの間をインターネットでつな ぐことでWWWは実現されている 13年6月30日日曜日
  19. 19. Webを支える技術(HTTP) 参考サイト:HTTP Status Code http://www.studyinghttp.net/status_code 13年6月30日日曜日
  20. 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. 21. Webを支える技術(HTTP) 参考サイト:HTTP Status Code http://www.studyinghttp.net/status_code 13年6月30日日曜日
  22. 22. Webを支える技術(HTTP) • HTTPのまとめ ★ コンピュータ同士が通信をするルールをプロトコル という ★ HTTPは数あるプロトコルの中でもシンプル。だから こそ普及した。 13年6月30日日曜日
  23. 23. Webを支える技術(URL) 参考サイト:http://www.atmarkit.co.jp/ait/articles/0103/02/news003.html 13年6月30日日曜日
  24. 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. 25. CGIの誕生 というわけでWebは発展してきたんだけど、、 ★ 全部のページを更新してたらめんどう。 ★ 時刻にあわせて「こんにちは」、「こんばんは」と かしたい。 ★ 商品の在庫状況とかだしたい。 といろいろやりたいことがでてくる、、 そこでCGIの登場!! 13年6月30日日曜日
  26. 26. CGIの誕生 参考:http://www.hitachi.co.jp/Prod/comp/soft1/manual/pc/d3M0461/ EM040148.HTM 13年6月30日日曜日
  27. 27. CGIの誕生 • 静的コンテンツ あらかじめ用意されたHTMLを返す • 動的コンテンツ Webサーバ上で動作するプログラムがHTMLを 生成して返す 13年6月30日日曜日
  28. 28. CGIの誕生 CGIのまとめ • 動的コンテンツを生成 • ブラウザからの入力を受け取ってページを生成 • CGIの代表といえばPerl。CGI = Perlではない よ。 13年6月30日日曜日
  29. 29. でもまだまだ問題が、 いろいろ便利になってはきたんだけど、 • Webアプリケーションの大規模化 • 工数の短縮化 などなど大変だった。 そこでフレームワークの登場! 13年6月30日日曜日
  30. 30. Webアプリケーションフレームワークとは フレームワークはWebアプリケーションの骨組み! 参考:http://thinkit.co.jp/free/tech/9/1/ 13年6月30日日曜日
  31. 31. フレームワークを導入するメリット • 開発工数の短縮化 • 品質の均一化 • メンテナンス性の向上 Webアプリケーション開発におけるいくつかの 課題の解決手段を提供してくれる 13年6月30日日曜日
  32. 32. フレームワークを導入するメリット • 開発工数の短縮化 フレームワークはWebアプリケーションを開発 するときに必要となる共通の機能を提供してく れてる。そうすると、開発者はメインの部分に 集中して実装できて楽チン! 13年6月30日日曜日
  33. 33. フレームワークを導入するメリット Webアプリケーションが提供する機能例 • セッション管理機能 • テンプレート管理機能 • DB管理機能 • バリーデーション 13年6月30日日曜日
  34. 34. フレームワークを導入するメリット • 品質の均一化 ★ フレームワークが提供する各種機能の使用 (バグがでにくくなることにもつながる ね) ★ コーディングルール(フレームワークにより いろいろあるけどねー) 13年6月30日日曜日
  35. 35. フレームワークを導入するメリット • メンテナンス性の向上 ★ コーディングルールがあるからね。 ★ そのフレームワークを使ったことのある人 にとっては読みやすいコードになる 13年6月30日日曜日

×