クモのようにコツコツと

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

JSON

【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】JSONデータをJSXに読み込んで表示する(Reactとメタ言語の比較-3)

Reactの続きです。前回はreact-helmetでheadタグの中身を動的に打ち替えました。今回はHTMLのテキスト部分を外部JSONデータからJSXに読み込みます。インラインのタグを認識するためにdangerouslySetInnerHTMLを、JSX内でループするためにmap()を使いました。…

【TypeScript】外部のJSONファイルを型付で読み込む

メタ言語の続きです。前回はgulpでwebpackを起動してモジュールをバンドルしました。今回は、その中のデータ部分のモジュールを外部JSONファイルにして、それをTypeScriptで読み込みます。データに型も設定します。それではいきましょう!

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

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

【擬似NoSQL】ターミナルからAPIモックのJSON ServerにCRUDする

DB操作の続きです。前回はMAMPのMySQLをターミナルから操作しました。今回はAPIモックのJSON Serverにトライします。JSONデータをDBとして使うNoSQLライクなCRUD体験。curlコマンドを使ってターミナルから操作します。それではいきましょう!