IP アドレスについてざっくりまとめました。 この記事は以下の構成になっています。 IP アドレスとは IP アドレスのバージョン IPv4 IPv6 IP アドレスの種類 グローバル IP アドレス プライベート IP アドレス IP アドレスの構造 ネットワーク部 ホスト部 IP…

Rails の Hotwire の概要 についてまとめました。 Hotwire とは Turbo とは Turbo の主要機能 Stimulus とは Hotwire の導入 Hotwire とは Hotwire（HTML Over The Wire）は、Turbo と Stimulus という 2 つのライブラリで構成される、シンプルで高速な Web …

Rails での日時の扱いをまとめました。 タイムゾーンとは Rails でのタイムゾーン Rails で日時を扱うクラス Time Date Datetime TimeWithZone データベースでの日時 タイムゾーンとは タイムゾーンとは、地球上の特定の地域や国の標準時を表すための概念。U…

個人的な Web アプリの開発の流れをまとめました。 要件定義を行う プロジェクト管理ツールで管理を行う データベース設計を行う ER 図を作る URL 設計を行う ワイヤーフレームを作る 画面遷移図を作る インフラ構成図を作る Github のリポジトリを作る Dock…

Ruby のテストフレームワークである RSpec のインストール方法、基本的な使い方、書き方をまとめました。 この記事は以下の構成になっています。 RSpec とは テストコードを書く流れ minitest と RSpec の比較 RSpec を導入する手順 RSpec の gem をインスト…

Amazon Web Services 基礎からのネットワーク＆サーバー構築を読んで学んだことをメモしました。 1 章 システム構築をインフラから始めるには ネットワークやサーバーの知識を身につければ障害が発生した時の原因を切り分けられ、システム全体での対応ができ…

IP アドレスとドメインを対応させる仕組みである DNS についてまとめました。 この記事は以下の構成になっています。 DNS とは ドメインの種類 DNS の仕組み 名前解決の流れ DNS とは DNS（Domain Name System）は、ドメイン（例：www.example.com）と IP ア…

SPA での認証と、Rails と React を使った SPA の具体的な認証方法についてまとめました。 この記事は以下の構成になっています。 従来の Web アプリの認証（セッション認証） セッション認証の流れ セッション認証の問題点 SPA での認証（トークン認証） ト…

Github Actions で React での ESLint、テスト の CI を構築する方法を簡単にまとめました。 前提として Docker で環境構築を行い、create-react-app で React を導入しています。 Github のリポジトリはこちら この記事は以下の構成になっています。 構築す…

Web アプリの認証と認可のついてまとめました。 この記事は以下の構成になっています。 認証とは 主な認証の種類 パスワード認証 二要素認証 Basic 認証 セッション認証 トークン認証 ソーシャルログイン 認可とは OAuth OpenID Connect 認証とは 認証とは、…

TCP/IP についてざっくりまとめました。 この記事は以下の構成になっています。 TCP/IP とは TCP/IP の階層モデル アプリケーション層 トランスポート層 インターネット層 ネットワークインタフェース層 具体的な通信の流れ アプリケーション層からネットワ…

CI/CD ツールである Github Actions についてざっくりまとめました。 この記事は以下の構成になっています。 Github Actions とは Github Actions の導入手順 設定ファイルを作成 ワークフローを定義 リポジトリにプッシュして動作確認 Github Actions とは …

Github Actions で Rails の CI を構築する方法をまとめました。 Github のリポジトリはこちら Docker で Rails 環境構築を行い、Rubocop と RSpec を導入している前提です。 この記事は以下の構成になっています。 環境 ディレクトリ構成 手順 CI の設定フ…

Web サーバーである nginx について簡単にまとめました。 この記事は以下の構成になっています。 nginx とは nginx の役割 nginx を使う手順 nginx の設定 Apache との違い Rails での Ngix nginx とは nginx とは、2004 年に開発されたオープンソースの Web…

Docker を使って Rails・PostgreSQL と React の環境構築を行う方法についてまとめました。 この記事は以下の構成になっています。 環境とバージョン ディレクトリ構成 一から環境構築を行う手順 ディレクトリを作成する docker-compose.yml を作成する Rail…

