Sakiのプログラミング学習ブログ

プログラミングについて学んだことや、学習の振返りを書いています。

週報 3/22(月)~3/28(日)

3/22(月)~3/28(日)の一週間の学習の振り返りをざっくり。

今週の目標&結果

今週の目標 結果
i18nの合格 修正中
kaminariの合格 再提出完了
deviseの課題 来週には提出できそう

今週の学習時間

プラクティス外の学習・勉強会への参加は含めない。

日付 目標 実際
3/22(月) 2:00 4:15
3/23(火) 6:00 7:30
3/24(水) 2:00 2:15
3/25(木) 6:00 8:00
3/26(金) 2:00 3:30
3/27(土) 6:00 4:30
3/28(日) 6:00 4:15
合計 30:00 34:15

先週から再開した朝活のおかげで、目標時間を超えられた🎉

今週やったこと

3/22(月)

やったこと

  • devise #1
  • deviseの課題用のブランチを新しく切ってチェックアウト
  • Notionを使ってdeviseの要件の把握
  • WebアプリのDB利用の課題に合格をもらえたのでマージ
  • 週報書いた

3/23(火)

やったこと

考えたこと

  • 記事の通りに行ったらユーザー登録の機能はできたが、応用力が皆無。
  • ユーザーの一覧ページをどうやって作るのか？新しいページのルーティングの設定方法は？
  • 画面遷移図をつくって把握した方がいいと思った。
  • 郵便番号・住所・自己紹介はおそらくuserテーブルに追加するんだろうけど、どうやってやるんだろう。
  • アカウント登録のページと本棚のページがつながっていないからボタン作ってリンク貼るか、リダイレクトさせるようにせねば。
  • 色々メモしたが、何をやっているかいまいち分かっていない。Railsの教科書をもう一度読み直したほうがいいかも。
  • ファイルがどんどん増えるrails gコマンドを使うのがこわい。
  • Rails・deviseと仲良くなりたいので、もっとコードを書いて慣れていきたい💪

3/24(水)

やったこと

  • 23(火)の日報提出
    • 昨日のcodezineの記事の、コマンドやコードの意味を振り返った
  • devise #3

考えたこと

  • Railsが広大で、何も分からない状態だけれども、ユーザー認証機能を自力で作れるようになったらとても嬉しいので、急がば回れの精神でがんばりたい。

3/25(木)

やったこと

  • progate:Rails Ⅰ~Ⅱ途中
  • devise #4
    • 画面遷移図作成
    • rails g controller users indexでusersコントローラ作成
    • Usersモデルにカラム追加
    • railsでDBを確認する方法
    • rails db:migrateを無かったことにする方法

考えたこと

  • Userモデルにカラムを追加できたのと、画面遷移図を分かりやすくかけたのがよかった
  • Railsが何も分からなくて辛い...という気持ちになりかけているので、一番とっつきやすいprogateで学習することにした。
  • ページの作り方はわかったけど、ユーザー一覧ページと詳細ページを作成するために、どこにどうファイルを作ればいいか分からない。
  • 明日も引き続きprogateをやりながらdeviseを考える。画面遷移図を書いたことで、やるべきことが目に見えてクリーンになった✨
  • 疑問：/users というパスにユーザー一覧のページを作りたいのだけど、deviseですでに/users/~のページが作られている。 コントローラはdeviseだけど、パスは/users/~ がすでにある状態。この場合、deviseで作ったcontrollerをいじればいいのか 新しくrails g controller users indexでページを作るのか？ →メンターさんから、「devise のcontrollerはそのdeviseの機能に専念させたほうがあとからツラくならない」と教えていただいたので、rails g contrller user indexでuserコントローラーを作ることにした。

3/26(金)

やったこと

  • devise #5
    • Userモデルにカラムを追加して、viewで表示する
    • formヘルパーを学ぶ
    • autofocus: trueとautocomplete: "email"の意味を理解
    • アカウント登録画面でユーザー名なども入力できるようになった！

f:id:Saki-Htr:20210328210525p:plain

考えたこと

  • Userモデルに追加したカラムを、ユーザー登録画面に表示できた！目に見えると嬉しい。

3/27(土)

  • 日報提出
    • 25(木)
    • 26(金)
  • devise
    • deviseで作られた画面(ルーティング)の確認
    • ユーザー一覧画面/ユーザー詳細画面を作成:rails g controller Users index show
    • strongパラメーター設定
    • 既存のカラムに後から制約をつけたかったが、できず
    • バリデーション:登録時全部を入力必須にする

やったこと

  • devise #6
    • ユーザー一覧とユーザー詳細ページのルーティングができた！
    • deviseが用意してくれるルーティングの範囲と、自分で用意しなければいけないルーティングの範囲が分からず混乱していたが、わかってきた

考えたこと

  • 何が分からないか分からない状態は抜け出せたと思う。来週には提出したい。

3/28(日)

やったこと

  • devise #7
    • link_toで、ユーザー一覧から詳細画面にとべるようにする
    • ユーザー詳細画面の作成
    • マイページに編集リンク作る
    • kaminari実装
  • i18nの提出物にコメントする
  • kaminariの再提出

考えたこと

  • コントローラでUserモデルやBookモデルに対して使えるメソッドが分かってないから知りたい。new,find_by,allぐらいしか知らない。書籍をしっかり見たほうがよさそう。
  • どこのページにどのリンクを貼るかってユーザーの使い勝手において大事だろうな〜
  • ページができてきて嬉しい。
  • コミットの粒度こんな感じでいいのかな。コミットまとめられるらしいのでこまめにやってしまってる。

今週の振り返り

  • deviseがどんな機能を実装してくれるか、どんなルーティングを作ってくれるか分かった。
  • 月曜の時点で、Railsの知識は「Railsの教科書」を一周読んだ程度で、コントローラやモデルについては結構忘れていて、ビューしかちゃんと分かってない状態だった。その状態で火曜にdeviseを実装して、何も分からない状態だったが、progateをやりなが課題を進めたら、どこのファイルに何を書くべきかや、rails gコマンドが何をしてくれているかの理解が深まった。
    やっぱり、アウトプット駆動で教材をやった方が身につくなと思った。
  • 今週は出勤日全部、早起きしてカフェで2時間学習した！えらい😆

来週の目標

deviseの課題を来週中には提出したい。 - パスワード再設定をメールに送信する - ログインしたないとユーザー情報も本棚も見れないようにする - アプリケーションルートと、ログイン完了後のリダイレクト先を、ユーザー詳細ページにする

あたりで時間がかかりそうだな〜と思っている。i18n化はdevise-i18n-viewというgemをうまく使いこなせれば、そんなにかからなさそう。
だんだんRailsのことが分かってきて、「もっとRailsのことを知りたい!」というポジティブな気持ち。 次のomniauthの課題から難易度もグッと上がるらしいので、progateや独習Railsで基本をおさえていきたい。

週報 3/15(月)~21(日)

3/15(月)~21(日) の一週間の学習の振り返り。

今週の目標&結果

今週の目標 結果
WebアプリからのDB利用の合格 ◎21(日)に合格
i18n の提出 ◎20(土)に提出
kaminari を使ったページング処理 ◎20(土)に提出
devise を使ってユーザー認証を実装する ✕ 来週から着手

今週の学習時間

プラクティス外の学習・勉強会への参加は含めない。

日付 目標 実際
3/15(月) 2:00 4:30
3/16(火) 2:00 2:30
3/17(水) 2:00 3:45
3/18(木) 6:00 0:00
3/19(金) 2:00 0:00
3/20(土) 6:00 8:15
3/21(日) 6:00 4:45
合計 26:00 23:45

今週やったこと

3/15(月)

やったこと

  • i18n:2日目
    • 用語理解：ロケール/国際化/localizationとは
    • デフォルトロケールの設定を、config/initializers/locale.rb とconfig/application.rbのどちらに書けばいいかわからず。 →
    • I18n_generatorsを使って、ja.ymlとtranslate_ja.ymlを自動生成
    • 疑問点整理

