はてなブックマーク

ブラウザからサーバにリクエストが届く SSRに必要なPropsをリクエストする Propsを取得する SSRを実行する ブラウザにHTMLでレスポンスを返す ブラウザ上でCSRを実行する レンダリング結果をマウントする マウント後、ブラウザ上で副作用を実行する 以下ではそれぞれの過程について解説をします。 ブラウザからサーバにリクエストが届く ブラウザでURLにアクセスをするとサーバにリクエストが届きます。 SSRに必要なPropsをリクエストする サーバでUIを構築するにあたり、必要となるPropsをリクエストします。 PropsのリクエストはgetServerSideProps()で行います。 API経由でデータを取得している場合はAPIサーバへリクエストすることになります。 Propsを取得する リクエストしたPropsが返され、SSRの準備が整います。 SSRを実行する 取得したP

JWTはtokenというキー名でCookieに保存する JWTの署名アルゴリズムはRSA256を利用する JWTのエンコードでは事前に作成したRSA暗号の秘密鍵を利用する JWTにはユーザーIDを保存する JWTの有効期限は14日とする 下準備 ユーザーの作成 認証対象のユーザーを作成します。ActiveModel::SecurePassword::ClassMethodsのドキュメントに従い、has_secure_passwordでパスワード管理されたデータを作成します。 Gemfile gem "bcrypt" ### モデルのマイグレーション $ rails g model user name email password_digest $ rails db:migrate user.rb class User < ActiveRecord::Base has_secure_pass

relative/absoluteを利用する方法 Flexbox化し、『align-items: center』を適用する方法 上下に均等なpaddingを確保する方法 table-cell化し、『vertical-align: middle』を適用する方法 line-heightで高さを確保する方法 以下ではそれぞれの方法について紹介します。 relative/absoluteを利用する方法 親要素で囲み、親要素をposition: relative・コンテンツの要素をposition: absoluteとすることで天地中央揃えを実現する方法です。 absoluteとrelativeを利用した上下左右の中央よせ方法で紹介した通り、relative/absoluteを利用した中央よせには『marginプロパティを利用する方法』と『transformプロパティを利用する方法』の2つがあります

2021年2月現在、Reactの公式ドキュメントで紹介されているチュートリアルのサンプルアプリケーション（三目並べ）はJavaScriptで書かれています。 今回、サンプルアプリケーションのTypeScript版を作成したので紹介します。 なお、サンプルアプリケーションの概要を知っている前提で話を進めますので、概要を知らない方は公式ドキュメントとあわせて読んでいただければと思います。 アプリケーションのひな型をローカル環境に準備する create-react-appを利用してアプリケーションのひな型を作成します。 --templateオプションを利用するとcreate-react-appで作成されるひな型のカスタマイズができます。 TypeScriptベースのアプリケーションを作成する場合は--template typescriptを利用します。 なお、テンプレートはnpm上にcra-te

REST APIを開発するにあたり、OpenAPI Specification(OpenAPI 3.0以前でいうところのSwagger Specification)をAPIの仕様書として利用している方は多いのではないでしょうか。 しかし、OpenAPI Specificationを仕様書として利用する場合、きちんとメンテナンスを続けなければ実際のAPIの挙動と仕様書の内容に違いが生まれてきてしまいます。 committeeを利用することで、OpenAPI Specificationと実際のAPIの挙動が一致しているかテストコードで検証できます。 今回はcommitteeの導入手順と、実際にテストコードでcommitteeを利用する方法について紹介します。 committee-railsは0.5.1、committeeは4.2.1を利用します。 検証用のAPIは、APIモードで作成したRai

複合インデックス（結合インデックス）とは複数のカラムを組み合わせたインデックスのことをいいます。 検索やソート条件で一緒に利用されるカラムに対して複合インデックスを作成することでクエリの高速化が期待できます。 複合インデックスを正しく作成するにはB-treeインデックスの理解が必須です。 今回は複合インデックスを正しく作成するために必要な基礎知識について紹介します。 複合インデックスには順序がある ユーザーテーブルに存在するlast_name, first_name, ageのカラムに対して複合インデックスを作成する場合を考えてみます。 (last_name, first_name, age)の順で複合インデックスを作成した場合、インデックスの構造は以下のようになります。 (age, last_name, first_name)の順の場合は以下のようになります。 複合インデックスの構造は先

なお、serversはredis://<ホスト名>:<ポート番号>/<db番号>/<ネームスペース>という命名規則です。SSL通信でRedisに接続する場合はredisの部分をredissにします。 たとえば以下のようになります。 config/initializers/session_store.rb Rails.application.config.session_store :redis_store, servers: %w(redis://localhost:6379/0/session), # ホスト: localhost（docker環境の場合はredisコンテナ名） # ポート: 6379 # DB: 0番 # ネームスペース: session expire_after: 90.minutes, # 有効期限90分 key: "_#{Rails.application.cla

