tomigungun's blog

IT関連の勉強したこと、気になったニュース、日常の出来事などなど

Webに関する全般的な知識　〜Webアプリケーションを開発する上で必要なこと〜

IT

どうもこんばんは。
tomigungunです。

〜本日の業務にて〜

CTO：今○○のアプリってどうやって作ってる？

僕：え、JSP/サーブレットでゴリゴリ作ってます。

CTO：それはアカンな

てな会話が繰り広げられたわけですよ。

そこでCTOが別の部署からあるデキる方を連れてきてくださって、レクチャーしていただけることになりました笑

そこでレクチャーしていただいた内容を忘備録として、書いていきたいと思います。

Webアプリケーション開発における前提知識

プロジェクト規模が大きくなるとjQueryは使わないほうが良い？

jQueryとは

  • Selectorが使える
  • Manipulationが便利

怖い部分

  • DOMがたくさんできてしまう
  • 後からの修正が大変
  • 単体テストできない

MVCモデルの歴史

JSFの登場でMVCモデルが変わった

JSFとは

  • Controllerいらないよね？
  • じゃあコントローラーとView一緒にしちゃえ！
  • MVになる（Controllerがいらなくなる）

しかしはやらず・・・
原因はセッションに色んな情報を詰めており、サーバーでの処理が遅くなるから。

しかしModelの部分は不変！！

サーバーサイドはRESTでしょ。データプロバイダとしての機能のみになる。

クライアント時代

JSでサーバーからデータ取ってきたり、jQuery使いまくってたらViewが大きくなってきた・・・

JSとModelを切り離す、フレームワークを利用

  • AngularJS、BackBoneなどなど

HTTPの仕様を知る

HTTPとは・・・『Hyper Text Transfer Protocol』

Base64を使いbyteを64文字列で送る

バイナリも送れますよ〜
だってテキストにしてるもん。

Protocolの話

  • URIとは・・・『UniformedResourceIdentifier』

  • IDの付け方が重要！

  • 直感的にわかるIDを付ける必要がある

  • RPC（Remote Procedure Call）が一時期流行った（いわゆるSOAP）

  • SOAPはPOSTで送るという仕様になっている

  • 更新をかけるのは基本的にPOST

  • SPDY　Googleが作りこんだHTTP2.0の仕様（ドラフト）

Responseの話

  • StatusCode　これを見たらだいたいのことがわからなくてはいけない

  • 2✕✕：成功

    • 200：OK
    • 201：Created→Location: URI
    • 204：NoContent

  • 3✕✕：リダイレクト（他）

    • 301：Move Parmanently
    • 302：Found
    • 303：See Other
    • 304：Note Modified　
    • 307：Move Temporary

  • 4✕✕：クライアントエラー

    • 401：Not Authorized
    • 403：Forbidden　権限による
    • 404：Not Found
    • 405：Method Not Allowed
    • 406：Not Acceptable
    • 409：Conflict　同時リクエストによる矛盾
    • 410：Gone　昔あったページ
    • 412：Precondition Field

  • 5✕✕：サーバーエラー

    • 500：Internal ServerError
    • 504：Gateway Timeout
Headerにデータの型を入れる
  • request
    • Accept
      • request側でやる
  • response
    • Content-Type
    • Location

などなど・・・

HTTPキャッシュ

ブラウザが勝手にやってくれる！

  • 期限モデル

データの保持期限を渡して、それに応じてリクエストを送らない。Date、Expiresをresponseに付与。

  • 検証モデル

リクエストを送るが、データの状況に応じてデータを返すかどうか決める。この時にかえるのがStatusCode:304。どちらもサーバー側で実装が必要
responseにEtag・DateをEntityにつめてクライアントに返す。その後はrequestにEtagを付けて送信。
RequestにIf-None-Match：Etagを付与。

Cookie

Headerの一部

  • クライアントの全情報を送る

  • サーバー側ではSet-Cookieで指定できる

  • よく送られるのはJSESSIONID

  • マトリックスパラメータ『;』

こいつはJSESSIONIDをパラメータで指定することができる。しかしCookieが優先されるので殆どの場合、必要ない。

  • SessionStrageとLocalStrageに保存する方法もある

  • Secure、Httpsonlyはtrueにすべき

  • レスポンスヘッダーのサーバー名やURLは隠すべき

ざっとこんな感じです！

いや〜ほんとにデキる方って素敵。教え方もわかりやすくて本当に勉強になりました！

うちの部署に来てほしいよ全く。。。

てなわけで本日レクチャーしていただいた内容を踏まえて、今までJSP/サーブレットで作っていたものをRESTに作り変えるそうです！明日から・・・笑

JAX-RS（Jersey）を使ってゴリゴリ作って行くみたいなのですが、楽しみでもあり、ちょいと不安もあります。。

今日はここまで。
それでは(^_^)/~