ブラウザ版ポモドーロタイマーをリリースしました
ポモドーロ・テクニックのサイクルで作業をするにあたり、「広告やボタンなどが表示されておらず、シンプルに作業時間と休憩時間のタイマーだけが表示されているサービスが欲しい」と思い、ブラウザで起動するポモドーロタイマーを作りま…
ポモドーロ・テクニックのサイクルで作業をするにあたり、「広告やボタンなどが表示されておらず、シンプルに作業時間と休憩時間のタイマーだけが表示されているサービスが欲しい」と思い、ブラウザで起動するポモドーロタイマーを作りま…
デモアプリの概要について RESAS(地域経済分析システム) API経由で取得した都道府県・総人口のデータをグラフにプロットするというものです。 詳細はフロントエンドコーディング試験に記載されています。 技術スタックにつ…
permitについて permitは許可する要素を指定するメソッドです。 permitによって生成されたparams(ActionController::Parameters)のpermitted属性はtrueになります…
基本構文 appオブジェクトを利用することでrails console上からControllerへリクエストを送れます。 基本構文は以下の通りです。 ### パラメーターなしの場合 $ app.[リクエストメソッド] […
URLヘルパーについて URLヘルパーはxxx_path、xxx_urlの形式でアプリケーションのパスを表現できるようにしてくれるRailsのヘルパーメソッドです。 URLヘルパーはコントローラ、ヘルパー、ビュー以外の箇…
Rails上でHTTPヘッダを取得する方法 RailsアプリケーションでHTTPヘッダの情報を取得する場合はrequest.headersあるいはrequest.envを利用します。 ### コンソール $ curl h…
injectについて injectとはリストのたたみこみ演算をするEnumableモジュールのメソッドです。 injectはEnumableモジュールに属するArrayやHashなどに適用でき、各要素に対して処理を実行し…
&&について &&は論理積(AND)を求める演算子です。 &&は左から順に式を評価し、『真』なら右辺を評価、『偽』なら評価した値を返します。 全ての評価式が『真』の場合は最…
Object#methodについて Object#methodはレシーバーのメソッドを引数に受け取り、当該メソッドをMethodというオブジェクトに変換するメソッドです。 Methodオブジェクトとしてオブジェクト化され…
スクロールの開始位置を一番下にする方法、つまり下から上に向かってスクロールするUIを実現する方法について紹介します。 スクロールの開始位置を一番下にする方法 以下では上記の方法の詳細について紹介します。 方法1: スクロ…
スクロールに関するプロパティ スクロールを操作する際に覚えておくとよいプロパティの知識について紹介します。 scrollTop scrollTopはスクロールの一番上から現在のスクロール位置までのピクセル数を保存するプロ…
今回ローディング機能を実装するアプリケーションの仕様について 今回はToDoリスト管理アプリを例に、ローディング機能の実装方法を紹介します。 当該アプリケーションは、非同期処理の実行状況に応じてActionの発行とRed…
今回実現すること AsyncThunkによって生成されたActionCreatorが返すActionTypeに応じてRedux StoreのState(以下State)の値を変更することで、非同期処理の実行状況をRedu…
Redux『Redux Style Guide#Normalize Complex Nested/Relational State』にもあるように、『Redux Store内のState(以下State)』のデータは正規…
前提知識: データ更新とイミュータビリティ Immerを理解するために必要な前提知識について紹介します。 詳細は【React】JavaScriptのイミュータビリティを理解して正しくState更新するで紹介しています。 …
今回利用するサンプルアプリケーションについて Selectorのメモ化を検証するにあたり、今回はTodo管理機能とカウンタ機能を組み合わせたアプリケーションを利用します。 アプリケーションの仕様は以下の通りです。 アプリ…
UAParser.jsとはユーザーエージェント(User-Agent)からブラウザやエンジン、OS、CPU、デバイスの種類/モデルを検出するJavaScriptライブラリです。 今回はReactおよびNext.jsの環境…
ダウロードしたSVGを手軽にReactアプリケーション上で表示する方法について書きました。 今回は以下の3つの方法について紹介します。 なお、今回紹介するサンプルコードではGoogle FontsのSVGを利用します。 …
アコーディオンとはクリックをトリガとした開閉式のUIコンテンツのことを指します。 今回はReactで実装したアコーディオンメニューのサンプルコードについて紹介します。 今回紹介するアコーディオンのサンプルコード App….
Refについて Refとはrenderメソッドで作成されたDOMノードもしくはReact要素の参照を保持するオブジェクトです。 Refオブジェクトのcurrent属性を参照することでノードにアクセスできます。 Refの使…
transitionについて transitionとはプロパティの状態変化を定義するCSSプロパティで、transition-property、transition-duration、transition-timing-…
スケルトンスクリーン(スケルトンローダー)とはコンテンツの枠組のみを表現したデザインのことを指します。 スケルトンスクリーンは画面のローディング中などにUX向上の目的で利用されます。 今回はCSSによるスケルトンスクリー…
react-popper-tooltipを導入することでreact-popperとpopper.jsをベースにしたカスタムフックが利用でき、簡単にツールチップが作成できます。 今回はreact-popper-toolti…
おさらい: 子要素をコンポジションで出力する方法 コンポジションとはコンポーネント間のコードを再利用するためのReactの機能です。 コンポジションではchildrenという特別なPropsを利用して子コンポーネントを出…
React Hook FormはReactでフォームを実装する際に広く利用されているライブラリです。 今回はReact Hook Formの基本的な使い方について紹介します。 なお、今回はあくまでReact Hook F…
Next.jsアプリケーションにJestを導入する方法は3つあります。1 Rust Compilerを利用する方法では、バージョン12以降のNext.jsに組み込まれているJestの設定を活用します。 今回はRust C…
babel-plugin-inline-react-svgというプラグインを利用することでSVGをコンポーネントのように扱えます。 今回はbabel-plugin-inline-react-svgをNext.jsのアプリ…
基礎知識: classNameの利用方法について classNameにクラス名をセットすると当該CSSクラスが適用されます。 以下はbuttonタグにstyles.btnクラスを適用する例です。 src/componen…
本記事で紹介する汎用コンポーネントとは、ボタンをはじめとした複数の箇所から呼び出されるUIパーツの基本となるコンポーネントのことを指します。 使い回しのしやすい形で汎用コンポーネントを実装することで、必要となる汎用コンポ…
useMemo・useCallback・React.memoによるメモ化を活用することでReactアプリケーションのパフォーマンスの向上が期待できます。 しかしメモ化の効果や挙動について理解しても、実際の開発ではどのよう…
前提知識: JavaScriptにおけるFalsyな値について falsyな値(偽値、falseyな値)とはfalseと評価される値のことを指します。 JavaScriptにおけるfalsyな値は以下の8つです。1 なお…
lodashは便利なメソッドをまとめて提供しているライブラリです。今回はlodashのメソッドの1つであるmergeについて紹介します。 lodashのインストール方法 $ yarn add lodash ### Typ…
今回やりたいこと Fetch APIを利用してGETとPOSTを実行する以下のようなコードがあったとします。 const getTodoResponse = async () => { const response…
JavaScriptで非同期処理を実装する際によく利用されるFetch APIとaxiosの違いについて紹介します。 前提知識: fetchもaxiosも戻り値はPromise fetchもaxiosも戻り値はPromi…
前回、【React】createPortalによるポータルの作成・利用方法でポータルの概要について紹介しました。 トーストは代表的なポータルの応用例です。今回はポータルとContextを利用してトーストを実装する方法につ…
前回、【React】createPortalによるポータルの作成・利用方法でポータルの概要について紹介しました。 モーダルは代表的なポータルの応用例です。今回はポータルとContextを利用してモーダルを実装する方法につ…
ポータル(Portal)を利用することでモーダルやトーストのような『画面上に飛び出すUIパーツ』を実装できます。 今回はcreatePortalを利用したポータルの実装方法について紹介します。 検証環境はnext 12….
今回想定するケース FormコンポーネントのローカルState(visible)の真偽値に応じて、Formコンポーネントから呼び出されるMessageコンポーネントの表示を制御する場合を考えます。 src/compone…
要素を非表示にする方法であるdisplay: none, visibility: hidden, opacity: 0の違いについて具体例つきで紹介します。 display: none, visibility: hidd…
前回、【React】useContexでContextを参照する手順でReact Contextの概要について紹介しました。 実際のアプリケーションでは、useContextはuseState・useReducer・関数…