JavaScript Chart.jsで複合グラフを表示する方法！【折れ線と棒グラフを表示】
Chart.jsを使用して、折れ線と棒グラフを一緒に表示して、複合グラフを作成する方法を書いています。 公式サイトではMixed Chartという表記で、こちらに記載があります。 Chart.jsを使用して、複合グラフを作成する Chart...
2022-03
JavaScript 
React ReactのuseStateの使い方！解説と注意点【サンプルコード9個】
今回はReactのuseStateの使い方について書いてみました。 サンプルコードで検証しているReactのバージョンは17.0.2になります。 ReactのuseStateの使い方について ReactのuseStateは変数の状態を管理す...
JavaScript JavaScriptで金額を扱う時に使用する2つの関数(3桁区切り・切り捨て)
JavaScriptで金額を扱う際に3桁区切りにする方法と、金額の単位を千円や百万円にする方法について書いています。 JavaScriptで金額をカンマの3桁区切りにする JavaScriptで金額を3桁のカンマ区切りにするにはtoLoca...
JavaScript [JavaScript入門]confirmの使い方の解説とトピックス3つ！
今回はJavaScriptのcomfirmメソッドの使い方について書いています。 JavaScriptでconfirmメソッドを使用すると、ブラウザにメッセージと一緒に下記のような確認ダイアログを表示させることができます。 このダイアログで...
JavaScript Chart.jsを使用して、折れ線グラフを書く方法！【気温のグラフを作る】
今回はChart.jsを使用して、折れ線グラフを書いてみます。 Chart.jsは現時点での最新版のバージョン3.7.1を使用しています。 少しずつ実装を変えていって、最終的に下記のような折れ線グラフを作成します。 Chart.jsを使用し...
JavaScript [JavaScript入門]三項(条件)演算子の使い方！【9つの値で挙動検証】
今回はJavaScriptで三項(条件)演算子を使い方について書いています。 最初に三項演算子の使い方について書いています。 その後にいろいろな値を渡して、trueとfalseの判定がどうなるのか挙動検証してみたコードを載せています。 Ja...
Vue.js Vue.jsでTypeScriptを使う方法！【propsでの型定義6つ】
今回はVue.jsで公式サポートされたTypeScriptを使ってみます。 はじめにVue CLIでTypeScriptのサポートしているプロジェクトを作成します。 その後にプロジェクトに対して、コンポーネントを追加して、TypeScrip...
JavaScript Chart.jsを使用して、円グラフを書く方法！【サンプルと解説付き】
今回はChart.jsを使用して、円グラフを書いてみます。 円グラフの種類として、ドーナツ(doughnut)とパイ(pie)チャートが描けるようです。 Chart.jsは現時点での最新版のバージョン3.7.1を使用しています。 Chart...
Vue.js Vue Routerでページ内リンクする方法！【画面遷移時にページトップへ】
Vue Routerを使用しているプロジェクトで、ページ内リンクをつける方法について書いています。 ページ内リンクが設定されていない場合("#hoge"でIDが指定されていない)は、ページのトップへスクロールする設定になります。 サンプルコ...
Vue.js Vue.jsのイベントの使い方とイベントサンプル7選
Vue.jsでクリックした時に処理をするなど、イベントを発行して処理する方法の解説を書いています。 その後にサンプルコードとして、イベントを7つ書いてみました。 サンプルコードはVue.jsのバージョン3で検証しています。(Composit...
JavaScript Chart.jsを使用して、棒グラフを書く方法【6つのサンプルと解説付き】
今回はChart.jsを使用して、棒グラフを書いてみます。 Chart.jsは現時点での最新版のバージョン3.7.1を使用しています。 Chart.jsを使用して、棒グラフを書く Chart.jsはグラフをJavaScriptで描画するため...
Vue.js Vue.jsにVue Routerを導入して、タグで画面遷移する方法！
今回はVue.jsのプロジェクトにVue Routerを導入して、画面遷移する方法について解説しています。 まず、Vueのバージョン3に対して、Vue Routerを導入する方法を記載しています。 その後にVue Routerを使用して、ル...