はじめに

FBC Press: Sinatra ― リクエストとレスポンスから理解する Web アプリケーション開発

本書は、プログラミングスクール FjordBootCamp（フィヨルドブートキャンプ） の教材として作成された、Sinatra を使って Web アプリケーション開発の基礎を学ぶ教科書です。

私たちは日ごろ、ブラウザを通してさまざまな Web アプリケーションを使っています。フォームに入力して送信すれば内容が保存され、リンクを開けば別の画面が表示されます。保存した内容を編集したり、削除したりすることもできます。こうした操作をするとき、その処理がどこで、どのように行われているかを意識する機会はあまりありません。

しかし、自分で Web アプリケーションを作るには、画面の裏で交わされるリクエストとレスポンスを理解する必要があります。ブラウザが何を送り、サーバーが何を返すのか。URL と Ruby の処理はどう結び付くのか。フォームから送った値はどこへ届くのか。こうした関係が分かれば、フレームワークが変わっても、動作を順に追えるようになります。

本書では、こうした Web アプリケーションの仕組みを、小さなアプリを自分で作りながら学びます。そのために使うのが、Ruby の Web アプリケーションフレームワークである Sinatra です。Sinatra の機能を網羅することではなく、Sinatra を通して Web アプリケーション開発の基礎を身につけることを目指します。

なぜ Sinatra で学ぶのか

Web アプリケーションフレームワークには、Rails のように多くの機能を備えたものもあります。それでも本書が Sinatra を選ぶのは、ここで学びたいことが「リクエストとレスポンスの往復」そのものだからです。

Sinatra は、小さなフレームワークです。たとえば get "/" do ... end と書けば、「GET / というリクエストに、この処理で応える」という対応が、そのままコードに表れます。URL と HTTP メソッド、そして Ruby の処理の結び付きが、余計な仕組みに隠れず目に見えます。

また、Sinatra のアプリは小さく保てます。本書では、映画の情報を登録したり閲覧したりできる「映画図鑑」を作ります。その中心となる Ruby のコードは、基本的に app.rb という一つのファイルに収まります。アプリ全体を一度に見渡せるので、一つのリクエストが届いてからレスポンスが返るまでを、最初から最後まで自分で追えます。ブラウザとサーバーの間で実際に何が起きているのかを確かめながら学ぶ本書にとって、この見通しのよさは大きな利点です。

Rails のような大きなフレームワークは、多くの処理を自動で行い、開発を速くします。その一方で、リクエストがどう処理されるのかは、便利な仕組みの内側に隠れます。往復の流れをまだつかんでいない段階では、その自動化がかえって理解を遠ざけてしまうことがあります。まず基礎を確かめるには、動きが見えやすい小さなフレームワークが向いています。

そして、Sinatra で身につけた「ブラウザ・Web サーバー・アプリケーションの往復」という見方は、Sinatra だけのものではありません。Sinatra も Rails も、Rack という共通の土台の上で動いています（第2章で説明します）。ここで学ぶ関係は、後で Rails など別のフレームワークへ進んでも、そのまま生きてきます。

本書で作る映画図鑑

本編では、映画の情報を登録する「映画図鑑」を一章ずつ作ります。映画は、タイトル、監督、公開年、ジャンル、紹介文を持ちます。完成時には、次の操作ができるようになります。

登録されている映画の一覧を見る
一件の映画の詳しい情報を見る
新しい映画を登録する
登録した映画を編集する
登録した映画を削除する

これらの操作の仕組みに集中できるよう、映画のデータは JSON ファイルへ保存します。ログイン機能、画像のアップロード、外部の映画 API、データベースは扱いません。多くの機能を備えた完成品を作ることよりも、一つのリクエストがどのように処理されるかを追える大きさに保つことを優先するためです。

映画図鑑に一つずつ機能を加えながら、それを支える Web の仕組みを学びます。具体的には、URL と処理を結び付けるルーティング、ERB テンプレート、フォーム、データの作成・読み取り・更新・削除（CRUD）、JSON 保存、HTTP メソッドを扱います。さらに、フォームの再送信を防ぐ PRG パターン、利用者の入力を安全に表示するための XSS 対策、見つからないことを伝える 404 ページも実装します。最後には、同じ知識を別の題材へ応用できる状態を目指します。

手を動かして作るハンズオン

本書はハンズオン形式です。完成したコードを読むだけの本ではありません。第2章で自分の作業用ディレクトリを用意し、そこへ一つずつファイルを作り、コマンドを実行しながら、映画図鑑を少しずつ育てていきます。

各章では、追加・変更するコードを示し、そのたびにアプリを動かして結果を確かめます。実際に手を動かして同じ操作を再現することで、コードの一行が画面や通信のどこに現れるのかを、自分の目で確認できます。読み進める前に、まずはターミナルとエディタを開ける状態にしておいてください。

想定する読者

本書は、次の内容を学習済みの方を対象にしています。

Ruby の基本文法
HTML と CSS の基礎
Git と GitHub の基本操作

Web アプリケーション開発と Rails の経験は前提にしません。REST の事前学習も必須ではありません。どの URL と HTTP メソッドを使うかは、映画図鑑の実装に必要な範囲で説明します。

実際の通信を見ながら進める

本書では、Google Chrome の DevTools にある Network パネルを繰り返し使います。コードと画面だけでなく、ブラウザが送った HTTP メソッド、サーバーが返したステータスコード、リダイレクト前後のリクエストを観察するためです。Firefox などのブラウザにも同様の機能がありますが、画面上の名称と操作手順は Chrome を基準にします。

コードを書いたら、まず動かして終わりにせず、Network パネルでその動作を確かめます。そこに表示される情報が、Ruby のコードとブラウザの画面をつなぐ手掛かりになります。