クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

API

【React/Next.js】大戦国・年表を作った(年表は随時追加中ー)

前回つくった「ビートルズDB」をベースにして「大戦国・年表」もつくりました。これによってNext.jsの動的ページの詳細設定やスプレッドシートでの重複チェックの知見が増えました。大戦国・年表は南北合一から元和偃武までの戦国時代(1392〜1616年)の年表…

【React/Next.js】「ビートルズDB」を作った(ビートルズの楽曲を検索できるアプリ)

以前、Next.jsの中でFetch APIでいろいろなデータを読み込みました。これをベースにもっとたくさんのデータを読み込んで検索ができるアプリ「ビートルズDB」を作りました。今回、Next.jsの動的ページのルーティング、動的APIのルーティング、APIのデータ整形…

【React】Realtime Database、Firestore(&スプレッドシート)のデータをFetch APIで読み込む(Next.js環境)

Reactの続きです。以前、React環境からFirebaseのRealtime DatabaseをFetch APIで読み込みました。今回はNext.js環境からRealtime Database、Firestore、ついでにスプレッドシート(Google Sheets API)のデータを読み込んでみます。完成品をデプロイしたVerce…

【React】フックとRealtime DatabaseをFetch APIで連携(React + Firebase環境)

Reactの続きです。前回はフック(React Hooks)とjson-serverをFetch APIで連携しました。今回はフックとRealtime DatabaseをFetch APIで連携します。Create React App環境にFirebaseをインストールしてクラウド上のRealtime Databaseのデータを読み込めるよう…

【React】フックとjson-serverをFetch APIで連携(Reactライフサイクルの理解)

Reactの続きです。前回はフック(React Hooks)を事始めました。基本のフックuseState、useEffect、useContextを体験しました。今回はこのフックにFetch APIを使ってjson-serverのデータベースを連携してみました。最初、処理実行のタイミングがうまくいかず、…

【Firebase】Realtime DatabaseにFetch APIでCRUD操作する

Firebaseの続きです。前回はRealtime Databaseにブラウザから直接CRUD操作しました。この時はset()などRealtime Databaseに予め用意されたメソッドを使いました。その後、APIのURLがあることがわかったので、Fetch APIによるCRUD操作にトライ。それではいき…

【Express】GitHub PagesからHerokuのPostgreSQLへCRUD操作(CORSエラー対策も)

Expressの続きです。前回はbody-parserでフォームからHerokuのPostgreSQLにCRUD操作しました。今回はGitHub PagesからCRUD操作します。別ドメインの問題でCORSエラーになったため、Expressのcorsモジュールでアクセス許可の設定もしました。それではいきまし…

【Express】Fetch APIでAPIを叩いてHerokuのPostgreSQLのデータを表示する

Expressの続きです。前回はHerokuのPostgreSQLのデータをサーバ側のEJSファイルで読み込んでブラウザに表示しました。今回はブラウザ側からFetch APIでAPIを叩いてデータを表示します。それではいきましょう!

【Express】Fetch APIとMySQLを連携してフォームからデータベースにCRUDする

Expressの続きです。前回はMySQLのデータをbody-parserでブラウザに返しました。今回はいよいよFetch APIとMySQLの連携してブラウザのフォームから入力したデータをCRUDします。それではいきましょう!

【Express】MySQLのデータをbody-parserでブラウザに返す

Expressの続きです。前回はBody-parserを使ってFetch API(およびFormタグ)のデータを受け取りました。今回はさらにMySQLのデータをブラウザに返す動きを体験したく。それではいきましょう!

【JS】Fetch APIを使ってJSON ServerにCRUDする

以前、Fetch APIを使ってJSON PlaceHolderにPOST送信してみました。今回は前々回に触れたJSON ServerをCRUD操作をしてみたく思います。JSON ServerにはDB機能だけでなくAPI機能も搭載されているので、そこに連携してみます。それではいきましょう!

【JS】Fetch APIでPOST送信してみる(Form送信との比較も)

以前はFetch APIを使って外部のJSONデータを読み込みました。先日、それをAsync/Await構文に書き換えてみました。これらはあくまでデータの読み込みだけでしたが、今回はFetch APIを使ってデータをPOST送信をしてみます。Formタグからの送信との挙動の比較も…