web開発入門知識

はじめに

身内向けに勢いで作った資料ですが、他の誰かの役にたてばと思いオープンにしておきます。
Wikipediaに載っているようなことは書かないようにしてます。気になる単語はググって調べてみてください。
言い回しや説明が正確でない可能性が高いので、変だなと思ったら教えてもらえると嬉しいです。

httpってなに？

Hypertext Transfer Protocol
名前の通りHTMLコンテンツを送受信するプロトコルの１つ。
といいつつ汎用性があって、画像とかバイナリとかいろいろ送れる。
このプロトコルはリクエスト・レスポンス型のプロトコルで、
クライアントがリクエストを投げて、サーバがレスポンスを返す。

HTTPプロトコル

httpリクエスト

リクエストはメソッド、URI、HTTPバージョンでできている。
メソッドは「何がしたい」URIは「何を」という感じ。

webブラウザで使われているのメソッドはGETとPOST。
ほかにもメソッドがあるが、あまり使われていない。
HTTPを使用するRESTというアーキテクチャではPUTやDELETEも使う。

GET

リソースの取得。
リクエストのURIにパラメータを付加することができる。(URIの文字長上限に注意)
この際にパラメータはURIにそのままつくので簡単に見ることができる。
また、URIは使用できる文字に制限があるためURLエンコーディング(パーセントエンコーディング)を行う必要がある。

POST

クライアントからデータの送信。
httpリクエストのボディ部にパラメータを詰めて送信する。
なので、GETとは違い文字列の上限などはない。
また、バイナリデータも送ることができる。

httpレスポンス

レスポンスは、ステータス、ヘッダ、本体の構成となっている。
ステータスの部分はHTTPバージョン、ステータスコード、メッセージとなっている。

ステータスコード

たまにpagenotfoundとかの文言と一緒に表示される400とかの数字がこれ。
100の位で大まかな意味がわかれている。

• 200番台　正常
• 300番台　転送
• 400番台　リクエストのエラー
• 500番台　サーバのエラー

実際に見てみる。

F12キーで開発者メニューを開く。
Networkタブを開いた状態で画面上部の検索機能を使用すると
GETリクエストが一番最初にロギングされているので、クリックすることで内容を確認できる。

手作りHTMLで試すなら以下参照
http://www.kanzaki.com/docs/html/htminfo32.html

セキュアなhttp通信

上のままだと平文なのでデータが丸見え。
データを暗号化する技術がhttps。これはSSL/TLSでセキュリティを確保した上で行うhttp通信。
SSL/TLSは共通鍵暗号方式＋公開鍵暗号方式による暗号化と電子証明書によるなりすまし対策を行っている。

鍵を使って通信の暗号化と復号化を行い、鍵の正当性を第三者であるCAが発行する証明書によってサーバーが正しい相手かを見ている。（はず

連続した通信の継続

cookie

基本的にhttpでは誰がリクエストを送ってきたかを意識しない。
サーバがクライアントにデータを持たせる方法としてクッキーがある。
これはブラウザがサーバにアクセスする際に毎回クッキーも一緒に送信する。
これでサーバはクライアントの状態を判断することができる。
また、クッキーには有効期限を設定することができる。

セッション

セッションを使うことでログイン状態などの情報を維持することができる。
方法としては、サーバが今回の通信のセッションIDを発行し、クッキーに設定する。
クライアントが送ってくるクッキーの中のセッションIDをサーバサーバが判断することで連続した処理を継続することができる。

HTMLとWEBブラウザ

httpリクエストを使って所得したhtmlファイルはブラウザに表示される。
表示されているのhtmlはjsを使用することで操作できる。

DOM（Document Object Model）

DOMはアプリケーションから利用するためのAPI。
ブラウザではJSでのDOM操作することができる。

javascript実践

とりあえずjsを試してみる。
管理者メニューでConsoleタブを開く。そうすると最終行に入力ができる。
以下この画面でお試し。

お試し

　とりあえずポップアップ

alert(1);

test001

　画面の内容に値を代入

document.getElementById("test001").innerHTML="aaa"

　画面の内容の一部を取り出してみる

alert(document.getElementById("test001").innerHTML);

jQuery

jQueryは便利なjsのフレームワーク。
かなり自由が効くので使いやすいが、自由な分だけ非常に読みにくいソースができやすいので注意が必要。
また、ajaxでの非同期通信が簡単に実装できる。

お試し

test002

　画面の内容に値を代入

$("#test002").text("aaa");

　画面の内容の一部を取り出してみる

alert($("#test002").text());

ajax

function ajaxTest() {
  $.ajax({
    type: 'GET',
    url: 'http://localhost/test',
    dataType: json,
    success: function(response) {
        alert("通信成功");
        $('#hoge').text(response);
    },
    error: function() {
        alert("エラー");
    },
    complete: function() {
        alert("コンプリート");
    }
  });
}

successなどのコールバックの部分に後続の処理を書くことができます。
コールバックの中でも、またajaxの処理も書くことができます。が、ネストが深くなり可読性が落ちやすいです。
これはpromisesというものを使うことで解決できます。
http://sota1235.hatenablog.com/entry/2016/04/12/103246
他の部分でも使うものだと思うので、jsをやるならはpromisesは押さえていたほうが良さそうです。

以下は勉強会でオススメされていたpromisesの資料です。
http://azu.github.io/promises-book/