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

Contenu connexe

Tendances

Tendances (7)

【マインドセット3】
【マインドセット3】【マインドセット3】
【マインドセット3】
 
自動でバグを見つける!プログラム解析と動的バイナリ計装
自動でバグを見つける!プログラム解析と動的バイナリ計装自動でバグを見つける!プログラム解析と動的バイナリ計装
自動でバグを見つける!プログラム解析と動的バイナリ計装
 
非プログラマ指向学生向けのアプリ作成演習
非プログラマ指向学生向けのアプリ作成演習非プログラマ指向学生向けのアプリ作成演習
非プログラマ指向学生向けのアプリ作成演習
 
第1回 公開スクーリング
第1回 公開スクーリング第1回 公開スクーリング
第1回 公開スクーリング
 
はじめてのプログラミング教室(Scratch)
はじめてのプログラミング教室(Scratch)はじめてのプログラミング教室(Scratch)
はじめてのプログラミング教室(Scratch)
 
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
[Java女子部LT]VB屋さんからJava屋さんにスキルチェンジした話
 
プログラミング初心者向け情報サイト「プロスタ」
プログラミング初心者向け情報サイト「プロスタ」プログラミング初心者向け情報サイト「プロスタ」
プログラミング初心者向け情報サイト「プロスタ」
 

En vedette

Unity2DとNewGUIについて
Unity2DとNewGUIについてUnity2DとNewGUIについて
Unity2DとNewGUIについて
Keigo Ando
 
Unityで Photonを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【応用編】
Unityで Photonを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【応用編】Unityで Photonを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【応用編】
Unityで Photonを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【応用編】
GMO GlobalSign Holdings K.K.
 
CloudWatchの使い方
CloudWatchの使い方CloudWatchの使い方
CloudWatchの使い方
ShinsukeYokota
 

En vedette (20)

NGUIでスクロールビュー
NGUIでスクロールビューNGUIでスクロールビュー
NGUIでスクロールビュー
 
サーバ構築実践入門
サーバ構築実践入門サーバ構築実践入門
サーバ構築実践入門
 
自分をチューニングするために今年やってみたこと
自分をチューニングするために今年やってみたこと自分をチューニングするために今年やってみたこと
自分をチューニングするために今年やってみたこと
 
機械学習で名古屋っぽいを判定する
機械学習で名古屋っぽいを判定する機械学習で名古屋っぽいを判定する
機械学習で名古屋っぽいを判定する
 
Unity2Dを使ったミニゲーム開発のすすめ
Unity2Dを使ったミニゲーム開発のすすめUnity2Dを使ったミニゲーム開発のすすめ
Unity2Dを使ったミニゲーム開発のすすめ
 
【名古屋】2014/2/8 Unity勉強会1
【名古屋】2014/2/8 Unity勉強会1【名古屋】2014/2/8 Unity勉強会1
【名古屋】2014/2/8 Unity勉強会1
 
NGUIでimage button
NGUIでimage buttonNGUIでimage button
NGUIでimage button
 
【名古屋】2014/2/8 Unity勉強会2
【名古屋】2014/2/8 Unity勉強会2【名古屋】2014/2/8 Unity勉強会2
【名古屋】2014/2/8 Unity勉強会2
 
CloudFormationを活用したリソース管理と環境構築の自動化
CloudFormationを活用したリソース管理と環境構築の自動化CloudFormationを活用したリソース管理と環境構築の自動化
CloudFormationを活用したリソース管理と環境構築の自動化
 
ネットワーク基礎勉強会2回目
ネットワーク基礎勉強会2回目ネットワーク基礎勉強会2回目
ネットワーク基礎勉強会2回目
 
Linuxの基礎勉強会
Linuxの基礎勉強会Linuxの基礎勉強会
Linuxの基礎勉強会
 
NGUIとUnity2Dをつかってみた
NGUIとUnity2DをつかってみたNGUIとUnity2Dをつかってみた
NGUIとUnity2Dをつかってみた
 
Linux基礎2回目
Linux基礎2回目Linux基礎2回目
Linux基礎2回目
 
PHPで全文検索エンジンをつくるまで
PHPで全文検索エンジンをつくるまでPHPで全文検索エンジンをつくるまで
PHPで全文検索エンジンをつくるまで
 
Unity2DとNewGUIについて
Unity2DとNewGUIについてUnity2DとNewGUIについて
Unity2DとNewGUIについて
 
NGUI基礎
NGUI基礎NGUI基礎
NGUI基礎
 
Unityの向こう側へ
Unityの向こう側へUnityの向こう側へ
Unityの向こう側へ
 