公開鍵認証について簡単にまとめました。 この記事は以下の構成になっています。 公開鍵認証とは 公開鍵認証のメリット 認証の流れ 公開鍵認証を設定する手順 クライアント側で公開鍵と秘密鍵のペアの生成 公開鍵をリモートサーバーに登録 秘密鍵でログイン …

Docker での Rails・PostgreSQL の環境構築をまとめました。 この記事は以下の構成になっています。 構築する環境とバージョン ディレクトリ構成 一から環境構築を行う手順 ディレクトリを作成する 必要なファイルを作成する Dockerfile を作成する docker-c…

SSH についてまとめました。 この記事は以下の構成になっています。 SSH とは SSH で接続する流れ SSH の認証方法 SSH とは SSH とは、Secure Shell の略で、ネットワークを通じて他のコンピュータに安全に接続するための仕組み。 主にサーバーに対して遠隔…

コンピュータのデータの単位と、n 進数についてまとめました。 この記事は以下の構成になっています。 コンピュータのデータの単位 ビット バイト n 進数 2 進数 10 進数 16 進数 進数の変換 2 進数 → 10 進数 10 進数 → 2 進数 コンピュータのデータの単位 …

Rails の認証機能を実装するための gem である devise のインストール方法、使い方をまとめました。 この記事は以下の構成になっています。 devise とは devise で作れる機能 devise を使う手順 gem をインストールする devise の設定ファイルをインストール…

Rails のアセットパイプラインについてまとめました。 この記事は以下の構成になっています。 アセットパイプラインとは アセットパイプラインが行うこと アセットパイプラインの仕組み アセットの管理 CSS JavaScript 画像 開発環境と本番環境での違い 前提…

React のデータフェッチングライブラリである、SWR と TanStack Query（TanStack Query）の基本的なデータ取得についてまとめました。 この記事は以下の構成になっています。 SWR SWR とは SWR を使う手順 SWR のメリット・デメリット TanStack Query TanSta…

Rails のモデルについて基本的な内容をまとめました。 この記事は以下の構成になっています。 モデルとは モデルファイルの作成方法 Active Record CRUD 処理 その他の ActiveRecord のメソッド バリデーション コールバック アソシエーション enum scope テ…

JavaScript の非同期処理についてまとめました。 この記事は以下の構成になっています。 非同期処理とは JavaScript はシングルスレッド 非同期処理とブラウザの仕組み 非同期処理の流れ 非同期処理を制御する コールバック関数 Promise async await 非同期…

React の基本的な概要をまとめました。 この記事は以下の構成になっています。 React とは フレームワークではなくライブラリ ページではなくコンポーネントで UI を構築する 状態を変更すると再レンダリングが発生する UI は命令的ではなく宣言的に記述する…

React で SPA を作るときに使うルーティングライブラリである React-Router についてまとめました。 この記事は以下の構成になっています。 React Router とは SPA のルーティングの仕組み React Router を使う手順 その他 リンクで画面遷移を行う 何らかの…

React で TypeScript を使うときの型定義についてまとめました。 この記事は以下の構成になっています。 React 特有の型の指定 コンポーネントの型 props の型 useState の型 イベントの型 どこまで型定義するか React 特有の型の指定 React では基本的に、…

TypeScript の基本的な型定義をまとめました。 この記事は以下の構成になっています。 型注釈 型推論 基本の型定義 プリミティブ型 文字列 数値 boolean null undefined 配列 オブジェクト 関数 高度な型定義 リテラル型 any 型 unknown 型 never 型 タプル …

Rails の Active Storage についてまとめました。 この記事は以下の構成になっています。 Active Storage とは Active Storage を使う手順 インストール マイグレーション モデルとの関連付け ビューファイルでfile_fieldを使って入力フィールドを作成する …

TypeScript の導入と基本的な設定 についてまとめました。 この記事は以下の構成になっています。 TypeScript とは TypeScript のメリット TypeScript を使う手順 npm でパッケージをインストールする コンパイルの設定をする 拡張子を.tsとしたファイルで T…