JavaScript関連のことを調べてみた2022年02月09日

React + TypeScript: MUIコンポーネントのスタイルをcreateTheme()のstyleOverridesキーでツリーごとに上書きする

[MUI](https://mui.com/)(本稿執筆時v5.4.1)のコンポーネントのスタイルは、ただCSSのクラスを割り当てるだけでは適用できないことが少なくありません。作法にしたがったカスタマイズが必要です。いくつかあるやり方の中から、「[Global style overrides](https://mui.com/customization/theme-components/#global-style-overrides)」で解説されている、コンポーネントツリーごとにスタイルを上書きする手順と注意についてご説明します。つぎのCodeSandboxのコードが`Button`と`Accordion`のスタイルをカスタマイズした作例です。

#### React + TypeScript: Customizing style of MUI components

# `B

Nuxt.jsでhighcharts-vueを利用してグラフを描画する

## Highchartsとは
[Highcharts](https://www.highcharts.com/)は、Webでグラフを描写するためのJavaScriptライブラリ。
個人サイトや教育サイト、非営利組織は無料で利用可能。
ライセンスの詳細は[こちら](https://shop.highsoft.com/developer-license)。

## NuxtでHighchartsを利用する場合の選択肢
### プラグインの種類
Nuxt.jsのプロジェクトでHighchartsを利用する場合、プラグインがいくつか公開されている。

– [nuxt-highcharts](https://www.npmjs.com/package/nuxt-highcharts)
– [vue2-highcharts](https://www.npmjs.com/package/vue2-highcharts)
– [highchats-vue](https://www.npmjs.com/package/highcharts-vue)

今回は、
1. [HighchartsMaps]

Nuxt.jsでRESAS-APIの都道府県一覧を取得してVuexに格納する

## RESAS-API概要
地域経済分析システムRESASが提供している[都道府県一覧](https://opendata.resas-portal.go.jp/docs/api/v1/prefectures.html)をAPIから取得する。

取得結果のサンプル。全データは[こちら](https://github.com/daisuke-minami/nuxt-resas/blob/master/data/codes/preflist.json)を参照。
– prefCode：都道府県コード
– prefName：都道府県名

“`json
{ “message”: null,
“result”: [
{ “prefCode”: 1, “prefName”: “北海道” },
{ “prefCode”: 2, “prefName”: “青森県” }
] }
“`

## RESASを利用する準備

axiosをプラグイン化して、RESAS-APIを利用できる環境を整える。
詳細は[こちらの記事](https://lg-note.com/202

ブラウザでリンクをクリック時にPDFを表示とダウンロードを同時にする

PDFファイルをタブで開くのとダウンロードするのと同時に実施したいという依頼があったので試してみます。

``要素タグに`downloadという属性を付与するとリンク先のドキュメントをダウンロードしてくれます。
[MDN アンカー要素 download属性](https://developer.mozilla.org/ja/docs/Web/HTML/Element/a#attr-download)

同時にこの要素をクリック時に`window.open`で新たなウィンドウ（タブ）を開きます。
DOMで要素を取得して`onclick`で動く関数を設定します。
[MDN Window.open()](https://developer.mozilla.org/ja/docs/Web/API/Window/open)

この2つがどう相互に作用するか実際に試したところ、問題なく動きました。
以下がサンプルコードです。

“`html:HTML
PDFはこちら
“`

`

ライブラリなしでページネーションを実装する

一般的にページネーションはライブラリやフレームワークの標準機能を利用して実装するため、アルゴリズムを意識することは少ないと思います。
本稿ではページネーションをライブラリやフレームワークを使わずに独自実装する方法を紹介します。

今回実装するページネーションは次のようなものです。


全ページを表示するのではなく、開いているページに合わせて特定のページが省略されて表示されます。

先にソースコード全体を載せます。

“`html