データベース

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...
フロントエンド

Google Fontsを読み込んでWebページで表示する

Webページは基本的に、ブラウザ側のデバイスにインストールされたフォントを利用してテキストを表示させています。WindowsとMac等、デバイスによっては異なるフォントでテキストが表示されることになってしまいます。Webフォントを使うと、読...
フロントエンド

JavaScriptでカウンターを作る

JavaScriptでカウンターを作っていきます。基本となるHTMLはこちら。index.htmlです。<!DOCTYPE html><html lang="ja"> <head> <meta charset="UTF-8" /> <met...