考えたこと

  • 昨日はRailsガイドの説明がわからず、とにかく動くものを作るという感じだったが、i18nの使い方や書いたコードの意味がが少しずつわかってきた。
  • 久々に早起きして朝カフェで学習した！頭がスッキリしていて体も元気なので集中できた。温かくなってきて布団から出やすくなったので朝活がんばりたい。
  • 買った独習Railsにi18nの項目があったので明日読む!
  • 公式ドキュメントの日本語が違和感があったり少し変なときは、原文を確認してみるとよいと学んだ

3/16(火)

やったこと

  • 独習railsのi18nの部分を読む
  • Railsの教科書を読んで、モデルの復習

考えたこと

  • 翻訳ファイルが何をしているのかや、使い方・書き方がわかった
  • 独習Railsのi18nの説明分かりやすい。いろんな記事を見て回るより一冊の本をじっくり読んだ方が効率的。
    翻訳ファイルが何をどこまで日本語化してくれるものなのかわからず大変だったが、独習Railsを読んだら体系的にi18n化のやり方が載っていて、説明もわかりやすくて本当に助かった。

3/17(水)

やったこと

  • 独習Railsを読みながらすべての日本語化を完了
  • activerecordを使った、翻訳ファイルtranslation_ja.ymlの書き方を学んだ

考えたこと

  • viewディレクトリ以外の、翻訳ファイルを当てるファイルを探すのが大変だったが、難関だったcreateボタンやflashメッセージも日本語化できた
  • 最初なんとなくで書いていたtメソッドの書き方を理解できたのが嬉しい。
  • Markdown形式のリンクを素早くコピーする方法を今日初めて知った。とても便利。
  • webアプリを使っていて出てくる英語はすべて日本語化できたので、明日はrubocopを通したり、提出前のチェックリストを確認して、提出する。

3/20(土)

やったこと

  • i18n
    • 提出前チェック：不要なファイルやコードを削除したり、rubocopを通したり。
    • 課題提出
  • kaminariの課題提出
  • webアプリのDB利用の修正点を整理
  • 16(火),17(水)の日報提出

考えたこと

  • i18nとkaminari、2つの課題を提出できた🎉
  • ja.ymlとtranslation_ja.ymlの使い分け方がぴんときていない。

3/21(日)

やったこと

  • DB利用の修正&提出→再度修正&提出して合格
  • 課題の修正
    • ブランチからREADMEを消さない
    • プルリクエストのタイトルをちゃんと書く
    • コミットの粒度をもっと小さくすべし
  • 20(土)の日報提出

考えたこと

  • WebアプリからのDB利用を合格した！RESTプラクティスがおわった🎉これでRailsプラクティスに集中できる💪🔥

今週の振り返り

✅ できたこと/できるようになったこと

  • 振り返ってみると、つい一週間前までi18nを全然理解できていなかったことに驚き。初めてRailsガイドのi18nの説明を読んだ時に比べて、今はかなり理解が進んだと思う。
  • 今週から朝活を再開した。仕事がある日4日中、3日早起きして職場近くのカフェで朝2時間学習した。温かくなってきたので、早起きがんばりたい🌅
  • 課題の進捗もいい感じ。ただ、deviseの課題が重そうなので、不安。

✅ "こうしたらもっと良かった"と思うこと

  • 今週はとくに思い当たらない。体調もかなり良好で、集中して課題に取り組めた。

来週の目標

目標 目安時間
i18nの合格 -
kaminariの合格 -
deviseの課題 14:00

近況 & 来週の目標

3/1(月)から体調が悪くなり、それに伴ってメンタルも沈んでしまっていて学習から遠のいていたので、日報も週報も書いていなかった。
回復したので、今日から学習再開🔥。およそ2週間ぶり。
気がついたら3月が半分終わってビックリしている。

今の気持ち

  • 体調が悪い時に取り組んでいた課題を、今日やってみたらそこまで難しく感じなかった。まだRubyのコードを読むのに慣れていないので、疲れている時や仕事後はより難易度が高くなってしまうんだと思う。
  • 長時間詰まっていた課題を次の日に取り組んだら大したことじゃなかった、ということがこれまで何度もあったので、難しいと思ってもあんまり気落ちしないようにしようと思った。
  • 久々に学習したら、やっぱり楽しかったので、がんばって卒業するぞ〜という気持ち💪
  • 2週間休んでいたことに対して後悔はそんなに無いのだが、
    • 休む時間が長引くほど再開が億劫になる問題(本当は今週木曜あたりから元気だった)
    • 体は休んでいたが、学習していないことへの罪悪感を感じてしまい、心は休めていない問題。
      をなんとかしたいな〜と思っている。

来週の目標

目標 目安時間
WebアプリからのDB利用の合格 -
i18n の提出 9:00
kaminari を使ったページング処理 4:00
devise を使ってユーザー認証を実装する 14:00
(この辺からググる程度では実装できなさそうな予感)

あたたかくなってきたので、朝活も再開したいな〜と思っている。

週報 2/22(月)~2/28(日)

2/22(月)~2/28(日)の一週間の学習の振り返りをざっくり。

今週の目標&結果

今週の目標 結果
TwitterのDB設計をどうやって行ったかまとめる 日報に詳細書いてあるので、やめた
DB設計:他の受講生の提出物をチェック ◯
自己参照/自己結合の理解 ◯
【ブログ】DB設計で学んだこと&詰まった点 ◯
【ブログ】web技術の基本で学んだこと ◯
【ブログ】webを支える技術で学んだこと ◯
【ブログ】URL設計について学んだこと ◯
【ブログ】Gitで課題提出するまでの手順 ◯
【ブログ】TeamGeekを輪読会の感想 ✕ 着手もできず
2月の振り返り&計画の見直し ◯
(できれば)Railsの教科書の6~8章(最後) △ 6と8は完了/
残り7章
(できれば)book_appをリモートリポジトリのmainブランチにpushする ✕

今週の学習時間

プラクティス外の学習・勉強会への参加は含めない。

日付 目標 実際
2/22(月) 2:00 0:00
2/23(火)祝日 6:00 0:45
2/24(水) 2:00 2:00
2/25(木)休み 6:00 4:15
2/26(金) 2:00 0:00
2/27(土) 6:00 7:30
2/28(日) 6:00 8:15
合計 30:00 22:45

今週やったこと

