開発効率爆上がり curl + jq 入門講座

Slide 1

Slide 1 text

YouTube Live (2020.10.08 Thur. 21:00~)

Slide 2

Slide 2 text

話す人現役のエンジニア二人赤貝が好きな CTO とデザイン勉強中のエンジニア @mu_vpoe 最近の仕事は ﬁgma で画面設計をつくることです。英語の勉強してる。ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォローお願いします！

Slide 3

Slide 3 text

話すこと curl の魅力 curl の基本的な使い方 jq の基本的な使い方 curl の一歩進んだ使い方

Slide 4

Slide 4 text

curl は便利で楽しい

Slide 5

Slide 5 text

ipinfo.io 自分のグローバル IP アドレスやプロバイダなどのネットワーク情報を確認できる ipinfo.io/xxx.xxx.xxx.xxx と後ろに IP アドレスを付けると指定の IP 情報を取得できる

Slide 6

Slide 6 text

qrenco.de QR コードを生成できるサービス

Slide 7

Slide 7 text

wttr.in 各国の天気が見られる

Slide 8

Slide 8 text

rate.sx ビットコインなどのレートが見れる

Slide 9

Slide 9 text

asciitv.fr アスキーアートでスターウォーズ見れる

Slide 10

Slide 10 text

ascii.live/nyan みんな大好き nyan-cat

Slide 11

Slide 11 text

つまり curl は便利で楽しい

Slide 12

Slide 12 text

jq で JSON

Slide 13

Slide 13 text

JSON を取り扱う悩み

Slide 14

Slide 14 text

JSON を返す API にアクセスしたら…見にくい！

Slide 15

Slide 15 text

email キーはどんな階層構造なんだ…？

Slide 16

Slide 16 text

そんな時に jq コマンド https://stedolan.github.io/jq/download/ ここからダウンロード＆インストール

Slide 17

Slide 17 text

jq コマンドに渡すとフォーマットしてくれる

Slide 18

Slide 18 text

キーの階層構造リストを表示することもできる

Slide 19

Slide 19 text

つまり jq は凄い

Slide 20

Slide 20 text

curl の基本

Slide 21

Slide 21 text

ページを取得する $ curl https://example.com $ curl -o ouput.html https://example.com コマンド普通に見るだけならオプションなしで URL を指定すれば OK ダウンロードしたい場合は -o もしくは --output オプションでファイル名を指定すれば保存することができる

Slide 22

Slide 22 text

POST する $ curl -d "name=zaru" -d "hoge=piyo" https://example.com コマンド -X POST で明示的に POST メソッドを使えるが -d や --data でデータ送信をすると自動で POST になるデフォルトで Content-Type は application/x-www-form-urlencoded になる（タグの enctype 属性の初期値）

Slide 23

Slide 23 text

JSON を POST する $ curl -H "Content-Type: application/json" \ -d '{ "key" : "value" }' https://example.com コマンド Content-Type を -H (Header) で application/json と明示することで、受け取るサーバ側がパラメータを JSON として認識する。

Slide 24

Slide 24 text

JSON ファイルを POST する $ curl -H "Content-Type: application/json" \ -d @params.json https://example.com コマンド大きな JSON を POST したい場合は JSON ファイルを指定することもできる。curl では @ファイル名を付けるとファイルを読み込むことができる

Slide 25

Slide 25 text

BASIC 認証 $ curl -u id:password https://example.com コマンド ↓BASIC 認証以外に Digest 認証などを通したい場合 $ curl --digest -u id:password https://example.com $ curl --any-auth -u id:password https://example.com コマンド

Slide 26

Slide 26 text

API キーを指定する $ curl -H 'Authorization: Bearer xxxxx' https://example.com コマンドよくある API キーを Header に指定してねという時は、-H オプションで Header を書くことができる。Header の指定方法は API によって異なる

Slide 27

Slide 27 text

よく使うオプション -d / --data : POST したいパラメータ -H / --header : リクエスト Header を指定する -u : BASIC 認証の ID Password を指定する curl 基本のまとめ

Slide 28

Slide 28 text

curl をブラウザから作る Chrome の DevTool にある Network から実際にブラウザでリクエストしたものを curl コマンドにすることができる

Slide 29

Slide 29 text

jq の基本

Slide 30

Slide 30 text

値アクセスは . jq 'セレクタ' コマンド jq コマンドにセレクタを渡すことで任意の情報にアクセスすることができる。 jq '.user.name' #=> "zaru" コマンド { "user": { "name": "zaru" } } json . ドットで key を接続することでオブジェクトの値にアクセスすることができる

