データベース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...
フロントエンドGoogle Fontsを読み込んでWebページで表示する
Webページは基本的に、ブラウザ側のデバイスにインストールされたフォントを利用してテキストを表示させています。WindowsとMac等、デバイスによっては異なるフォントでテキストが表示されることになってしまいます。Webフォントを使うと、読...
フロントエンドJavaScriptでカウンターを作る
JavaScriptでカウンターを作っていきます。基本となるHTMLはこちら。index.htmlです。<!DOCTYPE html><html lang="ja"> <head> <meta charset="UTF-8" /> <met...