【Ruby】rblineprofで行単位の計測を行う方法
rblineprofは行単位のプロファイリングを行うgemです。 rblineprofを利用することで『どの行でどれだけの時間がかかっているか』などが計測できます。 rblineprofの利用手順は以下の通りです。 今回…
RubyRubyRuby
RubyBulletを利用してN+1問題を検出する方法
N+1問題とは、取得したN件のデータそれぞれに対してSQLが発行される現象のことをいいます。 N+1問題によるデータベースへの大量アクセスは、アプリケーションのパフォーマンスを低下させる原因の1つです。 今回はN+1問題…
Go言語【Go言語】構造体におけるポインタメソッドの使いどころ
Go言語ではレシーバを引数にとることで型のメソッドを定義できます。1 Go言語のレシーバには『変数レシーバ』と『ポインタレシーバ』の2種類があります。 変数レシーバは値レシーバと呼ぶこともありますが、A Tour of …
Go言語【Go言語】構造体を要素に持つスライスの作成・要素追加・初期化方法まとめ
スライスとは可変長の配列のことです。 Go言語でWeb APIを実装する場合（= JSONレスポンスを作成する場合）などで以下のような『構造体を要素に持つスライス』を作成する機会があります。 users = [ { “n…
Go言語【Go言語】構造体の初期化方法の種類まとめ
Go言語の構造体の初期化方法には以下のパターンがあります。 ポインタ型を使わない場合 『変数定義 → フィールド値のセット』と2段階で初期化する方法 構造体リテラルでフィールド値をセットする方法 ポインタ型を使う場合 ア…
Go言語【Go言語】EchoとGORMでREST API（CRUD）を実装する
Go言語によるREST APIの実装方法を紹介します。 今回は例としてシンプルなCRUD API(GET、POST、PUT、DELETE)を実装します。 Go言語は1.16.3、フレームワークはEcho v4.2.2、O…
インフラ『ホットリロード x Go言語 x MySQL』なHTTPサーバのDocker環境構築手順
データベース接続をするGo言語製HTTPサーバのDocker環境構築について紹介します。 『コンテナ上のHTTPサーバとデータベースの疎通確認をする』をゴールとします。 Goは1.16.3、データベースはMySQL 8….
Go言語Go言語でデータベース（MySQL）に接続する方法
Go言語でデータベースに接続するための方法について紹介します。 今回はMySQLを利用します。 Go言語でデータベースへ接続する手順 以下では各手順について紹介します。 データベース接続のパッケージをインポート データベ…
インフラ【Go言語】ホットリロード可能なHTTPサーバのDocker環境構築手順
先日、Go言語のホットリロードツール『Air』でコードの修正を即時反映させるでAirを利用したホットリロード可能なHTTPサーバの紹介をしました。 今回は『Air + Go言語』のDocker環境を構築する手順について紹…
Go言語Go言語のホットリロードツール『Air』でコードの修正を即時反映させる
ホットリロードを導入することで開発の作業効率の向上が期待できます。 Go言語のホットリロードツールではRealizeやAirが有名です。 しかし2021年5月現在、Realizeはdeprecated（非推奨）の公式発表…
Go言語具体例で理解するGo言語のデバッグツールDelveの利用方法
Go言語のデバッガはDelveとGDBが人気です。 GDBのドキュメントには以下のような記載があり、Delveの利用を推奨しています。 Note that Delve is a better alternative to…
Go言語goimportsをインストールし、Go言語のコードをフォーマットする手順
goimportsとはGo言語の準標準パッケージ（サブレポジトリ）であるGo Toolsに内包されている静的解析ツールです。 goimportsの機能は以下の通りです。 goimportsはパッケージのインポートを修正す…
Go言語Go Modulesを利用してローカル環境でGo言語を実行する手順
2021年5月現在、Go言語のパッケージ管理はGo Modulesが標準となっています。 今回はGo Modulesを利用してGo言語を実行する手順について紹介します。 ローカル環境で初めてGo言語を実行する人向けの記事…
Go言語Go言語のパッケージ管理方法（GOPATHモードとmodule-awareモード）について理解を深める
Go言語の勉強を始めたのですが、パッケージ管理の歴史的背景を知らず混乱したため、パッケージ管理方法についてまとめました。 なお、この記事は2021年5月現在（Go 1.16.3）の情報です。 Go言語のパッケージ管理方法…
RubyRailsのセッション保存場所をCookieからRedisに変更する方法
Railsのセッション情報はデフォルトでCookieに保存されます。 Railsのセッション管理方法は変更が可能で、Cookieの代わりにインメモリDBを採用するケースがよくあります。 今回はセッションの管理方法をCoo…
Rubydeviseを利用したサインイン・サインアウトの遷移先（リダイレクトURL）を変更する方法
前回、『deviseのインストール手順をシンプルなログイン機能の実装で理解する』でdeviseを利用した認証機能の実装方法について紹介しました。 deviseでは、サインイン・サインアウト後のリダイレクトURL（遷移先の…
Rubydeviseのインストール手順をシンプルなログイン機能の実装で理解する
deviseを利用することで簡単に認証機能をRailsアプリケーションに構築できます。 今回はdeviseをインストールする手順について紹介します。 今回実装する内容について deviseを利用するとさまざまなことができ…
ガジェットHHKB愛用者に送る、HHKB2台で実現する左右分離型キーボードのメリット・デメリット
分離型キーボードはキーボードが左右に分かれているため、体に負担の少ない姿勢でタイピングができます。 Happy Hacking Keyboard（以下、HHKB）愛用者の自分も、新しく分離型キーボードを購入しようと検討し…
RubyRubyMineとDockerを連携してエディタからDockerを操作する方法
RubyMineとDockerを連携し、コンテナの起動やDocker環境のデータベースをRubyMineから実行する方法について紹介します。 今回は以下のようなRailsとMySQLを組み合わせたDocker Compo…
インフラ異なるDocker環境どうしをDockerネットワークで連携する方法
フロントエンドとバックエンドが別々のDocker環境で管理されている場合など、異なるDocker環境どうしでアクセスをしたい時があります。 Dockerのネットワーク機能を利用することでコンテナ間の通信をカスタマイズでき…
インフラNextでSSGアプリを作成し、CircleCIでS3に自動デプロイする方法
SSGとは静的なHTMLを事前に生成し、配信する方法です。 SSGではファイルの配置をするだけでアプリケーションが公開できるためサーバの準備が不要です。 今回はNextで作成したSSGアプリケーションを、CircleCI…
JavaScript具体例で理解するuseMemoとuseCallbackの使い方。Reactパフォーマンスチューニング
コンポーネントや関数のメモ化を行うことで、不要な計算やレンダリングを抑えられるためパフォーマンス向上が期待できます。 useMemoやuseCallbackはメモ化の機能を提供するフックです。 関数コンポーネントにおいて…
JavaScriptパフォーマンス改善やバグ防止に理解必須。useEffect第2引数の利用パターン集
useEffectはReact Hooks APIの中でも使用頻度の高いフックです。 レンダリングのタイミングで副作用を実行したい場合はuseEffectを活用します。 useEffectには依存配列と呼ばれる第2引数を…
JavaScript【JavaScript】axiosインスタンスとAPI連携クラスを作って非同期処理をいい感じで書く
axiosはフロントエンドでAPI連携を実装する際の定番HTTPクライアントです。axiosの戻り値はPromiseオブジェクトを返します。 API連携が必要な箇所でaxios.get(…)という感じで愚直にコードを…
JavaScript即時関数をアロー関数やfunctionを利用して色々なパターンで書いてみる
即時関数（MDNでいうIIFE (即時実行関数式)）とは定義した直後に実行される関数のことをいいます。 今回は即時関数の書き方について紹介します。 引数がない場合の即時関数の書き方 引数がない場合、即時関数は(関数式)(…
JavaScriptJavaScriptアロー関数入門。functionからの書き換えや、省略記法について理解する
functionの代わりにアロー関数を利用することで関数式がより簡潔に記述できます。 アロー関数の書き方にはいくつかルールが存在します。特にアロー関数の省略記法はアロー関数に慣れていないとパッとみて理解しにくいです。 そ…
JavaScriptCreate React AppでTypeScriptやReduxやコードフォーマットの環境を整える
Create React Appを利用したReactアプリケーションの作成方法についてまとめます。 アプリケーションの作成方法 アプリケーションの作成は以下の通りです。1 ### npx $ npx create-rea…
JavaScriptRedux ToolkitのcreateAsyncThunkで非同期処理を実装する方法
createAsyncThunkはRedux Toolkit 1.3.0から利用できる非同期処理用の機能です。 前回、Todoアプリで理解するRedux Thunkによる非同期処理の実装方法でRedux Thunk(Th…
JavaScriptTodoアプリで理解するRedux Thunkによる非同期処理の実装方法
Reduxで非同期処理を実装する方法は主にRedux Thunk、Redux Saga、Redux Observableがあります。 Redux ThunkはRedux Toolkitにデフォルトでインストールされている…
JavaScriptJavaScriptの非同期処理の定番！async/await概要・挙動まとめ
async/awaitを利用することでPromiseの操作を簡潔に記述できます。JavaScriptで非同期処理を実装する際はasync/awaitを利用するケースがほとんどです。 今回はasync/awaitの概要につ…
JavaScriptJavaScriptの非同期処理で理解必須！Promiseの概要・挙動まとめ
JavaScriptで非同期処理を実装するにあたりPromiseの理解は重要です。 今回はPromiseの挙動についてまとめたので紹介をします。 Promiseについて Promiseとは『状態』を持つオブジェクトです。…
JavaScript【Redux不要】React ReduxチュートリアルのRedux部分をReact Hooksに書き換えてみた
「React Hooks APIを活用することでReduxが不要になる」という話を聞いたことがある方もいるかもしれません。 今回は、Reduxの機能をReactのみで実装する検証として、React ReduxのBasic…
JavaScriptReact Reduxのチュートリアル（Todoアプリ）をRedux Toolkitで書き換えてみた
Redux ToolkitとはReduxの記述を簡潔にするためのツールです。 Redux Toolkitを利用することで、以下のようなReduxの問題点が解決できます。1 Redux Tookitで提供されているAPIは…
JavaScriptReact Reduxのチュートリアル(Todoアプリ)をReact Redux Hooksで書き換えてみた
React Redux hooksはconnect()の代わりとなるAPIです。 React Redux hooks APIを利用することでReduxのStateやActionの実行（dispatch）がconnect(…
JavaScriptJavaScriptの浅い比較・浅い（深い）コピーの挙動まとめ
プログラミング言語において『浅い比較(shallow equal)』や『浅いコピー(shallow copy)』といった言葉をよく聞きます。 今回はJavaScriptにおける、比較やコピーで表現されることのある『浅い（…
JavaScriptReact Reduxのチュートリアル（Todoアプリ）をTypeScriptで書き換えてみた
2020年2月現在、React ReduxのBasic Tutorialで紹介されているサンプルアプリケーション（Todoアプリ）はJavaScriptで書かれています。 今回、サンプルアプリケーションのTypeScri…
JavaScriptReactチュートリアルを関数コンポーネントとTypeScriptで書き換えてみた
2021年2月現在、Reactの公式ドキュメントで紹介されているチュートリアルのサンプルアプリケーション（三目並べ）はクラスコンポーネントとJavaScriptで書かれています。 前回、サンプルアプリケーションを関数コン…
JavaScriptReactチュートリアルをTypeScriptで書き換えてみた
2021年2月現在、Reactの公式ドキュメントで紹介されているチュートリアルのサンプルアプリケーション（三目並べ）はJavaScriptで書かれています。 今回、サンプルアプリケーションのTypeScript版を作成し…
JavaScriptReactチュートリアルを関数コンポーネントで書き換えてみた
2021年2月現在、Reactの公式ドキュメントで紹介されているチュートリアルのサンプルアプリケーション（三目並べ）はクラスコンポーネントで作られています。 今回、サンプルアプリケーションの関数コンポーネント版を作成した…
HTML/CSS横並びカードのCSSはどう設計する？具体例で理解するCSS設計の手順
CSSの基本的な文法を理解していれば、デザイン通りの画面は作成できます。 しかし何も考えずに実装をすると、拡張性がなかったりメンテナスしにくかったりするCSSとなってしまいます。 「よいCSS設計」には以下の4つの特徴が…
