【Rails初心者向け】Cookieが動かない?後輩のSOSから学ぶ、APIモードでの解決策

こんにちは!Web開発の世界へようこそ!プログラミングを学び始めると、たくさんの新しい言葉や仕組みに出会いますよね。その中でも、ユーザーの情報を一時的に保存しておく「Cookie(クッキー)」は、ログイン機能などを作る上で欠かせない技術です。

先日、プログラミングを勉強中の後輩からこんな相談を受けました。

「フロントエンドとバックエンドを分けて開発してるんですけど、バックエンドでCookieがうまく設定できないんです…。何が原因なんでしょうか?」

後輩が開発を行っている環境はRuby on Railsでおこなっています。
ソースコードなどを見させてもらいながら会話をしましたが、どうやら、調べたサイトがBaseモードでの作成例だったらしく、Baseモードで作成していました。

後輩と色々と試行錯誤した結果、APIモードに切り替えて、必要な設定を正しく行うことでCookieが期待通りに動作するようになりました!

そこでこの記事では、

  • そもそもCookieって何のためにあるの?
  • Railsの「Baseモード」と「APIモード」でCookieの使い方はどう違うの?
  • APIモードでCookieを正しく使うためのポイントは?

といった疑問を、プログラミング初心者の方にも分かりやすく解説していきます。後輩が最終的にAPIモードで解決に至った経緯も踏まえながら、一緒にCookieの謎を解き明かしていきましょう!

Cookieってなに?Webサイトの「名札」みたいなもの

まず、Cookieがどんなものかイメージしてみましょう。

皆さんがWebサイトを見るとき、実はたくさんの情報がやり取りされています。でも、Webの基本的な仕組み(HTTPプロトコル)は、一度やり取りが終わると、相手のことを忘れてしまう性質を持っています。「さっきログインした人だ!」とは覚えていてくれないんですね。

そこで登場するのがCookieです。Cookieは、Webサイト側があなたのブラウザにそっと渡しておく小さな「名札」のようなものです。

次にあなたが同じWebサイトを訪れたとき、ブラウザはその名札をWebサイトに見せます。Webサイトは名札を見て、「あ、〇〇さんですね!」と、あなたのことを思い出せるわけです。

Railsの「モード」によってCookieの扱い方が変わる?

さて、ここからが本題のRuby on Railsの話です。Railsで新しいプロジェクトを作るとき、実は大きく分けて2つの「モード」があります。

  1. Baseモード (ActionController::Base): 昔ながらの、RailsがHTMLも全部作ってくれるようなWebアプリケーションを作る時のモードです。
  2. APIモード (ActionController::API): 最近増えている、Railsはデータ処理だけに専念して、見た目(フロントエンド)は別の技術(ReactやVue.jsなど)で作る場合のモードです。より軽量になっています。

このモードの違いが、Cookieの扱いに影響してきます。

BaseモードでのCookie:最初から使える、便利な道具箱のはずが…?

Baseモードでは、Cookieやセッション(ログイン状態などを管理する仕組みで、Cookieをよく利用します)を使うための道具(ミドルウェアと言います)が最初から揃っています。

コントローラーの中で cookiessession と書くだけで、簡単にCookieに値を保存したり、取り出したりできるはずです。

後輩は当初このBaseモードで開発していましたが、フロントエンドとバックエンドを分離した構成特有の設定(CORSやSameSite属性、フロントエンド側のリクエスト設定など)でつまずいてしまいました。もちろん、Baseモードでもこれらの設定を正しく行えばCookieは利用できますが、構成が複雑になりがちです。

expires` で有効期限を決めたり、`httponly: true` と設定してJavaScriptからの不正なアクセスを防いだり、`secure: true` と設定して安全な通信(HTTPS)の時だけCookieを送るようにしたりもできます。
# 例:ログイン時にユーザーIDをCookieに保存
cookies[:user_id] = { value: @user.id, expires: 1.hour.from_now }

# 例:セッションにユーザーIDを保存(こちらの方が一般的かも)
session[:user_id] = @user.id

APIモードでのCookie

APIモードは「データ処理の専門家」なので、ブラウザ向けの機能は最小限になっています。そのため、デフォルトではCookieを扱うための道具が含まれていません。

APIモードでCookieを使いたい場合は、自分で「Cookieを使いますよ!」と宣言して、必要な道具を追加してあげる必要があります。具体的には、`config/application.rb` という設定ファイルに以下のような記述を加えます。

# config/application.rb
module YourApp
  class Application < Rails::Application
    # ... (中略) ...

    # APIモードでもCookieとセッションを使えるようにするおまじない
    config.middleware.use ActionDispatch::Cookies
    config.middleware.use ActionDispatch::Session::CookieStore, key: '_your_api_session' # keyは任意の名前に
  end
end

この設定をして初めて、APIモードでも cookiessession が使えるようになります。 後輩のケースでは、この設定をAPIモードで行い、後述するフロントエンドとの連携設定を丁寧に行ったところ、無事にCookieが機能するようになりました。APIとしてRailsを使い、かつCookieも利用したい場合は、この設定を忘れないようにしましょう。

まとめ:APIモードでCookieを使いこなそう!

後輩のケースでは、RailsをAPIモードを利用することで問題を解決できました。

フロントエンドとバックエンドを分離した構成でCookieを扱うのは、最初は少し難しく感じるかもしれません。

今回の後輩のSOSと、APIモードでの解決策が、皆さんのCookieに関する理解を深めるきっかけになれば嬉しいです。焦らず一つ一つ確認していけば、きっと解決できるはず!応援しています!

ゼロからわかる Ruby 超入門 (かんたんIT基礎講座)

Ruby on Rails アプリケーションプログラミング