Linux Ubuntuに最新や特定バージョン（20.x）のNode.jsをインストールする手順
Ubuntuのデフォルトのパッケージマネージャーである apt を使用してNode.jsをインストールすると、通常はリポジトリに登録されているバージョンがインストールされます。しかし、最新バージョンまたは特定のバージョン（例: 20.x）を...
JavaScript
Linux 
React create-react-appへのTailwind CSSの設定方法と簡単な拡張方法
とりあえずReactにTailwind CSSを導入したいcyan、greenなどの色の追加方法がわからないCSSフレームワークといえば、BootstrapやMATERIAL-UIなどが有名ですが、誰が作っても同じようなデザインになることか...
React ReactからGoogleapis の Youtube Data APIを呼び出す方法 ～Search APIを呼び出して動画の検索ページと再生ページを作成する～
React から外部のAPIを呼び出すサンプルを作成してみました。外部APIの題材としてYoutubeのData APIのSearchを利用し、動画の検索ページと再生ページも作成していきます。システム構成今回はAPI部分を中心に説明しますが...
React javascriptのwindow.matchMediaでreactのカスタムフック（useMediaQuery）を作成してレスポンシブ対応
Webページをレスポンシブ対応する場合に、cssの@media クエリを利用する以外にjavascriptのwindows.matchMedia()を利用する方法があります。javascriptのwindow.matchMedia()の使用...
React reactのデザインをmaterial-ui + styled components (CSS in JS)を組み合わせて利用する
react のデザインで styled components (CSS in JS)で行う場合、「全てのスタイルを１から作成するのは嫌だ」というときに、material-uiと組み合わせて利用することで省エネでデザインすることができます。 ...
TypeScript Express（Node.js）でTypeScriptを利用した開発環境構築 ～REST APIのひな形を作成する～
フロント側ではReact、Vue、Angularなどは静的型付け言語であるTypeScriptでコーディングされることが一般的になってきました。今回は、Node.jsのフレームワークであるExpressについてもJavaScriptではなく...
Docker Reactの開発環境（WSL2+docker）構築から本番環境（DockerHub＋kubernetes）へのデプロイ手順まとめ
最近は、開発環境をDockerで構築することが多くなってきたので、Reactアプリの開発環境構築手順をまとめました。また、本番デプロイ用にDockerHubへのPushとkubernetesへのデプロイ用YAMLの作成手順についてもまとめま...
express(node.js) 「リッチメニュー」と「クイックリプライ」を利用した無料でできるLINEチャットボットアプリの作り方 （node.js + Heroku）
今回はクラウド環境Herokuを利用して無料でLINEチャットボットを作成してみました。メッセージをそのまま返すサンプルはよくあるので、もう少し処理を加えて小学生低学年レベルの計算問題をやりとりするLINEチャットボット「バーチャル先生」を...