こんにちは。Enjoy IT Life管理人の仁科(@nishina555)です。 NuxtにはSSR（Server Side Rendering）、SSG（Static Site Generator）1、SPA（Single Page Application）の3種類のモードが用意されています。 また、本番環境でNuxtアプリケーションを実行するにあたりnuxt buildとnuxt generateの2つのコマンドが用意されています。 nuxt buildはアプリケーションをWebpackでビルドし、JSとCSSをミニファイするコマンド2です。ビルドファイルの出力先は.nuxt配下です。 nuxt generateは静的ウェブサイトへデプロイする静的ファイルを生成するコマンド2です。静的ファイルの出力先はdist配下です。 静的ウェブサイトのホスティングサービスではNetlifyやAm

こんにちは。Enjoy IT Life管理人の仁科(@nishina555)です。 Railsアプリケーションを実際にサービスとして稼働させるためにはWebサーバーとの連携は必須です。 今回はPumaを利用してWebサーバー（nginx）とRailsアプリケーションを連携させる手順について紹介します。 Pumaの設定方法や、Railsとnginxの連携方法について知りたい方の参考になればと思います。 検証サーバーはConoHaのVPSを利用して作成をし、OSはCentOS8とします。 今回の検証環境について 各種バージョンは下記の通りです。 $ cat /etc/redhat-release CentOS Linux release 8.1.1911 (Core) $ node -v v12.18.0 $ ruby -v ruby 2.7.1p83 (2020-03-31 revision

バージョンは、WordPressは5.2.2、MySQLは5.7を利用します。 wordpressコンテナとdbコンテナは複数のコンテナを起動設定を一元管理できるDocker Composeを利用して連携させます。 参考: 検証環境（WordPressのDocker環境）の構築手順 検証環境として利用するWordPressのDocker環境の構築方法について紹介します。 実際に手元でデータボリュームのバックアップ・リストアを確認したいという方は参考にしていただければと思います。 環境構築手順とはいっても、実質docker-compose.ymlを用意するだけですので準備は非常に完了です。 まずは作業用ディレクトリを作成と移動をします。 $ mkdir my_wordpress && cd $_ 作業ディレクトリ配下に以下のようなdocker-compose.ymlを作成してください。 do

Dockerは簡単に環境の破棄・作成ができるのがメリットですが、一方でデータベースのように削除されると困る情報もあります。 そこで今回はコンテナが削除されてもコンテナ上で作成されたデータを保持し続ける方法（データの永続化）について紹介をしたいと思います。 以下のような疑問を持たれている方の参考になればと思います。 データの永続化とは？なぜ永続化が必要？ データの永続化とは、Dockerコンテナ上で作成されたデータがコンテナ削除後も残り続けている状態のことをいいます。 データベースなど、コンテナを削除したときに一緒に削除されると困る情報に対してデータの永続化を行います。 では、データの永続化がされていないとどういったことが困るのでしょうか？ 例としてデータベースの情報が永続化されていないDocker環境を紹介します。 Docker環境にデータベースを作成し、以下のようにレコードを作成したとし

アプリケーションをDocker化するにあたりdocker-composeという言葉を聞いたことがある方も多いと思います。 今回、docker-composeを利用してDockerでRailsアプリの開発環境の構築したので、docker-composeを利用したRailsアプリを作成する手順と、Dockerファイルやdocker-composeの解説もしたいと思います。 なお、Railsアプリで利用するDBはMySQLを想定しています。 作成したDockerファイルの解説 DockerファイルとはDockerコンテナの構成内容が記述されたファイルのことです。 Dockerファイルの内容をもとにDockerイメージの作成が行われ、Dockerコンテナというインスタンスを起動させることで利用できます。 今回作成した、Railsアプリを実行させるためのDockerファイルは以下のようになります。

こんにちは。仁科(@nishina555)です。 Happy Hacking Keyboard(以下、HHKB)は高級キーボードの中でもっとも有名なキーボードの1つです。 特に、IT業界においてはエンジニアであればほんどの人が知っているといっても過言ではないでしょう。 HHKBはコンパクトでスタイリッシュな形が特徴的ですが、形状以外にもキーボードの配列や機能が特殊という特徴もあります。 僕はMacBook Proを愛用していたのですが、先日HHKBに乗り換えをしました。 購入したのはHappy Hacking Keyboard Professional BT US配列というBlue toothで接続するタイプのものです。

こんにちは。仁科(@nishina555)です。 みなさんはブログで『表(テーブル)』を利用することはありますか？ 表はわかりやすい記事を書くためにはなくてはならないものですし、実際自分も比較記事やスペック紹介記事などを書く時によく表を利用しています。 そんな便利な表ですが、パソコンで表示を確認していざブログを公開!でもスマホで見てみたら表が見切れてた！という経験はありませんか? 例えば、過去の記事で以下のような表を作成しました。 PCでみたときの表 プレビューもしっかり確認し、OKと思ったのですが、スマホで確認すると以下のように表が見切れていました。 スマホでみたときの表 今回は上記のようにスマホや幅の狭いブラウザで表が見切れてしまって困っているという人向けのCSSカスタマイズに関する記事です。 表がスマホで見切れないようにする対策方法として今回はレスポンシブ対応とスクロール機能の2つを