RESTful＃とは勉強会でのGoogle Chrome Developer Toolsの使い方

Posted on2015年6月2日 Edit on 投稿者: shokola

<お詫び>
このエントリーのみ、パーマリンクの設定を変更して公開したのですが、
やはりデフォルトのもとに戻しましたので、ツイートやはてなブックマーク等してくれた方には、リンク切れになってしまっています。
申し訳ありません bow URLの設計はお早めにです。。

第7回目のRESTful#とは勉強会に関して書いていきます。

restful

今回はずっとお邪魔してみたかったクラウドワークスさんに会場お借りしました！CTOの@koichirooさん、@cesareさん、ありがとうございます！
（個人的に銅鑼を叩かせてもらうという貴重な経験ができました）

別件ですが、クラウドワークスさんで行ってるインターンの募集方法が･･良いですね！API経由でインターンのエントリーをするという方法！！

この勉強会にも通ずる方法でとても良い！！

これを見てtelnetに関して改めて調べてしまった。。。

telnetでWebサーバに接続してみよう

なぜ私は今学生ではないのか…

さて、ワークショップを取り入れて以来、この勉強会になくてはならないものになったGoogle Chrome Developer Toolsに今回は注目して書いていきたいと思います。

参考HP：
　Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能

　ドットインストール　Chrome Developer Tools入門

このツール、プログラマーの方々はデバックするときにConsoleタブをよく使うのではないでしょうか？

RESTful＃とは勉強会ではサイトがRESTfulな設計になっているかを調べるために使います。
どんな風に利用するのかというと、

講師の@tkawaさんが毎回用意してくれているGistの「調べ方のヒント」の部分に書かれてあります。
RESTful#とは勉強会7 2015.05.19

調べ方のヒント

ブラウザのデベロッパーツールを使いましょう。
Windows: F12 か Ctrl+Shift+i
Mac: command+option+i

Networkタブのリクエストやレスポンスを見て、URLやメソッドを調べましょう。

ショートカットキーでDeveloper Toolsを表示させたら、Networkタブを開きます。

今回ワークショップに使用した「Webを支える技術」15章に出てくるricollab 郵便番号検索を例にします。

早速適当に郵便番号を検索をしてみましょう。

ricollab

メソッド、ステータスコード

［Network］-［Headers］タブを開き、前半の読書会で学んでいるメソッド、ステータスコードを見ていきます。
ステータスコードは適切か、PUTの場合はべき等かを確認します。

ステータスコード

リソース形式

リソースの形式を確認します。例では郵便番号を検索して1桁ずつ数字を打つたび、queryを投げて、成功している様子がわかります。形式はJSONだということがわかりますね。

json

要素の検証

Sorceタブ、または虫眼鏡アイコンで箇所を選択し検証モードで見ると、パラメータを指定して「hidden」でPOSTしているというNetworkタブには表示されないものが見つかったりします。　(ricollabにはhiddenが見つからなかったので、ここだけ前々回の際の課題、GithubのGistが例です)

hidden

URL

他には、Toolは使いませんが、URLに着目し、動詞が含まれていないかの確認や、この階層でURLが成り立っているならば、こう変えても表示されるのではないかの仮定を立てて試したりします。

他には、会ではHTTP2のRFCが公開された話なんかも出て(というか出して)、

この記事と同じことを話していました

HTTP/2は流行らないけど広く使われるものだと思う

Chrome/Firefox/Safari/IEを通じて非常に多くのユーザが意識せず利用しています。それは現状のインターネットトラフィックのかなりの割合です。

知らず知らずのうちに実はもう使ってたんですね。

懇親会の北海道のラーメンサラダが美味しかったのですが、次の日に開催されたShibuya.rbで24時間後にまた食べてる人が数人いて笑った。

総じて今回も楽しかったー！
特に参加してくれたクラウドワークス勢が会のレベルを上げてくれるとともに、エンジニアオーラがにじみ出ていてカッコ良かったです。参加してくれた皆さん、お疲れ様でした！
当日の様子は#RESTudyでTwitter検索をどうぞ full_moon_with_face

カテゴリー: