2022-12

JavaScript

HTMLとJavaScriptでドラッグアンドドロップできるリストを作る

今回は、ドラッグアンドドロップができるリストを作成します。Drag and Drop Sortable List With Javascript (Simple Example)の記事を参考にしました。完成形のGIF動画です。リストをドラッ...
CSS

JavaScriptとCSSでアコーディオンメニューを作る

今回はJavaScriptとCSSでアコーディオンメニューを作っていきたいと思います。完成形はこんな感じです。アコーディオンメニューの完成形アコーディオンメニューの作成今回のファイル構成です。全部同じディレクトリにあります。- index....
データベース

Express.jsとPostgreSQLでAPIを作成する

こんにちは。今回は、ローカルにPostgreSQLでデータベースを用意して、ExpressでREST APIを作成してみたいと思います。GETリクエストとPOSTリクエストに対応します。PostgreSQLでデータベースとテーブルを作成する...
CSS

ウェブサイトに簡単に雪を降らせるスクリプトを試す

一行のスクリプトタグを追加するだけで雪を降らせられるものがあったので試してみます。スクリプトタグはこちら。まずはHTMLとCSSでベースを作ります。いったん雪がないバージョンを作成します。雪がない、ただのHTMLとCSSソースコードは下記。...
CSS

Tailwindを使ってレスポンシブなお問い合わせフォームを作ってみる

今回はHTMLとTailwindを使ってお問い合わせフォームを作ってみます。完成品はこちら。Tailwindのインストールと設定Tailwind公式サイトのTailwind CLIの記述を参考にインストールをしていきます。npm(Node....
バックエンド

express.jsにGETリクエストをしてJSONを返す

プロジェクトフォルダを作成し、Express generatorを利用してExpressをインストールします。expressのインストールターミナルで下記を実行します。npx express-generator次に、npm installで...
フロントエンド

React Router v6.4 でページ遷移をする

今回はReact Routerでページ遷移を行ってみます。今現在のバージョンは、6.4.5です。公式チュートリアルでviteを使っているので、viteを使ってインストールしてみます。viteを使ってReactをインストールターミナルで、np...
フロントエンド

ReactとReduxでNHK番組表APIを読み込む

React Reduxを使ってNHKの番組表のAPIを読み込みんでみます。今回は、NHK番組表APIの「Program List API (Ver.2)」を利用します。Create React AppでReactとReduxをインストールま...
フロントエンド

Create React Appでカウンターアプリをつくる

Create React Appで簡単なカウンターアプリをつくっていきます。Create React App インストールさっそく npx create-react-app counter-app を走らせます。ここでのcounter-ap...
バックエンド

express.jsでHello Worldを表示する

本家サイト(express.js)のチュートリアルを参考に、express.jsでHellor Worldを表示します。プロジェクトフォルダをつくってその中で作業します。フォルダ名は、なんでもOKです。私は日付を入れるのが好きなので、202...