2/22(月

やったこと

  • 学習せず。

考えたこと

  • 入浴した後、自室で学習していたのだが、眠すぎて週報を書くことすらできなかった。お風呂に入ると体が一気に睡眠モードになってしまう😴
  • 復習が疎かになっているので、Railsに本格的に入る前に、今週はDB設計,RESTの復習に注力する予定。

2/23(火)祝日

やったこと

考えたこと

  • 週報を書いた後、復習をかねてブログを書こうとしたら、少し疲れていてなかなか集中できず、せっかくコワーキングスペースに行ったのに帰ってしまった。
    いつもはコワーキングスペースに行くとスッと集中モードに入れるので、うまく睡眠が取れなかったのかなと思った。

2/24(水)

やったこと

  • Railsの教科書(5~6,8章)
    • 5章(p.91-95):scaffoldで作った既存のテーブルに、あとからカラムを追加する
    • 6章:awesome_printをインストールしたが使えず。どうやらRubyのバージョンが原因のよう。bundlerの理解を深めた。
    • 8章:あとがき

考えたこと

  • 5-6章,8章を読み終わった！残るは7章！
  • Ruby3.0.0でawesome_printが使えない問題は、バージョン1.9.0で解決されている。時間があるときに試す。
  • bundlerの仕組みがよく分からずモヤモヤしていたが、「Bundlerは、GemfileとGemfile.lockで互換性の管理をしつつ、bundle updateで新しいバージョンもインストールして使えるから、便利だよ！」ということが分かった💡Ruby超入門10-1にも記述があるので、読み返す。

2/25(木)

やったこと

考えたこと

  • DB設計は、色んなところで理解につまづき、世界観？を理解するのが難しかったので、これから学ぶ方の助けになればいいなという気持ちで書いた。
  • Gitの記事は、フィヨルド生で参考になったと仰ってくださる方がいて嬉しかった！

2/26(金)

やったこと

  • 学習せず。

考えたこと

  • 早起きに失敗して出勤前に学習できず&仕事後疲れて学習できなかった。

2/27(土)

やったこと

考えたこと

  • ずっと後回しにしていた、去年秋に読み終わった『Web技術の基本』を読んで学んだこと・疑問に思って調べたこと・感想を書けた。
  • ブログが思ったより、書くのに時間がかかった💦久々に本の内容を復習して、それを自分なりに言葉で説明してまとめたので、良い復習になった。
  • 伊藤さんの記事:ブログに技術書の内容を丸写しする問題点と、オリジナルなコンテンツを書くためのアイデアを参考にしながら、記事の内容が無断転載にならないように、気をつけて書いたが、大丈夫か少し心配😅もしご指摘があったらすぐに修正or削除するつもり。

2/28(日)

やったこと

考えたこと

  • ずっと書こうと思って後回しにしていた記事を2本も書けた!

今週の振り返り

✅ できたこと/できるようになったこと

  • 今週はブログでたくさんアウトプットできた！週報をのぞいて記事5本書いた。がんばった〜💪
  • 気づけば今年から始めた週報を2ヶ月連続で書けている。書かないと気持ち悪くなるくらい習慣化できている✨
  • 最近休みの日は無理やり早起きせず、ぐっすり眠ることを重視している。アラームも休みの日はつけないことにした。
    無理やり早起きしても後でエネルギー切れを起こしてしまうので、8時台まで寝るのは許容範囲にしている。

✅ "こうしたらもっと良かった"と思うこと

  • 火曜の祝日にもう少し学習できたらよかったな〜と思う。でも、毎日元気全開で学習するのは難しいので、反省はしても責めないようにする。 やる気と健康にはムラがあるもの！

来週の目標

合計23:00分

  • WebアプリからのDB利用(5:00) ※レビューに時間かかるので最優先
    • 残り:prepared statementを使った実装。
    • GitHubへプルリクエストで提出
    • 合格したい！
  • Railsの教科書の7章(1:30)
  • Rails の i18n を理解する (9:30)
  • kaminari を使ってページング処理を実装する (4:00)
  • 【ブログ】TeamGeekを輪読会の感想 (3:00)

『Webを支える技術』を読んで学んだこと

読書ノート 輪読会 Web

f:id:Saki-Htr:20210228190546p:plain

フィヨルドブートキャンプの課題である、「Webを支える技術 -HTTP、URI、HTML、そしてREST」(以下、「Webを支える技術」)」を、techplay女子部で輪読会をして読み終わったので、REST,URI,HTTPを中心に学んだこと・感想を書いた。

<<無断転載にならないよう気をつけて書いたつもりですが、もしご指摘等ありましたら修正あるいは削除させていただくつもりです>>

活動内容

  • 期間:11/15(日)〜12/24(木)
  • 人数:2人→途中から3人
  • ツール:zoom / HackMD
  • 時間帯:毎朝6:00~7:00 (起きられなかったら無し)
  • 形式:予習なしで、その場で読む。10分各自で読む&疑問や感想をHackMDに書く、次の10分で話し合い。これを3回繰り返して1時間。

本の構成

  • 第1部 Web概論
    • 第1章 Webとは何か
    • 第2章 Webの歴史
    • 第3章 REST
  • 第2部 URI
    • 第4章 URIの仕様
    • 第5章 URIの設計
  • 第3部
  • 第4部 ハイパーメディアフォーマット
  • 第5部

REST

アーキテクチャースタイルとは

RESTはクライアント/サーバーから派生したアーキテクチャースタイル

下記の文章の意味が理解できなかったので整理した。

実はRESTは、クライアント/サーバから派生したアーキテクチャスタイルなのです。素のクライアント/サーバアーキテクチャスタイルにいくつかの制約を加えていくと、RESTというアーキテクチャスタイルになります。
(山本陽平 著 『Webを支える技術 -HTTP、URI、HTML、そしてREST』 p.26 より引用)

クライアント/サーバとは

  • アーキテクチャスタイルは、REST以外にも存在し、クライアント/サーバはその一つ
  • クライアント/サーバー:クライアントとサーバがHTTPというプロトコルで通信して、クライアントはサーバにリクエストを送り、サーバはそれに対してレスポンスを返してあげる方式
  • 単一のコンピュータ上ですべてを処理するのではなく、クライアントとサーバに分離して処理できることが利点。
  • RESTはこれに制約を加えたもの

制約とは

制約とは、以下の5つのアーキテクチャスタイルを指す。

  1. ステートレスサーバ

    • サーバー側で状態をもたない(リクエストする度毎回クライアントのことを忘れている/はじめまして)
    • HTTPをステートフルにするcookieはRESTの観点からすると、誤った拡張。しかし使わないわけにもいかないのが現状なので、必要最低限に使う。

  2. キャッシュ

    • 一度取得したリソースをクライアント側で使いまわす方式。
      例:「戻る」をクリックすると初めて接続したときより早い

  3. 統一インターフェース

    • インターフェースとは:プログラム同士の接点
    • 統一インターフェースとは:URLで示したリソースに対する操作を、統一した限定的なインターフェースで行う事。
    • メリット:インターフェースが統一されている事で、Webを利用しているシステムは同じHTTPメソッドで接続ができる。制限を加えることで、アーキテクチャをシンプルにできる。

  4. 階層化システム

  5. コードオンデマンド

    • プログラムコードをサーバからダウンロードし、クライアント側でそれを実行する
      例:JavaScript

結論

  • クライアント/サーバーというアーキテクチャスタイルに、この5つのアーキテクチャスタイル(制約)を加えたものがRESTである。
  • 実際にRESTに基づいて設計する時は、現実的にすべてのアーキテクチャスタイルを取り入れることができないこともあるため、いくつかを除外してもいい。

リソースとは

URI(URL)

クールなURIは変わらない

ブックマークに登録してあったお気に入りのWebサイトがある日突然見えなくなる、苦労して作成したリンク集が1年後には半分以上リンク切れ、検索エンジンの検索結果に出てくるページが見つからない
(山本陽平 著 『Webを支える技術 -HTTP、URI、HTML、そしてREST』 p.53より引用)

  • なんと、1990年代後半までは、URIが変更になることは日常茶飯事だった。=Webの根幹を揺るがす問題
  • Webはそれぞれのリソースにほかのリソースへのリンクが埋め込まれたハイパーメディアシステムなのに、リンクが切れてしまうということは、ハイパーメディアシステムが機能しないことになる。

  • Webの発明者ティム・バーナーズ＝リーはこの状況を憂い、1998年に「Cool URIs don't change」（クールなURIは変わらない）」を発表した。

  • 自分が生まれたのが1995年なので、その頃にURLが変わっていてせっかくブクマ登録しても404になってしまう、という事態が信じられない...。

URIを変えないようにするための設計指針

 1. URIにプログラミング言語依存の拡張子を利用しない（.pl、.rb、.do、.jspなど）
 2. URIに実装依存のパス名を利用しない（cgibin、servletなど）
 3. URIにプログラミング言語のメソッド名を利用しない
 4. URIにセッションIDを含めない
 5. URIはそのリソースを表現する名詞である

(山本陽平 著 『Webを支える技術 -HTTP、URI、HTML、そしてREST』 p.57 より引用)

指針について補足

  • 3.のメソッド名 = プログラミング言語のメソッドのことを言っている。(例)RubyのArrayクラスのsizeメソッド

  • CGIは廃れている
    Web技術の基本で学んだCGIが、この本では廃れた技術と書かれていた。2010年に発売した本なので2020年現在だと更に使われなくなっていそう。

    リクエストのたびにプロセスを起動するCGI方式は性能面で難点があったため、そのほかの手法に取って代わられました
    (山本陽平 著 『Webを支える技術 -HTTP、URI、HTML、そしてREST』 p.55より引用)

  • 4.のセッションIDが何かについては以下の記事で説明。

シンプルなURLは、ユーザーの使い勝手も良くする

  • シンプルだとその分文字数が少ないので、ユーザーが覚えやすい
  • 上記の1~5に該当しないURLは、ユーザーには馴染みがない

→文字数は少なく&シンプルにしよう。

階層で管理できない情報を表現したい時

  • 階層で管理できない情報を表現したいとき、例えばGoogleマップの位置情報を表現したいときは、マトリクスURIを使う。

地図中のある特定の場所を表現するURIには、緯度と経度のほかにも表示スケール(縮小・拡大)や地図か航空写真かのフラグなど、複数のパラメータが必要になります。しかもこれらのパラメータはそれぞれ独立した軸を持つため、個々のリソースを階層構造で表現できません。
(山本陽平 著 『Webを支える技術 -HTTP、URI、HTML、そしてREST』 p.62より引用)

  • マトリクスURIは、複数のパラメ−タをセミコロン;で区切ってリソースを表現する。
http://hello.jp/map/lat=35.154328;lng=159.462784

URIが重要な理由

  • URIはリソースの名前である
  • URIは寿命が長い
  • URIはブラウザがアドレス欄に表示する

HTTP

HTTPのバージョン

アプリケーション状態とは

  • アプリケーション状態 = セッション状態
  • セッションとは：あるWebサイトにアクセス(あるいはWebシステムにログイン)して、ログアウトするかブラウザを閉じるまでが1セッション。1セッションで1ページしか閲覧しない場合もあれば、1セッションで何ページも見る場合もある。
  • セッション状態とは： 一連の操作の間の状態のこと。例:「ハンバーガーセットをポテトで注文している」という情報のこと。

HTTPメソッド

べき等性と安全性

  • べき等性:ある操作を何回行っても結果が同じであること。
  • 安全性:操作対象のリソースの状態を変化させないこと。 ※セキュリティ的な意味合いではないので注意。

→Webアプリを開発する時にこの2つがどう関わってくるのかイメージが湧かないので、今は「べき等性と安全性という性質がある」ということを覚えておく。

メソッドの間違った使い方

  • WebサービスやWebAPIの設計を誤ると、これらのメソッドが安全でなくなったり、べき等でなくなったりする
  • 例えば、GETの目的はリソースを取得することなのに、GETでリソースを更新したり、リソースを削除したりしてはダメ。
  • POSTは他のメソッドではできないことを色々できるが、他のメソッドでできることをPOSTにやらせてはいけない。
    特にGET,PUT,DELETEでできることをPOSTで行うとべき等性と安全性が損なわれる。
  • DELETEがべき等でなくなる例
    • /latestというURLがあり、「最新バージョンのリソース」を示すものだとする。
    • これをDELETEメソッドで削除すると、
    • 1回目:最新バージョンを消す
    • 2回目:1回目で消したバージョンの次に新しいバージョンを消す
    • 3回目:2回目で消したバージョンの次に新しいバージョンを消す...というようにエンドレスでバージョンを削除してしまう。

ステータスコード

ステータスコードの分類と意味

分類 意味
1xx 処理中
2xx 成功
3xx 他のリソースへリダイレクト
4xx クライアントエラー
5xx サーバエラー

ステータスコードは、クライアントとサーバーを疎結合にするための工夫

下記の文章の意味が理解できなかったので調べた。

ステータスコードを先頭の数字で分類するのは、クライアントとサーバの約束事を最小限に抑えて、クライアントとサーバの結び付きをなるべく緩やかにする、すなわち疎結合にするための工夫です。一般的に、システムが疎結合になると、コンポーネント間の独立性が高まり、コンポーネントの置き換えや拡張が容易になる、と言われています。HTTPで言えば、コンポーネントとはサーバとクライアントのことです。つまり、サーバのバージョンアップやクライアントの置き換えが行いやすい、ということです。
(山本陽平 著 『Webを支える技術 -HTTP、URI、HTML、そしてREST』 p.113より引用)

疎結合とは

  • 疎結合と密結合という2つの概念がある。どちらも結合度（結びつきの強さ）を表す用語。コードでもこの2つの考え方がある。
  • 密結合
    • 処理を同一タイミングで行う場合に互いの処理同士の干渉が大きいもの。
    • コード同士が複雑に絡み合っている状態なので、長期的な保守を考えるのであればやめた方が良い。
  • 疎結合
    • 一緒に実現するコードが互いの干渉がなく一つ一つのクラス独立しているもの。
    • 将来的な拡張に柔軟に対応できて良い。

コンポーネントとは

  • 機器やソフトウェア、システムの構成する部品や要素。

結論

  • 本では「ステータスコードは、クライアントとサーバーを疎結合にするための工夫」と言っている。
    →たしかに、400番台だとクライアント側に原因があるエラー、500番台だとサーバー側に原因があるエラーというように、原因の所在がきっちりと分かれている。
  • サーバーとクライアントが密結合だと、一方の何かを変えたい時にもう片方にも影響が出て処理が複雑そうだと思った。お互い独立している=疎結合である方が良い、ということだと解釈した。

ステータスコードは正しく割り当てる

  • Webサービス/WebAPIを開発するときに、ステータスコードを正しく割り当てないと、ブラウザ(クライアント)が間違った処理をしてしまうので、正しく割り当てることは最低限のマナー。
  • 例えば、本当は404 Not Found(リソースの不在)=エラーの状態なのに、404を返さず200 OK(リクエスト成功)を返す仕様にしているとする。
    これでは検索エンジンのロボットが404の状態をエラーでなく、正式なリソースと判断してしまう。
  • 開発しているWebサービスやWebAPIでエラーが起きたときに、どのステータスコードを返すかは、とても重要な設計の検討事項。とくに400番台は種類が多いので注意。

HTTPヘッダ

コンテントネゴシエーションとは

メディアタイプや文字エンコーディング、言語タグは、サーバが一方的に決定するだけではなく、クライアントと交渉（ネゴシエーション）して決めることもできます。この手法を「コンテントネゴシエーション」（ContentNegotiation）と呼びます。
(山本陽平 著 『Webを支える技術 -HTTP、URI、HTML、そしてREST』 p.132より引用)

自分の言葉で説明してみた。

  • 英語と日本語の両方に対応しているサーバーに、日本語しか受け付けないリクエストをクライアントが送ると、日本語が返ってくる。
  • クライアント「日本語しか対応してないから日本語でよろしく」
  • サーバー「OK、日本語で返すね」

このやり取りのことを「交渉」と言っている。

キャッシュ用ヘッダ

  • HTTPの機能の一つ:キャッシュは、キャッシュ用ヘッダによって使える。
  • あるリソースがキャッシュ可能かどうかは、そのリソースを取得したときのヘッダで判断する。リソースがキャッシュ可能かどうか、その有効期限がいつまでなのかは、Pragma,Expires,CacheControlヘッダを用いてサーバが決める。

no-cashe=キャッシュ禁止ではない

  • 「キャッシュを使うな」という意味ではない。
  • 一度キャッシュに記録されたコンテンツは、現在でも有効か否かを本来のWebサーバに問い合わせて、確認がとれない限り再利用してはならない、という意味。

条件付きGET

以下の文章の理解が難しかったので、自分の言葉でまとめた。

クライアントがExpiresやCacheControlヘッダを検証した結果、ローカルキャッシュをそのまま再利用できないと判断した場合でも、条件付きGETを送信すればキャッシュを再利用できる可能性があります。条件付きGETは、サーバ側にあるリソースが、クライアントローカルのキャッシュから変更されているかどうかを調べるヒントをリクエストヘッダに含めることで、キャッシュがそのまま使えるかどうかを検証するしくみです。
(山本陽平 著 『Webを支える技術 -HTTP、URI、HTML、そしてREST』 p.146より引用)

  • クライアントが自分のローカルストレージに保存しているキャッシュを再利用したいので、ExpiresやCacheControlヘッダを検証したら、no-casheだったので、サーバーがリソースのキャッシュを禁止=再度サーバーにアクセスしなくてはいけないことが分かる
  • no-casheと返されていても、「条件付きGET」を送信することで、自分のキャッシュが使えるかどうか調べることができる
  • 調べ方=サーバ側にあるリソースが、クライアントローカルのキャッシュから変更されているかどうかを調べるヒントを、リクエストヘッダに含める。
  • 調べ方には2つある。
    • If-Modified-Since （要求）ヘッダ
    • If-None-Match （要求）ヘッダ

HTML

rel属性

  • rel属性とは:リンク元のリソースとリンク先のリソースがどのような関係にあるか。
  • HTMLを書く時、意味を分かっていないで、rel="stylesheet"と書いていた。これは「元のHTMLリソースを外部のCSSリソースにリンクするとき」に書く。
  • stylesheet以外にも色んな例がある。

リソース設計

リソース設計の手順

  1. Webサービスで提供するデータを特定する
  2. データをリソースに分けるそして、各リソースに対して次の作業を行います。
  3. リソースにURIで名前を付ける
  4. クライアントに提供するリソースの表現を設計する
  5. リンクとフォームを利用してリソース同士を結び付ける
  6. イベントの標準的なコースを検討する

  7. エラーについて検討する

  8. リソース設計の最初の工程は、サービスで提供するデータを理解し特定する作業。

  9. 自分のサービスでどのようなデータを提供するのかを理解していなければ、リソースは設計できない。

  10. 日本郵便が提供してるCSVのデータ
    →会社で使ってるシステムが、郵便番号を入れても住所が自動で入力されないので、これを使って実装できそう

  11. 機能の結果をリソースとしてとらえることが、重要

クエリパラメータ

標準的な利用コースを検討する

  • 利用コースという言い回しが難しく感じる。
  • つまり、このWebサービスをクライアントがどんな目的をもって、何を知りたくて使うかを想定して、どういうリソースのたどり方(=利用コース)をするか
  • 今回は、郵便番号を入力して目的の郵便番号リソースを取得するコース(この郵便番号てどこの市町村だろう？)/住所を入力して郵便番号リソースを取得するコース/地域リソースの階層をたどりながら郵便番号を選択するコース
  • 利用する人の立場に立って考えなければいけない。

全体の感想

  • 『Web技術の基本』を先に読んでよかった。初めて読んだ時は、知らない用語ばかりでちんぷんかんぷんだったが、2回目は、アーキテクチャースタイル、REST,URI,HTTPの基本的な知識、リクエストとレスポンスの裏側で何が起こっているか、リクエストメッセージの構成、を事前に理解していたため、理解することができた。
  • メンターさんから、Ruby on Railsを触った後や、就職した後に読んでみると、 理解度が変わってくると伺ったので、今回はREST,URI,HTTPの理解を優先し、それ以外は、実務で使うことになったらまた戻ってこようという気持ちでサラッと読んだ。
  • 触ったことがある技術とない技術で、読んだときの理解度が全然ちがうなと思った。
  • 輪読会についての感想は以下にまとめた。 saki-htr.hatenablog.com

参考書籍・記事

TwitterのURL設計を通して学んだこと

Web

フィヨルドブートキャンプの「TwitterのURLを設計する」という課題を合格したので、URL設計について学んだことをまとめた。

URL設計とは

1. リソースにどんな名前をつけるか(どんなURLにするのか)
2. 決めたURLに対して、どのHTTPメソッドを使うか

を決めること。

例

Method Path Description
GET /foo fooの一覧を表示。
POST /foo fooを受け取って追加する。
DELETE /foo/123 fooのidを受け取って削除する。
GET /bar barの一覧を表示。

URL設計について書く前に、リソース,URL,HTTPメソッドについて説明する。

URLとは、リソースに名前を付けたもの

リソースとは

  • Web上に存在する、名前をもったありとあらゆる情報。

  • URLと聞くと、Webページのアドレスを思い浮かべがちだが、他にも色々ある。
    例えば、Web上にある、

    • 写真
    • 文献・論文
    • 自分が登録したブックマーク
      なども全てリソースである。

  • リソースは、人の名前などと違って必ず一意の名前(その情報だけを指す名前)でなければならない。

URLとは

  • リソースに名前をつけたもの。
  • URLの基本的な仕様:uriスキーム/ホスト名/パス。もっと複雑な仕様もある。
  • TwitterのURL設計の課題では、このパスの部分を設計した。
  • ホスト名が一意であること & URLがそのWebサービスの中で一意になるように設計することで、リソースは世界で一意になっている。

HTTPメソッドとは

  • WebブラウザからWebサーバに対してのお願い。
  • 正式名称:HTTPリクエストメソッド

リクエストのどこに当たるのか

(HTTP入門 - とほほのWWW入門 より引用)

  • リクエストは以下の3つの部品から構成されている。
    １． リクエストライン
    ２． リクエストヘッダ
    ３． リクエストメッセージボディ

  • この２． リクエストヘッダの中にHTTPメソッドが含まれている。
    メソッド パス名 HTTP/バージョン

HTTPメソッド一覧

  • お願いには色んな種類がある。
メソッド 何をするか
GET リソースの取得
POST 子リソースの作成、リソースへのデータ追加、その他処理
PUT リソースの全部更新、リソースの作成
PATCH リソースの部分更新
DELETE リソースの削除
HEAD リソースのヘッダ (メタデータ)の取得
OPTIONS リソースがサポートしているメソッドの取得
TRACE プロキシ動作の確認
CONNECT プロキシ動作のトンネル接続への変更

※ LINK / UNLINK は、HTTP/1.1 ~廃止された。

POSTとPUTの違いは、URIの決定権

  • POST
    • サーバー側が決める
  • PUT
    • クライアント側が決める。
    • リソース名をクライアント側が指定して作成or更新をかけるメソッド。
    • 新規作成も更新も同じ書き方。
      例えば、PUT /articles/3421は新規作成かもしれないし、更新かもしれない。
      →リクエストされた時に、既存のリソースだったら更新し、新しいURLだったら新規作成する動作を行う。
    • 例:Wikipediaやscrapboxは、ユーザーが付けた記事のタイトルがそのままURLになっている。

(鬼滅の刃 - Wikipediaより引用)

  • Twitterの設計では、クライアント側がURLを決める必要性を感じなかったため、PUTを使った。

PUTは全部更新、PATCHは部分更新

PATCHメソッドは『Webを支える技術』には載っていなかったので、PUTとの違いを調べた。

  • PUTメソッド

    • べき等である
    • リソースの全部を更新
      ブログの記事に例えると、記事の内容を全部変えるのがPUT。

  • PATCHメソッド

    • べき等でない
    • リソースの一部分を更新
      ブログの記事に例えると、記事の台頭だけを変えるのがPATCH。
  • リソースの一部更新をする場合には、そのリソース (URL)へPATCHリクエストを投げるのが、最も自然な設計。

  • PATCHはべき等が必ずしも保証されていないメソッドのため、PUTとDELETEを組み合わせた設計のほうが、シンプルでねき等性のある設計になることもある。

  • Twitterの設計では、リソースを部分的に更新するような機能の設計はしなかったので、PATCHメソッドは使わなかった。

URL設計で気をつけること

  • パスのネストは最小限に抑える
  • 名詞を使う
  • ホスト名がこの世に一意であることと、URLが一意であることで、リソースは世界で一意となる。なので、URLを設計する時は、一意を示す設計をしなくてはいけない。
  • メソッドとパスの掛け合わせが重複しないようにする

メソッドとパスの掛け合わせが重複しないようにする

最初、以下のように提出した(一部抜粋)

Method Path Description
GET /user_id ユーザーを表示する
GET /tweet_id ツイートを表示する

レビューで以下のようにご指摘をいただいた。

  • このuser_id, tweet_idには、シンプルに考えると数字が入ってくる。
  • ユーザーのプロフィール画面を表示するURLと特定のツイートを表示するURLは別物だが、数字を入れてみると、URLとメソッドの掛け合わせが重複してしまうことが分かる。
Method Path Description → 数字入り想定Path
GET /user_id ユーザーを表示する → /128
GET /tweet_id ツイートを表示する → /128
  • この設計は一見、/user_idと/tweet_idで区別できているように見えるが、リクエストを処理するサーバにとってはまったく同じものに見えて区別ができない。
  • この問題を解決するために、サーバーがどのテーブル(リソース)を参照すれば良いか把握できるようにしてあげる必要がある。

このため、最終的に以下の設計にした。

Method Path Description
GET /users/:user_id ユーザーを表示する
GET /tweets/:tweet_id 特定のツイートを表示する

これなら、idの部分が重複しても、

  • /users/123
  • /tweets/123

となり、区別できる。

感想

  • 最初、Twitterの何がリソースに当たるか分からず、混乱した。
  • ツイートの新規作成画面を取得するリクエストと、ツイートを行うリクエストは、ブートキャンプの日報作成時のURLを参考にさせていただいた。
  • URL設計は、Sinatraのメモアプリ作成課題でも行うので、大事。
  • 設計はコードを書く時と同じで正解が一つでないので、
    課題修正時に、「なぜその設計にしようと思ったか？」を述べるようにしたら、メンターさんから、以下のように仰っていただけたのが嬉しかった🥰
    • 理由を述べることができるというのはとても大事な能力
    • ぜひ今後も「どうしてこういう設計/実装になったの？」と聞かれた時に答えられる姿勢で進めてほしい

参考書籍・記事

『Web技術の基本』を読んで学んだこと

読書ノート 輪読会

f:id:Saki-Htr:20210228162526p:plain


フィヨルドブートキャンプで、「Webを支える技術 -HTTP、URI、HTML、そしてREST」(以下、「Webを支える技術」)を読むという課題があったが、必要な前提知識に不足があり、理解が難しかった。

この本が難しい場合は『イラスト図解式 この一冊で全部わかるWeb技術の基本』(以下、「Web技術の基本」)が、イラストが多く最初にイメージを掴むのに最適とアドバイスをいただいたので、そちらを先に読むことにした。

www.amazon.co.jp

読み終わったので、読んだ中で学んだこと・調べたこと、感想を書いた。


<<無断転載にならないよう気をつけて書いたつもりですが、もしご指摘等ありましたら修正あるいは削除させていただくつもりです>>


本の構成

ch1. Web技術とは
ch2. Webとネットワーク技術
ch3. HTTPでやりとりする仕組み
ch4. Webのさまざまなデータ形式
ch5. Webアプリケーションの基本
ch6. Webのセキュリティと認証
ch7. Webシステムの構築と運用

ch1. Web技術とは

学んだこと

  • HTMLを人が見やすいように変換しているのは、Webサーバーではなく、Webブラウザ。

Webページが表示される流れ

  • 一度のコンテンツ転送で送られてくるファイルは1つ。
  • 画像など他のファイルがそのコンテンツに埋め込まれていて、転送が必要になったときはもう一度Webサーバーに要求してファイルを取得する。
  • 疑問:例えば、そのWebページに画像のファイルが１０枚あったら、コンテンツに1回要求+画像ファイルの要求10回で11回要求するということか？
    →以下の記事によれば、読み込むファイル1つにつき、HTTPリクエストが1回増えてしまうため、ファイル数が多いほど、表示までの時間が遅くなってしまう とあるので、やはり、ファイルの数の分リクエストとレスポンスが行われているようだ。

なぜ全てのサイトがSSL化しないのか？

調べたこと

教わったこと

この疑問についてtechplay女子部のエンジニアの方が答えてくださったので、以下にまとめた。

→まとめると、今はSSL化することが当たり前で、していないサイトはほとんど無い。

CGIの仕組み

普通のホームページはスーパーで売っているお寿司と同じです。作り置きです。CGIでは、注文が入ってからホームページのファイルを作ります。
１．ホームページを見る人の注文をWebサーバ上にあるプログラムが受ける
２．注文を受けたプログラムが何かお仕事をする
３．注文を受けたプログラムがホームページのファイルを作って、ホームページを見る人に渡してあげる
の流れですね。
この流れを実現するためのあれやこれやがCGIです。

  • 注意:CGIはWebサーバ上でプログラムを動かすための「仕組み」であって、プログラム自体を表す言葉ではない

クライアントサイド・スクリプト

どんなプログラムかイメージしづらかったので、パスワードを登録する時に例えて考えた

  • 新しいWebサービスを使うために新規ユーザー登録をするとき、大抵は「パスワードの文字数は8文字以上、大文字小文字を混ぜる」などの条件がある。
  • クライアントがその条件を満たしてパスワードを設定できたかどうかは、誰が判断しているのか?
  • Webは同時に何百人もの人がアクセスしてくるので、サーバにやらせるのは非効率。
  • Google Chrome、Internet Explorerなどのブラウザが、送られたプログラムを解析し、ユーザが入力したデータなどをチェックしてからサーバへ送信している。
    つまり、ユーザーがパスワードを条件通りに入力したかチェックしているのは、ブラウザ。
  • このチェックしているプログラムが、クライアントサイド。スクリプト。

RESTful(RESTっぽい)とは

  • RESTは、「これが REST な実装である」という厳密な定義があるわけではない。
  • REST はアーキテクチャスタイル。スタイルなので、「REST っぽい」「REST っぽくない」といった語られ方をする。

考えたこと

  • HTMLを人が見やすいように変換してくれているのが誰かは考えたことがなかった。なんとなくWebサーバーがやっていると思っていた。
  • SSL化の背景についてここまで深く知ることは自力では不可能だったと思うので、教えてくださったエンジニアの方に深く感謝。今使われている技術がどういう背景で繁栄していったのかを知るのは楽しい。

ch2. Webとネットワーク技術

学んだこと

HTTP

TCP/IP

  • TCP/IP(プロトコルの集まり)は、役割ごとに4つの階層に分かれる。レイヤー1~4。
    クライアントとサーバーの両方にこの階層があり、同じ階層同士でプロトコルに従った処理をしている。
  • 処理の流れ:レイヤー1から処理が始まって、レイヤー1→2→3→4とデータが渡されていく
  • 階層を7つに分けた考え方もある=OSI参照モデル

IPアドレス/ドメイン

考えたこと

  • メンターさんに、TCP/IPの階層についてお聞きしたら、
    • Webエンジニアとして働く上では、「アプリケーション層/HTTP」の部分を理解していればOK
    • 他の階層については深く理解している必要はなく、階層になっているということが分かっていればOK

とのことだったので、今は、「階層に分かれている」ということを覚えておく。

ch3. HTTPでやりとりする仕組み

学んだこと

HTTPメッセージ

  • HTTPメッセージ=HTTPリクエストとHTTPレスポンスの2種類

HTTPリクエスト/HTTPレスポンス

  • HTTPリクエストの構成は、3つの構成でできている。
    リクエスト行/(メッセージ)ヘッダー/メッセージボディ
    • リクエスト行:どうしたい
    • ヘッダー:何を
    • メッセージボディ:どんな方法で
  • もし要求して応答されたwebページを解析したときに、画像のリンクがあったら、もう一度要求を送る。

f:id:Saki-Htr:20210227110159p:plain (HTTP入門 - とほほのWWW入門より引用)

HTTPメソッド

  • HTTPリクエストメソッド:簡単に言うと、WebブラウザからWebサーバに対しての命令(リクエスト)。
  • リクエスト(命令・お願い)には色んな種類がある。
  • Webサイト閲覧で主に使うのはGETとPOST
  • 主に使われるメソッド
メソッド 動作
GET ページの取得を要求。WebブラウザからWebサーバに渡す値をURLの後ろにくっつけて送るやり方
HEAD ヘッダのみの要求
POST データをwebサーバーに送信
PUT webサーバーが保管してるコンテンツのアップロード(書き換え)
DELETE 指定したデータを削除
CONNECT SSL

HTTPバージョンの変遷

HTTP/1.0以前

  • リクエストを送信するたびにコネクションを確立し、レスポンスでデータを送った時にコネクションを閉じていた。
  • つまり、画像が埋め込まれていたらそのたびにリクエストを送る仕様になってるので、たくさん画像が埋め込まれているとリクエストの回数分だけコネクションの確立&閉じるをしなければならなかった。=効率が悪かった!

HTTP/1.1~

  • コネクションを継続利用できる、「HTTPキープアライブ」ができた。
  • HTTPパイプライン:複数のリクエスト&レスポンスを同時並行で行う。

HTTP/2

  • HTTP/2はgoogleが提案したSPDYという通信の高速化を目的としたプロトコルが土台。
    = HTTP/2の高速化を担う部分はほぼSPDYの機能を使っている。
  • 2での改良点①
    • 1.1のHTTPパイプラインは、HTTPリクエストの順番通りにレスポンスを返す。
    • つまり、1つのレスポンスの処理が重いと遅くなってしまう(高速道路で渋滞が起こっているイメージ)という問題があった。
    • この解決のために、コネクション上に仮想的な通信経路=ストリームを作った。
  • 2での改良点②
    • データのやりとりがテキスト形式→バイナリ形式に。前はテキスト形式だったので、バイナリ形式のデータを変換するのに負荷がかかっていた。
      • バイナリ形式のデータとは:コンピュータが直接的に処理するために２進数で表現されたデータ
    • そのため、ヘッダー情報を、2回目のやり取りからは追加情報(差分)だけ送るようにした。
  • 2での改良点③
    • 前はブラウザからリクエストが来たときに、画像が埋め込まれていたらその都度リクエスト&レスポンスのやり取りをしていた。
    • サーバーが、リクエストが来たときに必要なファイルを判別して、画像などのファイルもすべて返すようになった。(サーバープッシュ)

HTTP/3

  • 本には載っていなかったが、調べたら、HTTP/3がリリースされていた。
  • HTTPはステートレスなプロトコル。それをステートフルにしてくれるのがCookie。
    例:ショッピングサイトのカートに入れた商品を次にログインしたときにも覚えてくれる。
  • Cookieが使用される目的は大きく分けて次の２つ
    1. Webサイトでユーザー情報を保存し、利便性を向上する
    2. ユーザー情報を取得し、広告配信に利用する
  • 仕組み
    1. ブラウザが初めてサーバーへ接続
    2. サーバーが、ブラウザに対してレスポンスを返す時に、ブラウザに保存しておいてほしい情報をCookieとして返す。 HTTPレスポンスに、set-cookieヘッダーを含めることで、Cookieを送信できる。
    3. 2回目以降、ブラウザはサーバーへ接続した時、HTTPリクエストにCookieヘッダを含めることで、Cookieを送信する。

セッション

  • セッション:クライアントがWebサーバーに接続してから切断されるまでの一連の行動を表す。
    クライアントとサーバーで通信を行う場合、クライアントからサーバーへ接続した時点でセッションが始まり、サーバーから切断するとセッションが終了する。この一連の流れを管理することをセッション管理という。
  • 例えばECサイトには、商品を探し、カートに入れ、購入するという一連の流れがある。このように同一利用者からのアクセスを関連性のある一連のアクセスとして扱いたい場合、Cookieを使ってセッション管理が行われる。
  • セッションID:一連のやりとり（セッション）を識別するための一意の数字。銀行の受付番号と同じ。セッションIDをクッキーに格納してやりとりをすることによってステートフルな通信ができる。
  • 各セッションにはIDが割り振られている。
  • セッションのデータはサーバーに保存され、セッションIDはブラウザに保存される。
    ブラウザがサーバーにリクエストする時、セッションIDを渡す→サーバーがIDに対応したデータを返す。
  • Cookieでユーザーの判別が行われ、セッションによってそのユーザーがとった行動と結びつけられることで、「通販サイトのカート内商品の保持」といった機能が実現される。

Cookieの問題点

  • Cookieは便利だが、プライバシー面・セキュリティ面において注意しておくべき点もある。
  • Tracking Cookie（トラッキングクッキー）
  • セッションハイジャック
    Cookieの識別子が漏えいする:右矢印:CookieにはサイトのセッションIDとともに、ログイン情報が含まれていることがある:右矢印:情報自体がSSLなどで暗号化されていても、セッションIDさえわかってしまえばサーバーに送ることで、ログイン状態が再現されてしまう。

考えたこと

  • HTTPが登場したのは1990年代らしい。私が生まれたのが1995年なので、想像していたよりも最近で驚いた。
  • HTTPの進化に感動した。私が小学生の時に父が使っていたPCは、Webページを表示するのにとても時間がかかり、画像も少しずつジワジワと読み込んで表示されていた。今はそんなことは有り得ず、wifiなどのネット回線に問題がなければ、たくさん画像が使われたWebページでも一瞬で表示できる。今ネットを便利に使えているのは、HTTPの進化のおかげなのだな、と思った。
  • HTTPのバージョンを知る方法を調べた。
    デベロッパーツールを開き、networkタブのProtocolを見ると、バージョンが分かる。

f:id:Saki-Htr:20210227112606p:plain

ch4. Webのさまざまなデータ形式

学んだこと

スクリプト言語

フィード

  • webサイトなどの更新履歴を配信するためのファイル。中身はハイパーリンクの集まり。
  • ブログやニュースサイトで使われる
  • webサイトにアクセスすることなく、最新情報をチェックできる

フィードリーダー

  • フィードを取得&管理するためのソフトウェア
  • お気に入りのwebサイトを登録しておくことで、わざわざそのサイトにアクセスしなくても最新情報や更新情報をチェックできる便利な情報収集ツール
  • ウェブサイトの見出しや要約、更新情報を記述したフィードを巡回・受信し、一覧表示するソフトウエア。RSS形式のフィードを扱うRSSリーダーを指すことが多い。
    = RSSリーダー

フィードリーダーは現在は衰退している

YouTubeやニコニコはストリーミング配信ではないのか

  • 本では、

YouTubeやニコニコ動画などの多くの動画配信サービスはプログレッシブダウンロード配信

と説明されていたが、ストリーミング配信ではないのかと疑問に思ったため、調べた。

3つの配信方法の特徴・違い

  • 音声･動画の配信方法は3つある。
  • ダウンロード配信
    • ダウンロードを全部完了するまで再生できないが、完了すればいつでも再生できる
    • 例：Amazonプライムの動画をDLした時、途中までしかできていないと視聴することができない。
  • プログレッシブダウンロード配信
    • ダウンロードしながら再生
    • 疑似ストリーミング
    • 配信したファイルはユーザー側に残る
  • ストリーミング配信
    • ファイルを細かく分割し、細切れにしたデータをユーザーに配信して再生する
      例:ニコニコ生放送などのライブ配信
    • プログレッシブダウンロード配信との大きな違いは、動画データを端末にダウンロードさせない点。
    • 利用者のパソコンやタブレットに動画データが残らないから情報漏えいの心配がなく、セキュリティ的にとても安心な配信。

→YouTubeを視聴する時に、見たい動画のURLや配信ページにブラウザで接続した時にしか視聴できないので、「いつでも再生できる」という説明が理解できなかった。ストリーミング配信ではないのか？

YouTubeを調べてみた

  • YouTubeで動画を見ると、映像の下に赤いラインとグレーのラインがある。赤いラインは再生した部分を示し、グレーの部分はダウンロードした部分を示している。 →このグレーの部分は、ダウンロードしている部分だった。
    f:id:Saki-Htr:20210227124307p:plain

  • 濃いグレーの部分は、まだダウンロードが完了していない部分。ダウンロード配信では、全部ダウンロードが完了していないと、視聴することができないので、YouTubeはダウンロード配信ではない。

  • よって、YouTubeやニコニコ動画は、プログレッシブダウンロード配信であることが分かった。
  • プログレッシブダウンロード配信も動画データが一時的に端末へ保存されているので、目に見えづらかっただけで、YouTubeを視聴している時に、一時的にスマホやPCに動画が保存されていることが分かった。

考えたこと

  • このチャプターでは、webで使われている様々なデータ形式について学んだ。学習でさわったことのあるHTMLやCSSについてはすんなり理解できたが、この本で初めて知ったJSON,DOM,マイクロフォーマット,フィードなどは、触ったことがないので、読んでもイメージしづらかった。実際に学習や仕事でさわることになった時に、また読んで理解を深めたい。
  • 自分が使っていたAmazonプライム,Netfrix,YouTubeなどの動画配信サービスの配信方法が何かについて、考えるのが面白かった。

ch5. Webアプリケーションの基本

学んだこと

Webクライアント

  • Webクライアント = Webブラウザのみを指すと勘違いしていたので、調べて整理した。
  • Webクライアントとは
    • Webサーバー（Wepアプリケーション)にリクエストを投げるプログラム。
    • ブラウザ以外でも、http(s)で通信しているものは全Webクライアント。
      1番使われているものはWebブラウザだが、スマホアプリ、WIndowsやMacの専用アプリケーションなど、WebサーバーとやりとりしているものはWebクライアント。
    • つまり、Webブラウザ=Webクライアントでなく、WebブラウザはWebクライアントの(代表的な)一種。

