HTML/CSS/Sass Next.jsにTailwind.cssを導入する方法
Tailwind.cssをインストール Next.jsのバージョンが10以上の場合 # npm の場合 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest...
フロントエンド
HTML/CSS/Sass 
HTML/CSS/Sass 【Gulp】Sass/Scssをコンパイルする方法（推奨版）
Gulpを使ってSass/Scssをコンパイルしていたのですが、非推奨の形で記載してしまっていたので、推奨版の書き方で記載したコードを備忘録として残しておきます。 元々書いていたやり方 こんな形で書いてました。しかし、公式HP見たり調べてみ...
エラー URIError: malformed URI sequenceに出会った時の解決方法
get通信でURLからパラメータを取得しようとした際に、あるページから飛ぶと「URIError: malformed URI sequence」というエラーが起こっていました。 やりたかったこと フロント側でURL内の文字列を取得し、必要箇...
HTML/CSS/Sass 【JavaScript/jQuery】モーダル内の外部リンクが飛べない
問題 モーダル内で、aタグにhrefを使用してリンク先を指定していたのですが、何をしても外部リンクに飛べませんでした。 解決策 いろいろ調べましたが、HTML部分でどうにかするのは難しいようだったので、ちょうど使っていたjQueryで実装し...
HTML/CSS/Sass 【Sass/Scss】mixinが読み込まれない！そんな時に確認すること5つ。
あれ？mixinなんで使えないの！ってなることありませんか？私もたまにあるのですが、その際に確認することを5つまとめました。だいたいはいずれかで解決します。 mixinファイルが先に読み込まれているか mixinを指定するファイルが、mix...
React 【React】map関数で作ったリストを並び替え・ソートする方法
map関数で作ったリストの並び替えに苦戦したので、解決方法を記載します。 やりたかったこと 親コンポーネントでstateに格納した配列を、子コンポーネントにPropsとして渡し、それを子コンポーネントで一覧表示にしていました。そして、それを...
JavaScript 【React × JavaScript or TypeScript】ページネーションをreact-paginateライブラリを使って実装してみた
使用したライブラリ react-paginateを使用しました。 Reactのnpmでインストール可能なページネーション系で、本日時点でpopularityが第2位のものです。1位のものよりこちらの方がスタイルの調整が効きそうな気がしたので...
HTML/CSS/Sass 【HTMLとCSS】オンオフ切り替えボタン（Googleっぽいやつ）
Googleっぽいオンオフ切り替えボタンが作りたくなったので、自分で実装してみました。コードも含めて紹介していきます。 ざっくり方針 inputのcheckboxタイプを使って実装します。CSSクラスの切り替えで操作することもできますが、B...
React 【TypeScript×React】childrenの受取を必須にしたい！もしくは拒否したい！
開発をするなかで、このコンポーネントにはchildrenが絶対必要って設定したい…！ってなるとき、たまにありませんか？ かなり簡潔ですが、以下のようにすればできます。 必ず受け取るとき ReactNodeを指定します。 import { R...
TypeScript 【TypeScript】？って何？Propsのオプションを指定する
初めてTypeScriptを使用した際、プロパティについている「？」ってなに？？？となっていたのですが、これを読めば解決します。 プロパティについている「？」とは？？ そのプロパティが、オプション（任意）であることを示しています！ 逆に、？...
React 【TypeScript×React】React.FCとは? その特徴
TypeScriptとReactで開発をしていると、必ずと言ってもいいほど使うのがReact.FCです。 最初に見たときは「なんぞや？」と思ったので、基本的な点を説明していきます。 React.FCとは？ 略さずに書くと、React：Fun...
React 【TypeScript×React】useReducerとuseContextを使ってログイン状態を管理する
SPAを制作しているときに、Reactの状態管理でログイン状態かログアウト状態かを取得したかったため、useReducertとuseContextで実装しました。 方針 ログイン状態を判断するstateをグローバルで管理するそのstateに...
JavaScript 【JavaScript】ホイスティング（巻き上げ）とは
ホイスティング（巻き上げ）とは 変数や関数の定義（宣言）をコード実行前にメモリに配置すること。 メリット 定義する前に呼び出しても、問題なく実行されます（例：関数の定義よりも、実行を先に書く）。以下のようなコードも実行可能です◎ findN...
React 【React】FontAwesomeの使い方（同じ名前のアイコンをインポートする場合もあり）
ReactでFontAwesomeを使いたいときのやり方です。 【事前準備】FontAwesomeをインストールする まず、以下のコマンドを実行してFontAwesomeをインストールします。 インストールするものは5種類ありますが、インス...
React 【TypeScript×React】React-Modalの使い方
Reactで簡単にモーダルが作れるライブラリのインストールと使い方の説明です。今までは自分で一からモーダルを作っていたのですが、今回はライブラリにあやかりました。 前提環境 TypeScriptとReactはインストール済。 インストール ...
React 【エラー/TypeScript×React】inputが使えない。inputが入ったコンポーネントを返すと読み込まれなくなる。
はまったエラーがあったので記録です！ エラーが出たコード <input></input>という形で文字列を囲んでいます。 うまくいった例 これを<input value="" />とすると、うまくいきました！ 結論：<input></inp...
React 【エラーログ/React】Node Sass version 5.0.0 is incompatible with ^4.0.0.
エラー内容 Reactを立ち上げて、ディレクトリを整理しているときに、以下のエラーが起きました。 ./src/styles/style.scss (./node_modules/css-loader/dist/cjs.js??ref--5-...
HTML/CSS/Sass 【Sass保存版】便利なmixin4選
Sass使用するなかでも便利で、転用する場面が多そうなmixinを4つ集めました！ linkのcolor指定 mixin @mixin links ($link, $visited, $hover, $active) { & { color...
HTML/CSS/Sass 【初心者向け・CSS】2つ以上の指定するClass名をもつ要素にスタイルを適用する方法（AND条件、かつ）
先日、クラスをAND条件で指定してスタイルを適用する際に少し躓いたので記事にしました。 sample1とsample2というクラスがあると仮定して、説明します。 「sample1」と「sample2」のどちらのクラスも持つ要素にスタイルを指...
React 【React】index.jsxにしたらエラーになる
Reactをインストールして、いざ開発スタート！…となった矢先のあるあるエラーです。 エラー詳細 もともとあったファイル「index.js」を「index.jsx」に変更したら、以下のようなエラーが出て何も表示されなくなりました。 解決方法...