JavaScriptのまとめ

このカテゴリにはJavaScriptについての技術的な内容を記載しています。

スポンサーリンク
JavaScript

Next.jsでnext.config.jsを使って環境変数をあつかう方法

Next.jsにはシステム内で利用できる環境変数の設定をnext.config.jsというファイルを使って行えます。next.config.js内ではNext.jsが起動されたモード(phase)を知ることができるので、デバッグ時、本番環境時などで環境変数を切り替えることもできます。
JavaScript

Material UIコンポーネントのStyleをオーバライドし活用する方法

Material UIコンポーネントのStyle をオーバライドするにはcreateMuiThemeを使ってオーバライドし、そのStyleを適応するにはMuiThemeProviderを使うと簡単に共通化したStyleの Material UI コンポーネントを作成することができます。
JavaScript

ReactコンポーネントのPropsにデフォルト値を設定するdefaultPropsの使い方

defaultPropsを使えばロードされる側のReactコンポーネントでデフォルト値を設定できるので、万が一渡されなかった場合でも描画を正常に行うことができます。
2021.07.21
スポンサーリンク
JavaScript

Next.jsで呼び出されたURLパスを取得する方法(Functionコンポーネント編)

Next.jsで呼び出されたURLパスを取得するにはuseRouterオブジェクトを使います。
JavaScript

Reactで1つのコンポーネントから複数のDOM要素を返す方法

Reactの1 つのコンポネントから複数のDOM要素を返したい時はReact.Fragmentタグを使えば警告の出ず、かつ余分なdivタグなどを使うこと無いJSXを書くことができます。
2021.07.19
JavaScript

Next.jsにMaterial-uiを組み込んでReactで使う方法

Googleが提唱するMaterialデザインをベースに開発された、コンポーネントライブラリMaterial-UIを使えば簡単にサイトをマテリアルデザインに対応することができます。React の相性も良く、普通のHTMLタグのようにMaterial-UIコンポーネントを呼び出すだけで使うことができます。
JavaScript

Next.jsでReactを使った開発環境を作成する方法

Reactを利用してアプリケーションを作成する環境を作るには「npx create-react-app」もしくは「npx create-next-app 」コマンドを実行するだけで簡単に準備することができます。
2021.06.26
JavaScript

Next.jsで静的HTMLを出力(build)する方法

Next.jsでSSR(Server Side Rendering)するファイルを静的なHTMLに変換して出力する方法です。静的HTMLを出力するにはNext.jsのbuild コマンドを実行します。
JavaScript

Next.jsのポート番号を変更する方法

Next.jsでは起動時のポート番号が3000に設定されています。これを他のポート番号に変更するには-pオプションを付加して起動します。
JavaScript

npmでpackageのバージョンを調べる方法

npmでpackageのバージョンを調べるには「npm info [バージョンを調べるpackage名] version」を使います。
JavaScript

Next.jsでReactをSSR(Server Side Rendering)する

Next.jsを使ってReactのコンポーネントをSSR(Server Side Rendering)して表示してみます。
JavaScript

jExcelでセルにSUMなどの計算式を埋め込む方法

jExcelでセルにSUMなどの計算式を埋め込こむには、表示させるデータの部分に「=」でつないでそのまま計算式を埋め込めばできます。
2020.10.28
JavaScript

jExcelで文字色や背景色などの文字の修飾を行う方法(setStyle)

jExcelで文字色や背景色などの文字の修飾を行うには「setStyle」を利用します。「setStyle」にはCSSのプロパティ名と値をそのまま渡すイメージで行います。
2020.10.28
JavaScript

jExcelでセルをReadOnly(リードオンリー)にする方法

jExcelでセルをReadOnly(リードオンリー・読み出し専用・変更不可)にするには「columns」に「readOnly:true」を設定して行います。
2020.10.28
JavaScript

JavascriptでExcelのような表を扱うライブラリ「jExcel」

jExcelを使うと非常に簡単にExcel風の表をブラウザー上に書くことができます。jExcelをCDNから読み込んでExcel風の表を表示するまでを解説します。
2020.10.28
JavaScript

jqGridで行選択時の処理を行う方法

jqGridで選択された行のデータを取得するなどの処理を行うにはonSelectRow」を利用します。
2020.10.28
JavaScript

jqGridで文字色を変更するにはcellattrで変更する

jqGridで文字色を変更するにはcellattrで変更すれば簡単に変更することができるようになります。
2020.10.28
JavaScript

jqGridで複数行の行ヘッダーを作成する

jqGridで複数行の行ヘッダーを作成するにはsetGroupHeadersを利用すれば簡単に行ヘッダーを追加することができます。その実装方法を解説します。
2020.10.28
JavaScript

jqGridの表でフィルタリング(絞り込み)を行う

jqGridでは表のヘッダー部分に入力エリアを設けて絞り込みを行うことが簡単にできます。プログラミングとしては作成したjqGridの表に「filterToolbar」メソッドでフィルターを追加するだけです。その実装方法を解説します。
2020.10.28
JavaScript