クライアントプログラム

CDN

  • CDNが何か、本の説明だけでは理解できなかったので、調べたことを整理した。

  • インターネットの世界にも現実世界と同じように「距離」の概念がある

  • 自分の使っているwebブラウザと相手のwebサーバーの距離が近ければ、それだけwebページを早く見られる。
  • 世界各地にwebサーバーを設置し、大元のwebサーバーからwebページのファイルをコピーしておく(お互い連携している=1つのネットワーク)
  • これによって、ホームページを見る人は、自分の近くにあるWebサーバからホームページのファイルを受け取れる。
  • このwebサーバーが集まったネットワーク(世界各地に分散されたキャッシュサーバーの集合体)をCDNという！

Ajax

  • 同期通信には、「リクエストを送ってレスポンスがかえってくるまで、クライアントは待つことしかできない」という欠点がある。
  • Ajaxという技術では、JavaScriptがクライアントとして直接webサーバーと通信をする。必要なデータだけやり取りするため、同期通信よりもサーバーへの負担が少なく済む。
  • JavaScriptのおかげで非同期通信が可能。
  • レスポンスを待つ間も、レスポンスに左右されない箇所のHTMLを更新したり、ユーザーからの入力を受け付けられたりするなど、レスポンス待ちの時間を有効活用できる→ページの更新が早くなる。

