メインカテゴリーを選択しなおす
Windowsのローカル環境にNext.jsの開発環境を構築するメモ【備忘録】
お疲れ様です。 業務でNext.jsを使うことになり環境構築から対応が必要になったので試しに個人PCに環境構築したメモです。（自分用） もともとNext.jsを使った開発は経験があるのですが、Dockerでdevcontainerを作成して開発をしていました。 今回作成する環境はDockerを使用せずにWindowsのローカルに構築します。 Node.jsのインストール yarnのインストール Next.jsのインストール Node.jsのインストール 公式サイトからインストーラをダウンロードし、インストールします。 nodejs.org こんな感じのインストーラが立ち上がります。基本的にデフ…
Covid-19のダッシュボードの作成を例にしています。イメージとしては、表形式でデータが見えるようにして、時系列で合計値がチャートして見えるようにして、カレンダーヒートマップで曜日ごとの動きが見えるようにするというのを考えてみます。仮説としては人の動きに感染者は依存しているのではないかと言う仮説です。だとすれば、曜日ごとに特徴があるのではないかと言う仮説です。 流れとしては、以下のような順番になります。 プロジェクトの作成 データのインポート クエリとビジュアリゼーションコンポーネントの配置 クエリとビジュアリゼーションコンポーネントの配置は主にMarkdownのドキュメントで行います。 プロジェクトの作成 まず、プロジェクトを作成するところから始めます。プロジェクトの作成はVisual Studio Codeから作成します。 プロジェクトの作成(1/5) プロジェクトの作成(2/5) プロジェクトの作成(3/5) プロジェクトの作成(4/5) プロジェクトの作成(5/5) Evidenceのウェルカム画面 プロジェクトを作成すると、Evidenceのサーバを起動可能になります。Evidenceのサーバを起動すると通常はポート1313で待ち受け状態になります。そうすると、Webブラウザで開けるようになります。ウェルカム画面は以下のようになります。 Evidenceサーバの起動 Evidenceサーバの起動はVisual Studio Codeから行います。コマンドパレットから起動できます。 データのインポート https://www.mhlw.go.jp/stf/covid-19/open-data.html から取得した、新規陽性者数の推移（日別）のデータをプロジェクトフォルダのsourcesにcovid19というディレクトリを作成して 配置します。新規陽性者数の推移（日別）のデータはnewly_confirmed_cases_daily.csvというファイル名なので、newly_confirmed_cases_dailyというテーブルとして識別されます。 データのインポートはEvidenceのサーバからやると、設定ファイルなどを簡単に作成できます。 データのインポート データのインポート (1/4) Evidenceのサーバのインポート画面ではインポート可能なデータ形式の確認ができます。 Evidenceで
目的と対象読者 このドキュメントは、Windows環境を前提にEvidenceの利用方法について記述しています。Evidenceは様々な環境で稼働しますが、執筆時点での環境および設定を基準としています。 対象読者 Evidenceをはじめて利用する方 Windows環境でのセットアップ利用方法に関心のある方 前提条件 インストール済みのソフトウェア Visual Studio Code Git Node.js npm Node.jsのインストール方法 Scoopを利用し、執筆時点のLTSを利用しています。 Evidenceのバージョン バージョン 40.1.1をターゲットにしています。 Evidenceとはなにか 「Evidence」とは、Markdownで管理できるオープンソースのBI（ビジネスインテリジェンス）ツールです。 具体的には、レポート、意思決定支援ツール、埋め込みダッシュボードなどのデータプロダクトを構築するための オープンソースのフレームワークと説明されています。 Evidenceの主な特徴は以下の通りです。 コード駆動型BIツール:ドラッグ＆ドロップ式のBIツールとは異なり、コード（主にSQLとMarkdown）を使用してデータプロダクトを構築します。 Markdownで管理: Markdownファイル内でSQLクエリを記述し、コンテンツやレイアウトを管理します。 多様なデータソースに対応: データウェアハウス、フラットファイル（例：CSV）、非SQLデータソースなど、さまざまな種類のデータソースを扱うことができます。 SQLクエリの実行と結果の可視化: Markdownページに記載されたSQLステートメントに基づいてデータソースに対してクエリを実行し、その結果をグラフや表としてウェブサイトに出力できます。Markdown内で使用されるSQLはDuckDBのSQLです。 静的サイトの生成 出力は静的なウェブサイトとして生成されるため、デプロイや共有が容易です。npm run buildコマンドで静的サイトを生成し、S3などのホスティングサービスに格納して簡単に共有できます。 豊富なコンポーネント: クエリ結果に基づいて、さまざまなチャート（棒グラフなど）、表（DataTable）、大きな単一の値（BigValue）などのコンポーネントをレンダリングできます。 高度な機能: テンプレートページに
基本的な準備 システム構成の概要 Evidenceのアーキテクチャ Evidenceは基本的には、データソース、DuckDB、レンダリングエンジンという仕組みになっています。実際には更に、 静的サイトジェネレータも重要な位置を示しますが、その性質からここには表現していません。以下の図にEvidenceの基本的なアーキテクチャを示します。 まず、データソースからデータが取り出され、共通のデータ形式であるParquetに変換されます。ParquetはDuckDBによって利用されます。 従って、Evidenceで利用可能なデータは基本的にParquetに抽出されたデータに限定されます。 よって、標準的なBIツールのようにOn the flyのクエリを動的に送出してリアルタイムなデータを反映させることは出来ません。 従って、そのような要件が含まれる場合にはEvidenceは適切な選択肢ではありません。 従って、ドキュメントの流れまで含めて、アーキテクチャを図示すると以下のような形になります。 動作環境 Evidenceを動作させるためには、以下の環境が必要です。 Node.js: バージョン ≥18.13, 20, または 22 が必要です。初めてインストールする場合は、LTS（長期サポート）バージョンの利用が推奨されています。現在のNode.jsのバージョンはコマンド node -v で確認できます。 NPM (Node Package Manager): バージョン 7 以上が必要です。 Git: Gitがインストールされている必要があります。Gitがインストールされていない場合は、インストールする必要があります。GitHubへの登録も推奨されています。 これらの要件を満たすことで、Evidenceをローカル環境にインストールし、データプロダクトの構築を開始することができます。 現在のNode.jsのバージョンの確認方法 node -v 最新のNode.jsへの更新方法 scoop update nodejs-lts npmのバージョン確認方法 npm -v gitのインストール方法 scoop install git Evidenceのインストール方法 Evidenceには幾つかのインストールパターンがありますが、ダッシュボード開発時にはVisual Studio Codeと専用の拡張機能の利用が推奨されます。 本
今回はちょっとだけ箸休め的にScoopによる環境構築を多少補足します。 本シリーズでは基本的には、環境構築はScoopを用いることを前提としています。 Scoopはコマンド一つで様々なパッケージを展開可能なツールです。 Scoopは悪い意味ではまっとうなパッケージマネージャではありません。しかし、以下の条件の元では極めて有効に働きます。 You’re a programmer/developer You want to set up a machine without having to visit a bunch of websites, download installers and then click through each one You’re comfortable working on the command line, especially with tools like Git You’re familiar with UNIX tools, and you wish there were more of them on Windows You read Hacker News and you feel like you’re ‘stuck’ on Windows and missing out on lots of cool things You wish there was an easier way to tell other developers how to install programs (maybe your own programs) You use Homebrew/apt-get and think, “this is awesome”. https://github.com/ScoopInstaller/Scoop/wiki/So-What より。
ReactのuseEffectでデータ渡し時の1回だけコンポーネント動作させる
ReactのuseEffectフックは、コンポーネントがマウントされた後や更新された後に特定の副作用を実行するために使用されます。本記事では、useEffectを使ってデータが渡された時に1回だけ動作するコンポーネントの作成方法を紹介します
【Node.js】Socket.IO / Express / TypeScriptでソケットサーバー構築【Room接続 / メッセージ投稿】
Node.js, Socket.IO, Express, TypeScriptを使って、ターミナル上で利用できる簡単なチャットアプリを作ります！ 本格的なアプリを作る前に各種パッケージの使い勝手を理解するのに最適なサンプルですので、ぜひ参考にしてください
Alexa × Node-RED × OpenAIで、アレクサからChatGPTっぽい回答を聞けるようにした話
アレクサからOpenAIに質問することで、ChatGPTライクな回答を聞けるようにする方法を解説しています。この方法は、Node-REDを使ったオリジナルのAlexaコマンドを作成する方法にも使えます
【Mac】Reactの新規アプリ作成時に発生したnpmエラーへの対処方法
昨日までは、いつも通りNode.jsのnpmコマンドを実行できていたのに、、急にnpmコマンドのエラーが発生すると萎えますよね.. 基本的には、Pathがおかしいかnode.jsのバージョンが低いことが原因ではありますが […]
nodebrewでNode.jsのバージョンが確認出来ない際の対処法
nodebrewは、Node.jsのバージョンを管理できるもので、プロジェクトに応じて、Nodeのバージョンの切り替えをコマンドを簡単に行うことができる点は、とても有難いものです。 本記事では、インストール済みであるにも […]
【node】asdfでnodeをインストールし、yarnも使えるようにする
こんにちは、しきゆらです。今回は、以前紹介したasdfを使ってNode.jsをインストールし、個人的によく使っているYarnも使えるように環境を作っていきます。 なお、Node....
[React+Tailwind] Carousel を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Carousel コンポーネントです。 JavaScript ベースの Carousel.js です。 import { forwardRef }...
[React+Tailwind] Flowbite で Carousel を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Carousel コンポーネントをつくる ./src/components 配下に Carousel.js を作ります...
[React+Tailwind] Card を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Card コンポーネントです。 JavaScript ベースの Card.js です。 import { forwardRef } from 'r...
[React+Tailwind] Flowbite で Card を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Card コンポーネントをつくる ./src/components 配下に Card.js を作ります。 import...
[React+Tailwind] ButtonGroup を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Button コンポーネントです。 JavaScript ベースの Button.js です。 import { forwardRef } fro...
[React+Tailwind] Flowbite で ButtonGroup を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 ButtonGroup コンポーネントをつくる ./src/components 配下の Button.js を編集し...
[React+Tailwind] Button を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Button コンポーネントです。 JavaScript ベースの Button.js です。 import { forwardRef } fro...
[React+Tailwind] Flowbite で Button を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Button コンポーネントをつくる ./src/components 配下に Button.js を作ります。 im...
[React+Tailwind] Breadcrumb を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Breadcrumb コンポーネントです。 JavaScript ベースの Breadcrumb.js です。 import { forwardR...
[React+Tailwind] Flowbite で Breadcrumb を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Breadcrumb コンポーネントをつくる ./src/components 配下に Breadcrumb.js を...
[React+Tailwind] Badge を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Badge コンポーネントです。 JavaScript ベースの Badge.js です。 import { forwardRef } from ...
[React+Tailwind] Flowbite で Badge を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Badge コンポーネントをつくる ./src/components 配下に Badge.js を作ります。 impo...
[React+Tailwind] Avatar を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Avatar コンポーネントです。 JavaScript ベースの Avatar.js です。 import { forwardRef } fro...
[React+Tailwind] Flowbite で Avatar を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Avatar コンポーネントをつくる ./src/components 配下に Avatar.js を作ります。 im...
[React+Tailwind] Accordion を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Accordion コンポーネントです。 JavaScript ベースの Accordion.js です。 import { forwardRef...
[React+Tailwind] Alert を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Alert コンポーネントです。 JavaScript ベースの Alert.js です。 import { forwardRef } from ...
[React+Tailwind] Flowbite で Accordion を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Accordion コンポーネントをつくる ./src/components 配下に Accordion.js を作り...
[React+Tailwind] Alert を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Alert コンポーネントです。 JavaScript ベースの Alert.js です。 import { forwardRef } from ...
[React+Tailwind] Flowbite で Alert を表示してみる 心を無にして始める React
準備 Flowbite が使えるプロジェクトを準備します。 Alert コンポーネントをつくる ./src/components 配下に Alert.js を作ります。 impo...
[React] Flowbite を使ってみる@準備回 心を無にして始める React
Flowbite Tailwind CSS ベースのライブラリ。 Build websites even faster with components on top of Tai...
[React] Tailwind CSS を使ってみる@準備回 心を無にして始める React
TailWind CSS Rapidly build modern websites without ever leaving your HTML. Bootstrap とはまた...
[React] ESLint の除外コメント [コピペ用のメモ]
公式 ルールの無効化 対象のソース import { useEffect, useState } from "react" const DebouncedInput = ({ v...
[React] React Table で ソート をしてみる 心を無にして始める React
今回は、前回の ファジー検索 の機能を付けたものに ソート の機能を加えていきます。 準備 TanStack Table v8 で React Table を使うのはこちら (*...
[React] Leader Line で要素同士を線でつないでみる 心を無にして始める React
準備 Leader Line Draw a leader line in your web page. こちらの React版 です。 LeaderLine のインストール np...
[React] react highlight words で検索文字列をハイライトしてみる 心を無にして始める React
準備 react highlight word のインストール npm install react-highlight-words 使ってみる イメージ 入力フォームに入れた文字...
[React] React Table で テーブル内のファジー（あいまい）検索 をしてみる 心を無にして始める React
準備 TanStack Table v8 で React Table を使うのはこちら (*'▽') バックエンドには、いつもの json-server を使います。 検索 イメ...
[React] React 18 から setInterval などの非同期処理で気をつけること
React 18 での変化点（の1つ） コンポーネントがアンマウントされたあとに状態が更新されても、警告が出なくなりました。 でなくなった警告はこれです。 Warning: Ca...
[React] TanStack Table v8 を React で使ってみる 心を無にして始める React
TanStask Table v8 準備 インストール npm install @tanstack/react-table react-table イメージ Table.js を...
[React] Suspense(React 18 の新機能) を Axios と合わせてみる 心を無にして始める React
Suspense サスペンスにより、コンポーネントツリーの一部がまだ表示できない場合に、ロード中という状態を宣言的に記述できるようになります。 いままで state で isLo...
React 18 の新機能をみたら、使いたくなったから今日から React 18 。 インストール 新しく npx create-react-app しましょう。React 18...
[React] Axios で複数の通信を待ち合わせてみる 心を無にして始める React
準備 Axios のインストールと使い方はこちら。 バックエンド 今回も json-server です。 使う json はこちら。 { "cats": [ { "id": 1,...
[React] Canvas で画像を拡大するとき、画像がぼけやるのを防ぐには
今回は React に限った話ではありませんが…、サンプルを React で書いています。HTMLやCSSを準備するよりReactで用意するほうがエコシステムがいろいろ揃えてくれ...
[React] OpenCV で画像の HITMISS(Hit or Miss) をしてみる 心を無にして始める React
この記事は、たぶん優先度が低いです。物体検出なら別の関数使いそうだし…、にわかには使いどころが、思いつかない (。´･ω･) 準備 React で OpenCV.js を使えるよ...
[React] OpenCV で画像のトップハット、ブラックハットをしてみる 心を無にして始める React
この記事は、たぶん優先度が低いです。にわかには使いどころが、思いつかない (。´･ω･) 準備 React で OpenCV.js を使えるようにしておきます。 今回も、形態を変...
[React] OpenCV で画像からエッジ抽出してみる 心を無にして始める React
準備 React で OpenCV.js を使えるようにしておきます。 今回も、形態を変化させるモルフォロジー処理を使っていきます。 OpenCVで定義されるタイプは、膨張、収縮...
[React] OpenCV で画像の簡単なノイズ除去をしてみる 心を無にして始める React
準備 React で OpenCV.js を使えるようにしておきます。 今回も、形態を変化させるモルフォロジー処理を使っていきます。 OpenCVで定義されるタイプは、膨張、収縮...
[React] OpenCV で画像の膨張＆収縮をしてみる 心を無にして始める React
準備 React で OpenCV.js を使えるようにしておきます。 膨張や収縮は、形態を変化させるモルフォロジー処理の1つです。 OpenCVで定義されるタイプは、膨張、収縮...
[React] OpenCV で画像を2値化してみる 心を無にして始める React
準備 React で OpenCV.js を使えるようにしておきます。 2値化する 簡単なしきい値処理 使うものはこちら。 簡単なしきい値処理では、しきい値を決めての2値化ができ...
