JavaScript

スポンサーリンク
CSS

[CSS] [jQuery] option要素をdisplay:noneで非表示にする方法（Safari対応）

概要 <option style="display:none">hoge</option>とするとoption要素を非表示にすることができるが、Safariでは表示されてしまう。 解決方法 <span style="display:none"><option>hoge</option></span>のようにoption要素をラップしたspan要素をdisplay:noneとすることで、Safari...
2023.10.30
CSSJavaScript
JavaScript

Jestでカバレッジを確認する方法

概要 JavaScriptのテスティングフレームワークであるJestを使ってカバレッジを確認したい場合、npm run test -- --coverageやnpx jest -- --coverageなどのコマンドを入力する。 ただし、上記コマンドではgitにコミットされたファイルのみが対象となるため、前回実行時からコミットがない場合はNo tests found related to file...
2023.08.03
JavaScript
Node.js

[Node.js] Error: Cannot find module ‘../scripts/start’の解決方法

概要 Node.jsを使っているプロジェクトのディレクトリーをコピーまたは移動すると、npm startを実行してもError: Cannot find module '../scripts/start'となってしまうことがある。 解決方法 node_modulesディレクトリを削除し、npm installを実行する。 ディレクトリのコピー・移動でnode_modles配下のシンボリックリンクが...
2023.07.14
Node.js
スポンサーリンク
TypeScript

[TypeScript]関数の型定義

関数の定義 引数のみアノテートし、戻り値は型推論を使う。 const add = (a: number, b:number) => a + b オプションパラメータとデフォルトパラメータ 引数名の後ろに?を付けると省略可能なオプションパラメータとなる。省略時はundefinedとなる。 引数名=値とするとデフォルトパラメータとなる。デフォルト引数は型推論を使う。 const print = (a:...
2023.07.06
TypeScript
TypeScript

[TypeScript]enum(列挙型)の使い方

数値列挙の場合 const enum Color { Red, Blue, Green } console.log(Color.Green) // 2 文字列列挙の場合 const enum Color2 { Red = "#f00", Blue = "#00f", Green = "#0f0" } console.log(Color2.Green) // "#0f0" 「型名は大文字で始まる単数...
2023.07.04
TypeScript
TypeScript

[TypeScript]オブジェクトの型定義

オブジェクトリテラルによる型推論 TypeScriptでオブジェクトリテラルを使うと型推論が行われる。通常はこの記法を使うべきである。 const obj = { id: 1, } obj.id="1" // エラー アノテーションによる型定義 省略可能プロパティや読み取り専用プロパティを定義したい場合は、アノテーションを使って明示的に型を宣言する。 const obj2: { id: numbe...
2023.07.02
TypeScript
React

[Next.js] getStaticPaths関数とは

概要 .tsxのようなダイナミックルーティングを行うページでgetStaticProps関数を使用する場合は、getStaticPaths関数を使用して「生成されるパスのリスト」を定義する必要がある。 getStaticPaths関数はgetStaticProps関数の前にコールされ関数で、パスの組み合わせpathsとフォールバックfallbackをreturnする。 例 import { Nex...
2023.06.28
React
React

[Next.js] getStaticProps関数とは

概要 Next.jsのページコンポーネントにて、「SSG（StaticSite Generator）させたい=ビルド時に実行したい」処理はgetStaticProps関数の中に記述する。 例 import {useEffect, useState} from 'react' import {GetStaticProps, NextPage} from 'next' type SsgProps = ...
2023.06.24
React
React

[Next.js] レンダリング手法の決定方法

概要 Next.jsにはSSG、SSR、ISR、CSRの4種類のレンダリング手法がある。 SSGビルド時にgetStaticProps関数が呼ばれ、その中でAPIコールなどを行い必要なデータをpropsとして返す。ビルド結果は静的ファイルとして保存される。 SSRページへのアクセスがある度にgetServerSideProps関数が呼ばれ、関数内で生成されたpropsを元にページをサーバ側で描画し...
2023.06.21
React
Vue.js

[Vue.js] ボタンクリックだけでなくEnterキー押下でもフォーム送信させる方法

概要 Vue.jsでフォーム送信を行う場合、type="button"のbutton要素やinput要素のclickイベントで処理するのが一般的である。ボタンクリックだけでなくEnterキーを押した時にもフォーム送信したい場合は、form要素のsubmitイベントハンドラで処理する必要がある。 clickイベントで処理する場合 <html lang="ja"> <head> <meta chars...
2023.05.25
Vue.js
スポンサーリンク
次のページ