Googleマップの地図の表示部分で使われている

  • 具体的にAjaxがどのように使われているか疑問に思ったので、調べた。

  • Googleマップ地図をスライドすると、その先の地図が表示される。

  • これは、スライドしている間に足りない地図のデータをAjaxでリクエストしているから、ぬるぬると地図を動かすことができる。
  • 1回目の通信はリクエスト⇔レスポンス(同期処理)で行い、2回目からはAjaxという技術をつかって、JavaScriptに必要なデータ分だけを取ってきてもらう、という流れ。
  • もしAjaxがなければ、スライドする度にページを再読み込みする必要がある。

Web API

  • 本では、
  • ユーザーではなくプログラムが直接サービスを利用できるための窓口
  • アプリケーションがWebサーバーの機能を利用するためのインターフェース(接点)

と説明されていたが、意味が理解できなかったので、実際にWebAPIが使われているサービスを見て調べた。

  • 例えば、connpassというWebサービスを利用してイベントに申し込んだ時に、参加コメントをTwitterに投稿できる機能がある。

f:id:Saki-Htr:20210227132622p:plain

  • これは、コンパスがTwitterが提供している「ツイートする」WebAPIを利用しているため、ユーザーの代わりに事前にTwitterのWebサーバー(が提供してるWebAPI)からデータを取得することで、実現できている。
  • ユーザーはこれのおかげで、わざわざTwitterというWebサービスに自分で接続しなくても、connpassというWebサービス内から参加コメントをツイートすることができる。
    = 本の「ユーザーがWebブラウザから操作しなくても、アプリケーションが直接Webサービスを利用できます」という説明は、このことを言っている。