Unityで Photonを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【応用編】
Unityで Photonを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【応用編】Unityで Photonを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【応用編】
Unityで Photonを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【応用編】
 
ナレッジを共有する文化をつくるために
ナレッジを共有する文化をつくるためにナレッジを共有する文化をつくるために
ナレッジを共有する文化をつくるために
 
CloudWatchの使い方
CloudWatchの使い方CloudWatchの使い方
CloudWatchの使い方
 

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

TENTOプレゼン 2012年5月
TENTOプレゼン 2012年5月TENTOプレゼン 2012年5月
TENTOプレゼン 2012年5月
Shinichi Kusano
 
co-meeting_meetup_vol1_利用事例紹介(newデイシス)
co-meeting_meetup_vol1_利用事例紹介(newデイシス)co-meeting_meetup_vol1_利用事例紹介(newデイシス)
co-meeting_meetup_vol1_利用事例紹介(newデイシス)
Satoshi Furuichi
 

Similaire à 【読書会】プロになるためなるためのWeb技術入門 (20)

.Netのwebプログラマーに贈るサーバーインフラの比較的かんたんなお話
.Netのwebプログラマーに贈るサーバーインフラの比較的かんたんなお話.Netのwebプログラマーに贈るサーバーインフラの比較的かんたんなお話
.Netのwebプログラマーに贈るサーバーインフラの比較的かんたんなお話
 
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日
 
Ict challenge+r2011 final
Ict challenge+r2011 finalIct challenge+r2011 final
Ict challenge+r2011 final
 
TENTOプレゼン 2012年5月
TENTOプレゼン 2012年5月TENTOプレゼン 2012年5月
TENTOプレゼン 2012年5月
 
お互いに教えあおう
お互いに教えあおうお互いに教えあおう
お互いに教えあおう
 
TENTO 2012/01 筑波大学プレゼン資料
TENTO 2012/01 筑波大学プレゼン資料TENTO 2012/01 筑波大学プレゼン資料
TENTO 2012/01 筑波大学プレゼン資料
 
プログラミング初心者の壁の越え方
プログラミング初心者の壁の越え方プログラミング初心者の壁の越え方
プログラミング初心者の壁の越え方
 
AlphabetBootCamp 第1回勉強スライド
AlphabetBootCamp 第1回勉強スライドAlphabetBootCamp 第1回勉強スライド
AlphabetBootCamp 第1回勉強スライド
 
How to collect frontend technology
How to collect frontend technologyHow to collect frontend technology
How to collect frontend technology
 
企業向けUXデザイン導入のポイント
企業向けUXデザイン導入のポイント企業向けUXデザイン導入のポイント
企業向けUXデザイン導入のポイント
 
「Agileごっこ」で終わらせないために(仮)
「Agileごっこ」で終わらせないために(仮) 「Agileごっこ」で終わらせないために(仮)
「Agileごっこ」で終わらせないために(仮)
 
解り方と教え方
解り方と教え方解り方と教え方
解り方と教え方
 
レポートの書き方,クリティカルシンキング
レポートの書き方,クリティカルシンキングレポートの書き方,クリティカルシンキング
レポートの書き方,クリティカルシンキング
 
人工知能技術の現状-今後の見通し-社会へのインパクト-岡夏樹
人工知能技術の現状-今後の見通し-社会へのインパクト-岡夏樹人工知能技術の現状-今後の見通し-社会へのインパクト-岡夏樹
人工知能技術の現状-今後の見通し-社会へのインパクト-岡夏樹
 
教育というお仕事
教育というお仕事教育というお仕事
教育というお仕事
 
co-meeting_meetup_vol1_利用事例紹介(newデイシス)
co-meeting_meetup_vol1_利用事例紹介(newデイシス)co-meeting_meetup_vol1_利用事例紹介(newデイシス)
co-meeting_meetup_vol1_利用事例紹介(newデイシス)
 
2012ー1 TENTOプレゼン資料
2012ー1 TENTOプレゼン資料2012ー1 TENTOプレゼン資料
2012ー1 TENTOプレゼン資料
 
武山ゼミ 第2回入ゼミ説明会スライド
武山ゼミ 第2回入ゼミ説明会スライド武山ゼミ 第2回入ゼミ説明会スライド
武山ゼミ 第2回入ゼミ説明会スライド
 
今さら聞けないITエンジニアのための7つの習慣
今さら聞けないITエンジニアのための7つの習慣今さら聞けないITエンジニアのための7つの習慣
今さら聞けないITエンジニアのための7つの習慣
 
20201128 Power Automate
20201128 Power Automate20201128 Power Automate
20201128 Power Automate
 

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