MENU

メニュー

  • プログラミング
  • ブログ運営
  • ライフハック
  • お金
  • キャリア
  • お問い合わせ
  • サイトマップ
SEARCH

Enjoy IT Life

  • プログラミング
  • ブログ運営
  • ライフハック
  • お金
  • キャリア
  • お問い合わせ
  • サイトマップ
活動報告

ブラウザ版ポモドーロタイマーをリリースしました

2023年11月11日

ポモドーロ・テクニックのサイクルで作業をするにあたり、「広告やボタンなどが表示されておらず、シンプルに作業時間と休憩時間のタイマーだけが表示されているサービスが欲しい」と思い、ブラウザで起動するポモドーロタイマーを作りま…

JavaScript

ゆめみのフロントコーディング試験のデモアプリをReactで実装しました

2023年2月26日

デモアプリの概要について RESAS(地域経済分析システム) API経由で取得した都道府県・総人口のデータをグラフにプロットするというものです。 詳細はフロントエンドコーディング試験に記載されています。 技術スタックにつ…

Ruby

Rails: Strong Parameterのpermit/require/fetchメソッドまとめ

2023年1月24日

permitについて permitは許可する要素を指定するメソッドです。 permitによって生成されたparams(ActionController::Parameters)のpermitted属性はtrueになります…

Ruby

rails consoleからControllerにリクエストを送る方法

2023年1月23日

基本構文 appオブジェクトを利用することでrails console上からControllerへリクエストを送れます。 基本構文は以下の通りです。 ### パラメーターなしの場合 $ app.[リクエストメソッド] […

Ruby

Rails: クラス,モデル,モジュールなどでURLヘルパー(xxx_path, xxx_url)を利用する方法

2023年1月22日

URLヘルパーについて URLヘルパーはxxx_path、xxx_urlの形式でアプリケーションのパスを表現できるようにしてくれるRailsのヘルパーメソッドです。 URLヘルパーはコントローラ、ヘルパー、ビュー以外の箇…

Ruby

【Rails】HTTPヘッダを利用した値の受け渡し方法と注意点

2023年1月22日

Rails上でHTTPヘッダを取得する方法 RailsアプリケーションでHTTPヘッダの情報を取得する場合はrequest.headersあるいはrequest.envを利用します。 ### コンソール $ curl h…

Ruby

【Ruby】inject(reduce)の概要と具体例

2023年1月21日

injectについて injectとはリストのたたみこみ演算をするEnumableモジュールのメソッドです。 injectはEnumableモジュールに属するArrayやHashなどに適用でき、各要素に対して処理を実行し…

Ruby

【Ruby】『&&』と『&』の違い

2023年1月18日

&&について &&は論理積(AND)を求める演算子です。 &&は左から順に式を評価し、『真』なら右辺を評価、『偽』なら評価した値を返します。 全ての評価式が『真』の場合は最…

Ruby

