localhost以外のホスト名でローカル環境のRailsに接続する方法
http://localhost:3000で立ち上がっているローカル環境のRailsアプリケーションへ、任意のホスト名でアクセスできるようにする方法について紹介します。 今回は例としてhttp://api.local.e…
RubyRubyプログラミング
Ruby
RubyRails API(サーバサイド)でCookieを作成する方法
前回、RailsでセッションとCookieを操作する方法でRailsにおけるセッションとCookieの操作方法について紹介しました。 前回の記事のRailsアプリケーションはモノリス前提でしたが、今回はAPIモードでCo…
RubyRailsでセッションとCookieを操作する方法
セッションとはステートレスなHTTP通信においてステートフルを実現するための情報、Cookieとはブラウザに用意されたデータの保存領域のことをいいます。 セッションの保存先にはいくつか候補がありますが、例えばセッションを…
JavaScript【React】JavaScriptのイミュータビリティを理解して正しくState更新する
JavaScriptのイミュータブル（immutable）やミュータブル（mutable）の意味、ReactのState更新で重要なイミュータビリティ（immutability）について紹介します。 事前知識: データの…
JavaScript【JavaScript】オブジェクトの浅い比較(shallow compare)のロジックと比較の具体例
オブジェクトを浅い比較する際のロジックについて オブジェクトの浅い比較(shallow compare, shallow equal checking)がtrueになるケースは以下の通りです。 上記の『プロパティが一致』…
RubyRailsにおけるカスタム例外の定義方法パターン
前回、【Ruby】カスタム例外の作成と利用に関する基礎知識でRubyにおけるカスタム例外の基礎知識について紹介しました。 今回はRailsアプリケーションでカスタム例外を利用する際の定義パターンについて紹介します。 クラ…
Ruby【Ruby】カスタム例外の作成と利用に関する基礎知識
カスタム例外を作成する際はStandardErrorを継承する カスタム例外はStandardErrorを継承することで定義できます。 以下は一番シンプルなカスタム例外クラスの定義方法と利用方法の例です。 example…
Ruby【Rails】APIリクエストにIPアドレスの制約をつける方法
API開発において特定のIPアドレスからのアクセスのみ許可したいというケースがあります。 今回はプライベートIPアドレスからのリクエストのみ許可する非公開APIの開発を例にとり、APIリクエストにIPアドレスの制約をつけ…
RubyRailsの環境変数の作成方法3パターン(config_for/global/config)比較
Railsアプリケーションの環境変数の設定方法は、Rails標準のconfig_for、global gem、config gemの3つが主流です。 今回はそれぞれのケースでの環境変数の設定方法について紹介します。 co…
RubyRubyのthen(yield_self)の概要と具体的な使いどころ
then(yield_self)について thenはレシーバをブロックの引数として受け取り、ブロックの評価をレシーバに反映させるメソッドです。yield_selfはthenのエイリアス（等価のメソッド）です。 ### t…
RubyRubyでよく使うArray(配列)メソッドまとめ
map（collect） mapは各要素を変換して新たな配列を作成するメソッドです。collectはmapのエイリアス（等価のメソッド）です。 オブジェクトのプロパティや配列の要素から新たな配列を作成したい場合にmapが…
RubyRubyのfilter(select)とfind(detect)の違い
filter（select）について filterは条件を満たす全ての要素を取り出すメソッドです。selectはfilterのエイリアス（等価のメソッド）です。filterの例は以下の通りです。 > [1, 2, …
Ruby【Ruby】map/filter_map/flat_mapの概要と使い方
map（collect）について mapは各要素を変換して新たな配列を作成するメソッドです。collectはmapのエイリアス（等価のメソッド）です。 オブジェクトのプロパティや配列の要素から新たな配列を作成したい場合に…
Ruby【Ruby】複数の配列を1つの配列に結合するメソッドまとめ
concatメソッド concatは配列を自身の末尾に破壊的に連結するメソッドです。 concatを利用した配列の結合は以下の通りです。 > array1 = [‘a’, ‘b’] > array2 = [‘…
Ruby【Rails】『nilの場合は~』のリファクタリング5パターン
Railsアプリケーションで『nilの場合は~』を実装する際のリファクタリングについて紹介します。 今回は以下のようなパターンに分け、それぞれについて解説します。 『変数がnilの場合はデータをセットする』パターン 変数…
Ruby【Rails】Vonage Verify APIを利用した二要素認証(2FA)チュートリアル
Vonage Verify APIを利用して2FAが組み込まれたRailsアプリケーションを実装します。 今回紹介するサンプルアプリケーションは公式のチュートリアルをベースとしているので、あわせてご覧になってください。 …
git【Git】特定のブランチ以外を一括で削除するコマンド・スクリプト
ローカル環境にたくさんできてしまったブランチを整理するためのTipsを紹介します。 今回の対象はローカル環境のみです。 Gitブランチの削除方法のおさらい ブランチを削除するgitコマンド fooというブランチを強制的に…
Ruby【Ruby】sort_by/sortの概要と配列ソートの応用例
sortについて sortは配列を昇順でソートするメソッドです。要素の比較は<=>演算子（宇宙船演算子）が広く利用されますが、<=>演算子以外も利用できます。1 sortと<=>を組み…
Ruby【Ruby】ハッシュのtry(try hash)をdigで書き換える
「オブジェクトが存在しないケースを考慮し、オブジェクトのプロパティを参照する」、このような時にtry hashが活躍します。 try hashはdigで書き換えられます。今回はtry hashとdigの概要と、書き換えの…
JavaScript【React】4ステップで作成するカスタムフック実装手順
前回、【React】カスタムフックの概要・メリット・使いどころでカスタムフックの概要について紹介しました。 今回はカスタムフックの具体的な作成手順について紹介します。 今回利用するサンプルコードについて 今回は『API経…
JavaScript【React】カスタムフックの概要・メリット・使いどころ
カスタムフック（Custom Hooks）について カスタムフックとはデフォルトのフックを利用して実装された関数です。 カスタムフックを実装する際のルール カスタムフックはコンポーネントに実装されたロジックを取り出したも…
JavaScriptNext.js+TypeScript+自動コードフォーマットの環境構築手順
以下の仕様のNext.jsアプリケーションの作成手順について紹介します。 Create Next AppでNext.jsの雛形を作成 今回はTypeScriptベースのNext.jsアプリケーションを作成するため、–t…
JavaScriptNext.jsのSSR回避(クライアントサイドでのみ実行)の実装パターン集
Next.jsのページはデフォルトでPre-renderingです。 ですので、 今回はNext.jsでSSR回避、つまりクライアントサイドでのみ処理を実行するように制御する方法について紹介します。 検証環境のnextは…
JavaScript【Next.js】dynamic import(動的インポート)の概要と使いどころ
dynamic import（動的インポート）について dynamic import（動的インポート）とは動的にimportを実行するための機能です。ES2020でJavaScriptの仕様として導入されました。dyna…
JavaScript【React】4つの観点で理解するCSR・SSR・next/linkの挙動の違い
ReactアプリケーションにおけるCSR・SSR・next/linkの挙動の違いについて4つの観点で紹介をします。 CSRはフレームワークを利用していないReactアプリケーション、SSRはNext.jsを利用したRea…
JavaScript【Next.js】Warningが発生する誤ったCookieの使用例と改善方法
Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR（Server-side Rendering）もしくはSG（Static Generation）です1。 サーバサイドではブラウザ…
JavaScript【Next.js】Hydration時にReact.hydrate()による警告が発生するケースとその解決方法
Hydrationについて HydrationとはHTMLに付随したJavaScriptを利用してイベントリスナを登録することでインタラクティブ（操作可能）なページを生成する過程のことをいいます。Hydrationはクラ…
JavaScript【Next.js】SSR/SGでブラウザ機能(Cookieなど)を活用する際の注意点
SSR/SGではレンダリング時にブラウザの機能を使えない 具体例は以下の通りです。 Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR（Server-side Rendering）…
JavaScript【Next.js】ページのレンダリング種別(SSR/SG/ISR/Static)の決定・確認方法
Next.jsではページごと（pagesディレクトリ直下のコンポーネントごと）にレンダリングの種類を決められます。今回はレンダリング種別の決められ方と確認方法について紹介します。 検証環境のnextは11.1.2を利用し…
JavaScript【Next.js】SSRとSG(SSG)のPre-renderingの挙動の違い
Next.jsの公式ドキュメントによるPre-renderingの説明は以下の通りです。1 上記のプロセスを手元のローカル環境で確認したところ、SSRとSGで初期ロードのタイミングが異なっていたので紹介します。 検証環境…
JavaScript【初学者向け】Next.jsのSSR/SG(SSG)/CSRに関する基礎知識
『SSR（Server-side Rendering）はサーバサイドでHTMLを生成する仕組み』『SG（Static Generation）は事前に生成した静的なHTMLを配信する仕組み』『CSR（Client-side…
JavaScript【Next.js】next/linkの画面遷移（CSR）から画面反映までの流れの図解解説
Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR（Server-side Rendering）もしくはSG（Static Site Generation）です。1 しかし、Nex…
JavaScript【図解】Next.jsのSSRが画面反映されるまでの具体的な流れ
Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR（Server-side Rendering）もしくはSG（Static Generation）です。1 SSRとSGのどちらを採…
JavaScriptReactコンポーネントの再レンダリング発生条件と防止方法
コンポーネントが再レンダリングされる条件について コンポーネントは以下の条件のいずれかに当てはまると再レンダリングされます。 以下では再レンダリングが発生する具体例について紹介します。 コンポーネントのStateが更新さ…
JavaScriptTypeScriptのIntersection型（交差型）の概要と具体例
Intersection型（Intersection Types、交差型）について Intersection型（Intersection Types）は型 & 型のように&で型を連結し、型を合成した新たな…
JavaScriptTypeScriptのUnion型(合併型、共用体型）の概要と具体例
Union型（Union Types、合併型、共用体型）について Union型（Union Types）は型 | 型のように|で型を連結し、『いずれかの型』を表現します。 Union型は日本語では合併型と呼ばれたり1 2…
JavaScriptTypeScriptにおけるtypeof演算子の使いどころ
typeofについて typeofはオペランド（被演算子、演算対象の変数のこと）の型を文字列として返すJavaScriptの演算子です。 オペランドと取得できる文字列の対応は以下の通りです。1 型 戻り値 Undefin…
JavaScriptTypeScriptの『typeof X[keyof typeof X]』の意味を順を追って理解する
TypeScriptのコードでたまにみかけるtype HogeType = typeof Hoge[kyof typeof Hoge]の意味について解説をします。 結論: typeof X[kyeof typeof X]…
JavaScript【TypeScript】Enum型からUnion型に書き換える方法と具体例
TypeScriptではEnum型よりもUnoin型を利用したほうがよいという話をよく聞きます。1 2 3 今回はEnum型からUnion型に書き換えた具体例について紹介します。 Enum型を利用した例 以下はColor…
JavaScriptMapped Types（マップ型）の概要と利用方法まとめ
Mapped Types（マップ型）について Mapped Types（マップ型）とはある型をもとに新たな型を定義する際に利用される型のことをいいます。 Mapped Typesは{ [P in K]: T }のように記…