考えたこと

  • Googleマップを快適に使えているのはAjaxのおかげだったとは知らなかった。地図を移動する度に、ページを再読み込みしていたら非常に使いづらいと思うので、感謝。
  • 新しいことを学んだ時に、イメージが湧かない時は、実際のWebサービスのどの機能に当たるか、どこに使われている技術かを調べることで、理解を深められた。

ch6. Webのセキュリティと認証

学んだこと

  • すべての驚異や脆弱性への対策をするのは難しいので、一般的にはリスクによる損失の度合いを算出し、それに応じて優先順位を決めた上で対策する。

ファイアーウォールはどこに設置するのか

  • ファイアーウォールとは:企業などの内部ネットワークをインターネットを通して侵入してくる不正なアクセスから守るための防火壁。

  • 本の説明で、ファイアーウォールがシステムのどこに設置されているのか分からなかったので、調べた。

  • 外部ネットワークとDMZ、DMZと内部ネットワーク、それぞれの間にファイアウォールが入るような構造を作り、通信を仕分ける。

  • DMZとは
    • 外部ネットワークと社内ネットワークの中間につくられるネットワーク上の区域
    • 外部ネットワークからも内部ネットワークからもファイアウォールなどによって隔離されている。
    • 外部に公開することが前提となるWebサーバは、常にリスクに晒されている。もし、Webサーバーを社内ネットワーク(=内部ねっと)に置くと万が一乗っ取られたり（リモートハッキング）、悪意のあるマルウェアなどを組み込まれたりした場合、社内ネットワークに接続されているその他のサーバやパソコンがすべて被害を受ける可能性がある。
    • 何のためにあるのか？→危険な地域のすぐそばに大切なものを置いておくのは危ないので、何かトラブルが起きても大丈夫なように緩衝地帯を設けて、そこに大切なものを置かないようにするためにある。
    • ファイアウォールはDMZを置かない状態でも設置できるが、Webサーバと外部ネットワークの間に設置されるファイアウォールは広く開放されている状態で、警戒が緩く、外部からの攻撃に対して脆弱な状態。Webサーバが内部ネットワークに置かれていると、乗っ取られたWebサーバを踏み台にして内部ネットワークも簡単に攻撃を受けてしまうので、DMZが必要。