【Ruby】method(:xxx)と表現するコード(Object#method)について

2023年1月17日

Object#methodについて Object#methodはレシーバーのメソッドを引数に受け取り、当該メソッドをMethodというオブジェクトに変換するメソッドです。 Methodオブジェクトとしてオブジェクト化され…

JavaScript

【JavaScript】スクロールの開始位置を一番下にする方法

2022年12月19日

スクロールの開始位置を一番下にする方法、つまり下から上に向かってスクロールするUIを実現する方法について紹介します。 スクロールの開始位置を一番下にする方法 以下では上記の方法の詳細について紹介します。 方法1: スクロ…

JavaScript

【JavaScript】スクロール操作に関する基礎知識

2022年12月19日

スクロールに関するプロパティ スクロールを操作する際に覚えておくとよいプロパティの知識について紹介します。 scrollTop scrollTopはスクロールの一番上から現在のスクロール位置までのピクセル数を保存するプロ…

JavaScript

Reduxを利用した非同期処理中のローディング機能実装

2022年10月3日

今回ローディング機能を実装するアプリケーションの仕様について 今回はToDoリスト管理アプリを例に、ローディング機能の実装方法を紹介します。 当該アプリケーションは、非同期処理の実行状況に応じてActionの発行とRed…

JavaScript

Redux Toolkitを利用して非同期処理のステータスをStateで管理する

2022年10月3日

今回実現すること AsyncThunkによって生成されたActionCreatorが返すActionTypeに応じてRedux StoreのState(以下State)の値を変更することで、非同期処理の実行状況をRedu…

JavaScript

【Redux】JSONオブジェクトを正規化(byId, allIds)する実装例

2022年10月1日

Redux『Redux Style Guide#Normalize Complex Nested/Relational State』にもあるように、『Redux Store内のState(以下State)』のデータは正規…

JavaScript

【Redux】Immerを利用してState更新のイミュータビリティを保証する

2022年9月17日

前提知識: データ更新とイミュータビリティ Immerを理解するために必要な前提知識について紹介します。 詳細は【React】JavaScriptのイミュータビリティを理解して正しくState更新するで紹介しています。 …

JavaScript

【Redux】ReselectのcreateSelectorでSelectorをメモ化する

2022年9月17日

今回利用するサンプルアプリケーションについて Selectorのメモ化を検証するにあたり、今回はTodo管理機能とカウンタ機能を組み合わせたアプリケーションを利用します。 アプリケーションの仕様は以下の通りです。 アプリ…

JavaScript

【React】UAParser.jsを利用したモバイル判定方法

2022年9月3日

UAParser.jsとはユーザーエージェント(User-Agent)からブラウザやエンジン、OS、CPU、デバイスの種類/モデルを検出するJavaScriptライブラリです。 今回はReactおよびNext.jsの環境…

JavaScript

React環境で手軽にSVGを表示する方法

2022年8月28日

ダウロードしたSVGを手軽にReactアプリケーション上で表示する方法について書きました。 今回は以下の3つの方法について紹介します。 なお、今回紹介するサンプルコードではGoogle FontsのSVGを利用します。 …

JavaScript

Reactによるアコーディオンメニューの実装方法

2022年8月28日

アコーディオンとはクリックをトリガとした開閉式のUIコンテンツのことを指します。 今回はReactで実装したアコーディオンメニューのサンプルコードについて紹介します。 今回紹介するアコーディオンのサンプルコード App….

JavaScript

【React】useRef/forwardRefの概要と使いどころ

2022年8月25日

Refについて Refとはrenderメソッドで作成されたDOMノードもしくはReact要素の参照を保持するオブジェクトです。 Refオブジェクトのcurrent属性を参照することでノードにアクセスできます。 Refの使…

HTML/CSS

【CSS】transitionでアニメーションを実現する方法

2022年8月20日

transitionについて transitionとはプロパティの状態変化を定義するCSSプロパティで、transition-property、transition-duration、transition-timing-…

HTML/CSS

【CSS】スケルトンスクリーンの実装方法

2022年8月19日

スケルトンスクリーン(スケルトンローダー)とはコンテンツの枠組のみを表現したデザインのことを指します。 スケルトンスクリーンは画面のローディング中などにUX向上の目的で利用されます。 今回はCSSによるスケルトンスクリー…

JavaScript

react-popper-tooltipでツールチップを作成する方法

2022年8月14日

react-popper-tooltipを導入することでreact-popperとpopper.jsをベースにしたカスタムフックが利用でき、簡単にツールチップが作成できます。 今回はreact-popper-toolti…

JavaScript

【React】コンポジションで複数の子コンポーネントを表示する方法

2022年8月14日

おさらい: 子要素をコンポジションで出力する方法 コンポジションとはコンポーネント間のコードを再利用するためのReactの機能です。 コンポジションではchildrenという特別なPropsを利用して子コンポーネントを出…

JavaScript

React Hook Formの基本的な使い方

2022年8月11日

React Hook FormはReactでフォームを実装する際に広く利用されているライブラリです。 今回はReact Hook Formの基本的な使い方について紹介します。 なお、今回はあくまでReact Hook F…

JavaScript

Next.js(TypeScript)にJestを設定する方法

2022年7月20日

Next.jsアプリケーションにJestを導入する方法は3つあります。1 Rust Compilerを利用する方法では、バージョン12以降のNext.jsに組み込まれているJestの設定を活用します。 今回はRust C…

JavaScript

Next.jsでSVGを利用する方法(babel-plugin-inline-react-svgの使い方)

2022年7月17日

babel-plugin-inline-react-svgというプラグインを利用することでSVGをコンポーネントのように扱えます。 今回はbabel-plugin-inline-react-svgをNext.jsのアプリ…

JavaScript

【React】classNameでよく使う定義方法(複数クラス、条件付きクラス)

2022年7月16日

基礎知識: classNameの利用方法について classNameにクラス名をセットすると当該CSSクラスが適用されます。 以下はbuttonタグにstyles.btnクラスを適用する例です。 src/componen…

JavaScript

【React】汎用コンポーネントの実装テクニックまとめ

2022年7月16日

本記事で紹介する汎用コンポーネントとは、ボタンをはじめとした複数の箇所から呼び出されるUIパーツの基本となるコンポーネントのことを指します。 使い回しのしやすい形で汎用コンポーネントを実装することで、必要となる汎用コンポ…

JavaScript

【React】実務におけるuseMemo/useCallback/React.memoの適用方針

2022年6月12日

useMemo・useCallback・React.memoによるメモ化を活用することでReactアプリケーションのパフォーマンスの向上が期待できます。 しかしメモ化の効果や挙動について理解しても、実際の開発ではどのよう…

JavaScript

【JavaScript】filterでFalsyな値(偽値)を配列から除去する方法

2022年5月5日

前提知識: JavaScriptにおけるFalsyな値について falsyな値(偽値、falseyな値)とはfalseと評価される値のことを指します。 JavaScriptにおけるfalsyな値は以下の8つです。1 なお…

JavaScript

【JavaScript】lodashの概要とmergeの使い方

2022年5月5日

lodashは便利なメソッドをまとめて提供しているライブラリです。今回はlodashのメソッドの1つであるmergeについて紹介します。 lodashのインストール方法 $ yarn add lodash ### Typ…

JavaScript

【JavaScript】Fetch APIを良い感じにメソッド化するリファクタ例

2022年5月5日

今回やりたいこと Fetch APIを利用してGETとPOSTを実行する以下のようなコードがあったとします。 const getTodoResponse = async () => { const response…

JavaScript

【JavaScript】fetchとaxiosの非同期処理の違いまとめ

2022年5月4日

JavaScriptで非同期処理を実装する際によく利用されるFetch APIとaxiosの違いについて紹介します。 前提知識: fetchもaxiosも戻り値はPromise fetchもaxiosも戻り値はPromi…

JavaScript

【React】createPortalとContextによるトースト(Toast)実装

2022年5月2日

前回、【React】createPortalによるポータルの作成・利用方法でポータルの概要について紹介しました。 トーストは代表的なポータルの応用例です。今回はポータルとContextを利用してトーストを実装する方法につ…

JavaScript

【React】createPortalとContextによるモーダル実装

2022年5月1日

前回、【React】createPortalによるポータルの作成・利用方法でポータルの概要について紹介しました。 モーダルは代表的なポータルの応用例です。今回はポータルとContextを利用してモーダルを実装する方法につ…

JavaScript

【React】createPortalによるポータルの作成・利用方法

2022年4月30日

ポータル(Portal)を利用することでモーダルやトーストのような『画面上に飛び出すUIパーツ』を実装できます。 今回はcreatePortalを利用したポータルの実装方法について紹介します。 検証環境はnext 12….

JavaScript

【React】JSXにおけるコンポーネントの表示・非表示の制御方法まとめ

2022年4月26日

今回想定するケース FormコンポーネントのローカルState(visible)の真偽値に応じて、Formコンポーネントから呼び出されるMessageコンポーネントの表示を制御する場合を考えます。 src/compone…

HTML/CSS

【CSS】display/visibility/opacityの比較・違いまとめ

2022年4月26日

要素を非表示にする方法であるdisplay: none, visibility: hidden, opacity: 0の違いについて具体例つきで紹介します。 display: none, visibility: hidd…

JavaScript

useContextをuseState・useReducer・関数と組み合わせる方法

2022年4月23日

前回、【React】useContexでContextを参照する手順でReact Contextの概要について紹介しました。 実際のアプリケーションでは、useContextはuseState・useReducer・関数…

  • 1
  • 2
  • 3
  • …
  • 12
  • >

オススメ記事

オファー実績のある現役利用者だから分かる!フリーランスエンジニア向けエージェント比較まとめ

2025年3月3日

退職手続きから案件参画まで。会社員からフリーランスエンジニアになるまでにやることまとめ

2021年7月28日

ドメイン取得からブログ運営まで!WordPressブログ環境構築ロードマップ

2020年2月25日

Udemy(ユーデミー)のクーポンの入手方法は?種類は?【徹底解説】

2022年10月15日

人気の記事

まだデータがありません。

カテゴリー

  • お金 35
    • クーポン・特典 3
    • 保険 4
    • 決済 15
    • 税金 9
    • 貯蓄 4
  • キャリア 28
    • スキルアップ 4
    • 働き方 24
  • プログラミング 328
    • git 9
    • Go言語 10
    • HTML/CSS 30
    • JavaScript 103
    • Ruby 89
    • インフラ 61
    • シェル 8
    • データベース 11
    • バックエンド 7
  • ブログ運営 40
    • SEO 6
    • Webマーケティング 3
    • WordPress 10
    • アフィリエイト 5
    • カスタマイズ 8
    • テンプレート 6
    • ライティング 1
  • ライフハック 39
    • Mac 18
    • ガジェット 17
    • 役立ちアイテム 3
    • 役立ち情報 1
  • 日記 2
    • 活動報告 2

アーカイブ

タグ

AWS (19) css (28) Docker (34) docker-compose (19) freee (3) git (8) Googleアドセンス (3) Go言語 (12) HHKB (4) iPhone (6) ISUCON (6) keynote (3) Mac (9) mineo (5) mvno (6) MySQL (16) Next.js (16) nginx (10) Rails (92) React (62) SEO (5) TypeScript (30) Udemy (3) WordPress (41) インフラ (8) キャリアチェンジ (5) クレジットカード (16) スワロー (7) パフォーマンスチューニング (35) フリーランス (29) マイル (4) ミライノカード (3) リクルートカード (3) リファクタ (18) レビュー (3) 住信SBIネット銀行 (5) 作業効率化 (16) 副業 (12) 家具家電 (3) 格安SIM (7) 楽天 (4) 環境構築 (3) 確定申告 (7) 認証認可 (11) 銀行 (3)
  • プロフィール
  • ブログ運営
  • プログラミング
  • ライフハック
  • お金
  • キャリア
  • 免責事項・プライバシーポリシー

©Copyright2025 Enjoy IT Life.All Rights Reserved.