jqGridで表を表示する方法

jQueryのプラグイン「jqGrid」を使えばHTMLのtableタグではできない、データソートや絞り込み機能を簡単に実現することができます。
2020.10.28
JavaScript

商用利用FreeのjqGridをCDNで読み込む方法

HTMLの表(tableタグ)だけではできないことを簡単にできるようにしてくれるjQueryプラグインの「jqGrid」。商用FreeなjqGridはCDNで読みこんでさくっと使いこなしましょう。
2020.10.28
JavaScript

Javascriptで文字列から数字だけを取り出す方法

Javascriptで「半角英数字」が混ざった文字列から半角数字だけを取り出すにはreplcaeと正規表現を利用して半角数字以外は「''(なし)」に変換すれば結果として「半角数字」だけを抜き出せます。
JavaScript

Javascriptで折れ線グラフや円グラフを書くライブラリGoogle Chart Tools

Google Chart Toolsを使うとJavascriptで折れ線グラフや円グラフを簡単に書くことができます。
2019.11.11
JavaScript

アクセス元によってサイトの表示を日本語、英語と切り替える方法

アクセス元によってサイトの表示を日本語、英語と切り替える方法。
2019.11.11
JavaScript

Javascriptで日付をYYMMDDの形で取得する方法

JavascirptではDateオブジェクトを利用して現在日時を取得できます。
2019.11.11
JavaScript

JavaScriptで補色のRGB値を計算して視覚的に見せる方法

JavascriptでRGBから該当する補色を求める方法。
2019.11.11
JavaScript

Javascriptで指定された文字列を全置換する方法

Javascriptで文字列を全置換する方法です。
2019.11.11
JavaScript

Javascriptで疑似的にKeyUpイベントを発火させる方法

Javascriptで疑似的にKeyUpイベントを発火させるにはdispatchEventでKeyboardEventを生成します。
2019.11.11
JavaScript

JavascriptでNumLock、CapsLock、ScrollLockキーのON/OFFを取得する方法

JavascriptでNumLock、CapsLock、ScrollLockキーのON/OFFを取得するするにはKeyUpイベントでgetModifierStateメソッドを使います。
2019.11.11
JavaScript

【jQuery】jQueryでTableの高さを小数点の単位まで取得する方法

jQueryでTableの高さを小数点の単位まで取得する方法
2020.06.02
JavaScript

jQueryはJavascriptでの直接DOMの操作より100倍遅いことが判明

JQueryはJavascriptでの直接DOMの操作より100倍遅いことが判明
2019.11.11
JavaScript

Javascriptの処理実行時間を取得する方法

Javascriptの処理実行時間を取得する方法
2019.11.11
JavaScript

Javascriptで指定された生年月日から年齢を計算する方法

Javascriptで指定された生年月日から年齢を計算します。
2019.11.11
JavaScript

Javascriptのunshift、shift、pop、pushメソッドの使い方

Javascriptの配列には「unshift()」、「shift()」、「pop()」、「push()」という配列を操作するのに便利なメソッドが用意されています。覚えていると配列に関するプログラミングが楽になるので、マスターしておきましょう。
2019.11.19
JavaScript

JavaScriptでゼロパディングして桁をそろえる方法

JavaScriptでゼロパディングして桁をそろえる方法です。先頭に「0」をつないで「slice()」で最後からとれば簡単に実現できます。
2019.11.19
JavaScript

Javascriptの変数は初期化して使わないとundefinedになるので要注意

Javascriptの変数は初期化して使わないとundefinedになるので要注意です。「""」になると思い初期化せずに変数を利用すると思わぬトラブルを招くこともあります。
2019.12.11
JavaScript

Javascriptで開いた子画面から親画面の関数を呼び出す

Javascriptで開いた子画面(ポップアップウィンドウ)から、親画面の関数を呼び出します。実現方法は子画面で「window.opener」を利用して実現します。
2019.12.09
JavaScript

Javscriptでイベントを追加する

すでにあるイベントに処理(関数)を追加する方法です。対象のブラウザーがInternet Explorer以外の場合はaddEventListener()、それ以外の場合はaddEventListener()を使います。
2019.12.09
JavaScript

setInterval()やsetTimeout()に引数ありの関数を指定する

Javascriptでタイマーを実現する際に良く利用するsetInterval()やsetTimeout()。ここでちょっと問題になるのは「callBackFunc()」に引数がある場合。普通に書くとエラーになります。その対処方法です。
2019.12.09
JavaScript

ブラウザの閉じるボタンが押下された時の制御

ブラウザの閉じるボタン「X」が押下された時、そのままウィンドウが閉じられるとまずい場合があります。そんな時はonbeforeunloadイベントで処理を制御します。
2019.12.09
スポンサーリンク
タイトルとURLをコピーしました