JavaScript

React、TypeScript、Expressを使ったモダンWeb開発のカテゴリーです。REST APIの設計・構築、Material-UI（MUI）のスタイリング、YouTube Data API連携、LINE Bot開発などの実践チュートリアルをまとめています。

【初心者向け】Bun 1.2+入門！Node.jsとの違いと爆速機能を解説

JavaScriptやTypeScriptでプログラムを書く際、多くの開発者が使ってきた実行環境が「Node.js」です。しかし最近、技術系のSNSやエンジニアの間で「Bun（パン）」という新しいツールが大きな注目を集めています。「Bun ...

create-react-appへのTailwind CSSの設定方法と簡単な拡張方法

とりあえずReactにTailwind CSSを導入したいcyan、greenなどの色の追加方法がわからないCSSフレームワークといえば、BootstrapやMATERIAL-UIなどが有名ですが、誰が作っても同じようなデザインになることか...

ReactでYouTube Data APIを呼び出し検索＆再生ページを作成する方法

React から外部のAPIを呼び出すサンプルを作成してみました。外部APIの題材としてYoutubeのData APIのSearchを利用し、動画の検索ページと再生ページも作成していきます。システム構成今回はAPI部分を中心に説明しますが...

Reactでwindow.matchMediaを使ったカスタムフック（useMediaQuery）の作成法

Webページをレスポンシブ対応する場合に、cssの@media クエリを利用する以外にjavascriptのwindows.matchMedia()を利用する方法があります。javascriptのwindow.matchMedia()の使用...

reactのデザインをmaterial-ui + styled components (CSS in JS)を組み合わせて利用する

react のデザインで styled components (CSS in JS)で行う場合、「全てのスタイルを１から作成するのは嫌だ」というときに、material-uiと組み合わせて利用することで省エネでデザインすることができます。　...

Express（Node.js）でTypeScriptを利用した開発環境構築　～REST APIのひな形を作成する～

フロント側ではReact、Vue、Angularなどは静的型付け言語であるTypeScriptでコーディングされることが一般的になってきました。今回は、Node.jsのフレームワークであるExpressについてもJavaScriptではなく...

「リッチメニュー」と「クイックリプライ」を利用した無料でできるLINEチャットボットアプリの作り方（node.js + Heroku）

今回はクラウド環境Herokuを利用して無料でLINEチャットボットを作成してみました。メッセージをそのまま返すサンプルはよくあるので、もう少し処理を加えて小学生低学年レベルの計算問題をやりとりするLINEチャットボット「バーチャル先生」を...