考えたこと

  • 自分が被害を受けたことがないのもあって、セキュリティについて深く考えたことがなかったが、ドコモ口座の不正アクセスなど、かなり身近な問題。
  • これから消費者側ではなくサービスを開発して提供する側を目指すので、きちんと学んでセキュリティ面も考えて開発ができるエンジニアにならねばと思った。
  • 個人情報の漏洩がどれくらいの頻度で起こっているか気になったので調べたら、知らないだけで意外と結構あった。自分の個人情報も気づいてないだけで結構抜かれているのではと怖くなった。

ch7. Webシステムの構築と運用

考えたこと

  • アプリケーション設計は、機能の一覧、アプリケーションの構成図、画面レイアウトなど表面的な部分の設計らしい。
    エンジニアとして就職したら、おそらく全部を自分でやるのでなく、
    • サーバーやセキュリティなどインフラをどうするかはインフラエンジニア
    • 機能の洗い出しなどはRubyを書いたりDB設計をするサーバーサイドエンジニア
    • 画面のデザインはWebデザイナー、マークアップエンジニア、フロントエンドエンジニア

が主に決めたり各々同士が話し合ったりして設計ができるのだろうか。 これら全部を一人でする経験ができる、自作Webアプリ開発のカリキュラムが楽しみだと思った。

この事件はプログラムに問題があったわけではなく、伝達ミスによるもののようだが、気をつけないとこういう事態もあり得るのだな、と教訓になった。

全体の感想

  • この本はTECHPLAY女子部の方と2人で輪読会を行って読み進めた。
    輪読会についての感想は以下にまとめてある。

saki-htr.hatenablog.com

  • 一つ一つの用語を見開き1ページに丁寧に解説をしてくれており、ページの半分は図で解説してくれているので、初心者の私にとってとても読みやすかった。 Webを支える技術で分からない用語があった時に、この本を辞書代わりにして読むと良さそうだと思った。