プログラミング

スポンサーリンク
React

[Next.js] getStaticProps関数とは

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

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

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

[Java] 日時を扱うクラスの使い方

概要 かつて使われていたjava.util.Dateクラス、java.util.Calendarクラスは以下のような問題があるため現在では使われていない。 月が0から始まるなど使いづらい スレッドセーフではない 期間を表すことができない 現在はJava8から追加されたTime API(java.timeパッケージ)が使われる。Time APIのクラスはnewが禁止されており、静的メソッドのnow(...
スポンサーリンク
Java

[Java] 文字列処理のチートシート

文字列の比較: equalsメソッド "hello".equals(new String("hello")) // true 文字列配列の連結: String.joinメソッド String joinedText = String.join(",", args); intに変換: Integer.parseIntメソッド int num = Integer.parseInt("100") 長さを取...
Java

[Java] 「シンボルを見つけられません」の解決法

概要 hoge.MyClassをjavac MyClass.javaでコンパイル後、java MyClassとしても「シンボルを見つけられません」となってしまい実行することができない。 原因 原因は以下の2つである。 原因1: クラスはFQCNで指定しなければならない javacコマンドはソースファイル名を指定するにも関わらず、javaコマンドはクラス名(FQCN)を指定する必要がある。 原因2:...
Vue.js

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

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

[Next.js] 環境変数を使う方法

概要 APIキーなどをコードに埋め込むのはセキュリティ上好ましくないため、環境変数として用意するのが一般的である。 .env開発・本番に依存しないデフォルト値を定義する。 .env.local開発・本番に依存しないシークレットな値を定義する。(.gitignoreに追加する) Next.jsで使うAPIキーを管理するだけであれば、.env.localを用意すれば良い。 API_KEY=XXXXXX...
React

[Next.js] Font Awesomeを導入する方法

概要 Next.jsでFont Awesomeを使うための手順をまとめました。 インストール コアnpm install @fortawesome/fontawesome-svg-core Reactコンポーネントnpm install @fortawesome/react-fontawesome 以下のアイコンパッケージは必要な分だけインストール。 Solidnpm install @forta...
React

[Next.js] window, sessionStorage, localStorageなどが使用できない原因

概要 Next.jsでwindowなどブラウザオブジェクトにアクセスするとReferenceErrorとなってしまう。 console.log(window) // ReferenceError: window is not defined これはデフォルトでサーバサイドレンダリングが有効になっているからであり、if文でブラウザオブジェクトが存在するかどうかを判定することでエラーを回避することがで...
React

[Next.js] SSRを無効にする方法

概要 Nuxt.jsはデフォルトでサーバサイドレンダリングが有効になっているため、サーバサイドでは存在しないwindow, localStorage, sessionStorageなどのオブジェクトを参照しようとするとエラーになってしまう。 Nuxt.jsの場合はnuxt.config.tsでssr: falseを指定することでSSRを無効にすることができるが、Next.jsの場合はnext/dy...
スポンサーリンク