JavaScriptHTMLとJavaScriptでドラッグアンドドロップできるリストを作る
今回は、ドラッグアンドドロップができるリストを作成します。Drag and Drop Sortable List With Javascript (Simple Example)の記事を参考にしました。完成形のGIF動画です。リストをドラッ...
2022-12
JavaScript
CSSJavaScriptとCSSでアコーディオンメニューを作る
今回はJavaScriptとCSSでアコーディオンメニューを作っていきたいと思います。完成形はこんな感じです。アコーディオンメニューの完成形アコーディオンメニューの作成今回のファイル構成です。全部同じディレクトリにあります。- index....
データベースExpress.jsとPostgreSQLでAPIを作成する
こんにちは。今回は、ローカルにPostgreSQLでデータベースを用意して、ExpressでREST APIを作成してみたいと思います。GETリクエストとPOSTリクエストに対応します。PostgreSQLでデータベースとテーブルを作成する...
CSSウェブサイトに簡単に雪を降らせるスクリプトを試す
一行のスクリプトタグを追加するだけで雪を降らせられるものがあったので試してみます。スクリプトタグはこちら。まずはHTMLとCSSでベースを作ります。いったん雪がないバージョンを作成します。雪がない、ただのHTMLとCSSソースコードは下記。...
CSSTailwindを使ってレスポンシブなお問い合わせフォームを作ってみる
今回は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の「Ｐｒｏｇｒａｍ Ｌｉｓｔ ＡＰＩ （Ｖｅｒ．２）」を利用します。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...