JavaScript Reactでexceljsを使ってエクセルファイルをダウンロードさせる方法 Reactでエクセルファイルを生成しブラウザーでダウンロードさせるにはexceljsを利用すると比較的簡単にエクセルファイルを生成させることができます。 2022.02.02 JavaScript
JavaScript ReactでMUI(Material-UI)のボタンの色を変更する方法 MUI(Material-UI)のButtonコンポーネントの表示色はcolorプロパティにシステムのpalletで定義されている色を設定するか、sxプロパティにbackground-colorなどを指定することで表示色を変更することができます。 2021.12.22 JavaScript
JavaScript ReactにFont Awesomeを組み込む方法 ReactにFont Awesomeを組み込んで表示させるにはreact-fontawesome を使います。react-fontawesomeはnpmコマンドなどでインストールし利用します。 2021.08.27 JavaScript
JavaScript Reactで子コンポーネントから親コンポーネントの値(State)を変更する方法 Reactで子コンポーネントから親コンポーネントの値(State)を変更するには親コンポーネントを変更するコールバック関数作成し、その関数を子コンポーネントへpropsを通じして渡すことで、子コンポーネントから親コンポーネントの値(State)を変更することができます。 2021.08.24 JavaScript
JavaScript Javascriptでクラス名を取得する方法。this.constructor.name Javascriptで自分自身のクラス名を取得するのに一番簡単な方法はconstructorのname属性を参照する方法です。 2021.08.17 JavaScript
JavaScript Material UIコンポーネントのStyleをオーバライドし活用する方法 Material UIコンポーネントのStyle をオーバライドするにはcreateMuiThemeを使ってオーバライドし、そのStyleを適応するにはMuiThemeProviderを使うと簡単に共通化したStyleの Material UI コンポーネントを作成することができます。 2021.10.27 JavaScript
JavaScript ReactコンポーネントのPropsにデフォルト値を設定するdefaultPropsの使い方 defaultPropsを使えばロードされる側のReactコンポーネントでデフォルト値を設定できるので、万が一渡されなかった場合でも描画を正常に行うことができます。 2021.07.21 JavaScript
JavaScript Reactで1つのコンポーネントから複数のDOM要素を返す方法 Reactの1 つのコンポネントから複数のDOM要素を返したい時はReact.Fragmentタグを使えば警告の出ず、かつ余分なdivタグなどを使うこと無いJSXを書くことができます。 2021.07.19 JavaScript
JavaScript Next.jsでReactを使った開発環境を作成する方法 Reactを利用してアプリケーションを作成する環境を作るには「npx create-react-app」もしくは「npx create-next-app 」コマンドを実行するだけで簡単に準備することができます。 2021.06.26 JavaScript
JavaScript Next.jsで静的HTMLを出力(build)する方法 Next.jsでSSR(Server Side Rendering)するファイルを静的なHTMLに変換して出力する方法です。静的HTMLを出力するにはNext.jsのbuild コマンドを実行します。 2021.04.14 JavaScript
JavaScript Next.jsのポート番号を変更する方法 Next.jsでは起動時のポート番号が3000に設定されています。これを他のポート番号に変更するには-pオプションを付加して起動します。 2021.04.14 JavaScript
JavaScript npmでpackageのバージョンを調べる方法 npmでpackageのバージョンを調べるには「npm info [バージョンを調べるpackage名] version」を使います。 2021.04.14 JavaScript
JavaScript Next.jsでReactをSSR(Server Side Rendering)する Next.jsを使ってReactのコンポーネントをSSR(Server Side Rendering)して表示してみます。 2021.04.14 JavaScript
HTML HTML5で進捗状況を表示する「プログレスバー(progress)」タグの使い方 よくWEBページなどでファイルをダウンロードしたり、何かの処理を待っている間に表示される「プログレスバー」ですが、HTML5では「progress」タグを利用することで簡単に実現できます。 2020.09.24 HTML
JavaScript jExcelでセルにSUMなどの計算式を埋め込む方法 jExcelでセルにSUMなどの計算式を埋め込こむには、表示させるデータの部分に「=」でつないでそのまま計算式を埋め込めばできます。 2020.10.28 JavaScript
JavaScript jExcelで文字色や背景色などの文字の修飾を行う方法(setStyle) jExcelで文字色や背景色などの文字の修飾を行うには「setStyle」を利用します。「setStyle」にはCSSのプロパティ名と値をそのまま渡すイメージで行います。 2020.10.28 JavaScript
JavaScript jExcelでセルをReadOnly(リードオンリー)にする方法 jExcelでセルをReadOnly(リードオンリー・読み出し専用・変更不可)にするには「columns」に「readOnly:true」を設定して行います。 2020.10.28 JavaScript
JavaScript JavascriptでExcelのような表を扱うライブラリ「jExcel」 jExcelを使うと非常に簡単にExcel風の表をブラウザー上に書くことができます。jExcelをCDNから読み込んでExcel風の表を表示するまでを解説します。 2020.10.28 JavaScript
JavaScript jqGridで行選択時の処理を行う方法 jqGridで選択された行のデータを取得するなどの処理を行うにはonSelectRow」を利用します。 2020.10.28 JavaScript
JavaScript jqGridで文字色を変更するにはcellattrで変更する jqGridで文字色を変更するにはcellattrで変更すれば簡単に変更することができるようになります。 2020.10.28 JavaScript
JavaScript jqGridで複数行の行ヘッダーを作成する jqGridで複数行の行ヘッダーを作成するにはsetGroupHeadersを利用すれば簡単に行ヘッダーを追加することができます。その実装方法を解説します。 2020.10.28 JavaScript
JavaScript jqGridの表でフィルタリング(絞り込み)を行う jqGridでは表のヘッダー部分に入力エリアを設けて絞り込みを行うことが簡単にできます。プログラミングとしては作成したjqGridの表に「filterToolbar」メソッドでフィルターを追加するだけです。その実装方法を解説します。 2020.10.28 JavaScript
JavaScript jqGridで表を表示する方法 jQueryのプラグイン「jqGrid」を使えばHTMLのtableタグではできない、データソートや絞り込み機能を簡単に実現することができます。 2020.10.28 JavaScript
JavaScript 商用利用FreeのjqGridをCDNで読み込む方法 HTMLの表(tableタグ)だけではできないことを簡単にできるようにしてくれるjQueryプラグインの「jqGrid」。商用FreeなjqGridはCDNで読みこんでさくっと使いこなしましょう。 2021.08.21 JavaScript
JavaScript Javascriptで文字列から数字だけを取り出す方法 Javascriptで「半角英数字」が混ざった文字列から半角数字だけを取り出すにはreplcaeと正規表現を利用して半角数字以外は「''(なし)」に変換すれば結果として「半角数字」だけを抜き出せます。 2019.11.27 JavaScript
JavaScript Javascriptで折れ線グラフや円グラフを書くライブラリGoogle Chart Tools Google Chart Toolsを使うとJavascriptで折れ線グラフや円グラフを簡単に書くことができます。 2019.11.11 JavaScript
JavaScript Javascriptで日付をYYMMDDの形で取得する方法 JavascirptではDateオブジェクトを利用して現在日時を取得できます。 2019.11.11 JavaScript
JavaScript Javascriptで疑似的にKeyUpイベントを発火させる方法 Javascriptで疑似的にKeyUpイベントを発火させるにはdispatchEventでKeyboardEventを生成します。 2019.11.11 JavaScript
JavaScript JavascriptでNumLock、CapsLock、ScrollLockキーのON/OFFを取得する方法 JavascriptでNumLock、CapsLock、ScrollLockキーのON/OFFを取得するするにはKeyUpイベントでgetModifierStateメソッドを使います。 2019.11.11 JavaScript
JavaScript 【jQuery】jQueryでTableの高さを小数点の単位まで取得する方法 jQueryでTableの高さを小数点の単位まで取得する方法 2020.06.02 JavaScript
JavaScript jQueryはJavascriptでの直接DOMの操作より100倍遅いことが判明 JQueryはJavascriptでの直接DOMの操作より100倍遅いことが判明 2019.11.11 JavaScript
JavaScript Javascriptのunshift、shift、pop、pushメソッドの使い方 Javascriptの配列には「unshift()」、「shift()」、「pop()」、「push()」という配列を操作するのに便利なメソッドが用意されています。覚えていると配列に関するプログラミングが楽になるので、マスターしておきましょう。 2019.11.19 JavaScript
JavaScript JavaScriptでゼロパディングして桁をそろえる方法 JavaScriptでゼロパディングして桁をそろえる方法です。先頭に「0」をつないで「slice()」で最後からとれば簡単に実現できます。 2019.11.19 JavaScript
JavaScript Javascriptの変数は初期化して使わないとundefinedになるので要注意 Javascriptの変数は初期化して使わないとundefinedになるので要注意です。「""」になると思い初期化せずに変数を利用すると思わぬトラブルを招くこともあります。 2019.12.11 JavaScript
JavaScript Javascriptで開いた子画面から親画面の関数を呼び出す Javascriptで開いた子画面(ポップアップウィンドウ)から、親画面の関数を呼び出します。実現方法は子画面で「window.opener」を利用して実現します。 2019.12.09 JavaScript