Slide 31

Slide 31 text

配列は [] jq '.users[]' #=> "zaru" "mu" jq '.users[0]' #=> "zaru" コマンド { "users": [ "zaru", "mu" ] } json [] で配列要素にアクセスができる。0から始まるインデックス番号を指定することもできる

Slide 32

Slide 32 text

整形は | と {} jq '.users[] | { key: .name }' { "key": "zaru" } { "key": "mu" } コマンド { "users": [ { "id": 1, "name": "zaru", "proﬁle_image": "https://example.com/zaru.png", "address": "北海道" }, { "id": 2, "name": "mu", "proﬁle_image": "https://example.com/mu.png", "address": "沖縄" } ] } json | (パイプ)でデータを渡して連携できる。 {} で指定フォーマットにすることもできる

Slide 33

Slide 33 text

curl の一歩先

Slide 34

Slide 34 text

Cookie を送信する $ curl -b 'key=val; key2=val2;' https://example.com コマンド -b または --cookie オプションで、セミコロン区切りの key-value を送信することができる

Slide 35

Slide 35 text

Cookie を保存する $ curl -c cookie.txt https://example.com コマンドサーバから返される Set-Cookie のデータを -c オプションで指定したファイルに保存することができる。主にログイン時のセッションキーを保存するのに使ったりする $ cat cookie.txt # Netscape HTTP Cookie File # https://curl.haxx.se/docs/http-cookies.html # This ﬁle was generated by libcurl! Edit at your own risk. localhost FALSE / FALSE 0 key value 保存される Cookie ファイルの中身

Slide 36

Slide 36 text

保存した Cookie を送信する $ curl -b cookie.txt https://example.com コマンド -b オプションにファイル名を指定すると（正確には = が含まれていないと）、-c オプションで保存したファイル形式の Cookie を送信できる。大量の Cookie を送りたかったりする時に便利。

Slide 37

Slide 37 text

ファイルをアップロードする $ curl -F ﬁle_name=@sample.png https://example.com コマンド -F または --form オプションでファイル名とファイルパスを指定することで Content-Type multipart/form-data で POST することができる（タグの enctype multipart/form-data と同じ）。

Slide 38

Slide 38 text

jq の一歩先

Slide 39

Slide 39 text

.. で再起検索 jq '.. | .name?' コマンド JSON の中にあるはずだが、どの階層にあるのかが分からないけど、とりあえず見つけたい。という時に使う。 .. で再起的に探してくれるので、パイプで指定のキーを付ける。存在しないオブジェクトもあるので ? で null を無視する

Slide 40

Slide 40 text

Slide 41

Slide 41 text

curl 番外編

Slide 42

Slide 42 text

レスポンス速度を計測 $ curl https://example.com -s -o /dev/null \ -w "%{time_total}\n" コマンド -w オプションで curl のいろんな情報を変数指定で表示することができる。 time_total がレスポンス時間。また、余計な出力をなくしたいので -s または --silent オプションでダウンロード進捗を消し、 -o または --output オプションでダウンロードした内容を /dev/null の闇に放り投げる。

Slide 43

Slide 43 text

ベンチマークする $ for i in {1..10}; do curl https://example.com \ -s -o /dev/null -w "%{time_total}\n"; end | \ awk '{sum+=$1;print $1} END {print "AVG: " sum/NR} コマンド 10回のリクエストを送り、出力されたレスポンスタイムを awk で平均値をとるコマンド例 awk 自体の解説はまたの今度に… NR は組み込み変数で行数を表します

Slide 44

Slide 44 text

レスポンスヘッダのみ表示 $ curl -I http://example.com/ コマンド -I もしくは --head オプションでレスポンスヘッダのみ表示することができる。レスポンスボディが大きくて見にくい時に使う

Slide 45

Slide 45 text

URL は動的に変えられる $ curl http://example.com/[1-100].jpg $ curl https://example.com/{hoge,piyo,fuga}.jpg コマンド表現は限られるが、[n-m] で連番、 {n,m} で指定ワードで URL を生成して連続でリクエストすることができる

Slide 46

Slide 46 text

ありがとうございました！次回は... 未定！質問感想など呟いていただけると嬉しいです！ - ハッシュタグ #mu_zaru - ツイッター情報 @mu_vpoe , @zaru チャンネル登録 Good ボタンお願いします！ムーザルちゃんねる