メインカテゴリーを選択しなおす
Windowsのローカル環境にNext.jsの開発環境を構築するメモ【備忘録】
お疲れ様です。 業務でNext.jsを使うことになり環境構築から対応が必要になったので試しに個人PCに環境構築したメモです。（自分用） もともとNext.jsを使った開発は経験があるのですが、Dockerでdevcontainerを作成して開発をしていました。 今回作成する環境はDockerを使用せずにWindowsのローカルに構築します。 Node.jsのインストール yarnのインストール Next.jsのインストール Node.jsのインストール 公式サイトからインストーラをダウンロードし、インストールします。 nodejs.org こんな感じのインストーラが立ち上がります。基本的にデフ…
![[Next.js] Supabase カレンダーメモアプリ チュートリアル (後編)](https://img.blogmura.com/sites/1282896/post-images/71142497.webp/crop/435x435)
[Next.js] Supabase カレンダーメモアプリ チュートリアル (後編)
Next.jsの初学者向けチュートリアルコンテンツ、カレンダーメモアプリ チュートリアルの後編です。カレンダー…
[Next.js] Supabase カレンダーメモアプリ チュートリアル (前編)
Next.jsの初学者向けチュートリアルコンテンツです。カレンダー形式のメモアプリをNext.js及びType…
![[Next.js] 学習記録アプリ Firebase認証・DB実装 Zennで書籍化してみました](https://img.blogmura.com/sites/1282896/post-images/70343477.webp/crop/435x435)
[Next.js] 学習記録アプリ Firebase認証・DB実装 Zennで書籍化してみました
以前、お送りしてきた、以下の、Next.jsとFirebaseの認証・DBを利用した、学習記録アプリのチュート…
![[React] 学習記録アプリ with Firebase、Zennで書籍化してみました](https://img.blogmura.com/sites/1282896/post-images/70082622.webp/crop/435x435)
[React] 学習記録アプリ with Firebase、Zennで書籍化してみました
これまで、ブログ記事としてお届けしていた、ReactとFirebaseによる学習記録アプリのチュートリアルです…
![[Next.js] 学習記録アプリ Firebase認証・DB実装 （Admin SDK編）](https://img.blogmura.com/sites/1282896/post-images/68740706.webp/crop/435x435)
[Next.js] 学習記録アプリ Firebase認証・DB実装 （Admin SDK編）
前編・後編に渡ってお送りしてきた、Next.jsとFirebaseによる、学習記録アプリ、今回は番外編として、…
[Next.js] 学習記録アプリ Firebase認証・DB実装 （後編）
Next.jsによる学習記録アプリ、Firebase認証・DB実装 の後編です。前編に続き、後編では、DBデー…
[Next.js] 学習記録アプリ Firebase認証・DB実装 （前編）
Reactのチュートリアルとして、これまで、SupabaseやFirebase連携等、色々なパターンで紹介して…
![[React] チュートリアル 学習記録アプリ Firebaseで認証・DB実装してみた （後編）](https://img.blogmura.com/sites/1282896/post-images/67842423.webp/crop/435x435)
[React] チュートリアル 学習記録アプリ Firebaseで認証・DB実装してみた （後編）
Reactのチュートリアル、学習記録アプリ Firebase認証・DB実装の後編となります。前編では、Reac…
[React] チュートリアル 学習記録アプリ Firebaseで認証・DB実装してみた （前編）
これまで、Supabaseの活用を中心に、色々と試行してきた、学習記録アプリのチュートリアルですが、今回は、ホ…
![[React] チュートリアル 名刺アプリ Supabase連携 （拡張編）](https://img.blogmura.com/sites/1282896/post-images/66499457.webp/crop/435x435)
[React] チュートリアル 名刺アプリ Supabase連携 （拡張編）
Reactのチュートリアル記事です。Supabase連携や、カスタムフック、useContextなど
[React] チュートリアル 名刺アプリ Supabase連携 （後編）
Reactのチュートリアル記事です。名刺アプリ Supabase連携 （後編）です。本記事は、以下の記事をモチ…
[React] チュートリアル 名刺アプリ Supabase連携 （前編）
Reactのチュートリアル記事です。今回の記事も、以下の記事をモチーフに作成した名刺アプリのチュートリアルです…
【TypeScript入門シリーズ】第2章：TypeScriptの開発環境を整える
TypeScriptを始めるための開発環境を初心者向けに解説。TypeScriptのインストール方法、プロジェクトのセットアップ、Visual Studio Codeなどのエディタ設定、tsconfig.jsonの基本設定について詳しく説明します。
【TypeScript入門シリーズ】第1章：TypeScriptとは？
TypeScriptとは何か、JavaScriptとの違い、そしてTypeScriptを学ぶべき理由について、初心者にもわかりやすく解説。静的型付けの利点、開発効率の向上、TypeScriptの基本的な機能について学びます。
[React] チュートリアル 学習記録アプリ 3 ユーザー認証実装 （後編）
Reactチュートリアル、学習記録アプリのユーザー認証実装、後編です。Supabaseの認証機能を利用したユー…
[React] チュートリアル 学習記録アプリ 3 ユーザー認証実装 （前編）
チュートリアル 学習記録アプリ、3回目です。前回まででSupabaseを活用したDBデータの読み込み・編集・削…
![[React]チュートリアル 学習記録アプリ 2 Supabase編](https://img.blogmura.com/sites/1282896/post-images/65912939.webp/crop/435x435)
[React]チュートリアル 学習記録アプリ 2 Supabase編
前回に続き、学習記録アプリのチュートリアルの2回目です。今回は、学習記録データの格納に、BaaS（Backen…
少し前からReactの勉強をしてます。本日ご紹介するのは、よくある、Todoリストの作成です。こちらの記事を参…
[React]Todoリストの作成 – 初学者向け、その2です。前回は基本的に元の参考記事に準じた内容でしたが…
今回の記事は、以下の記事をモチーフに作成した学習記録アプリのチュートリアルです。 こちらの3-3. 課題3をベ…
【Hello World】TypeScript + React Native for Web + React Navigation + Webpack
今度はTypeScript + React Native for Web + React Navigation + webpack + github pages templateを作ってみました。
【Hello World】TypeScript + React Native for Web + Webpack
今度はTypeScript + React Native for Web + webpack + github pages templateを作ってみました。
【簡単】TypeScript + webpack で GitHub pages にホストする
自分の作ったものを簡単に誰でも触れるよう、github pagesにホストしたい。。ポートフォリオ作りのために、github pagesに作品を載せたい。。というわけで、typescript + webpackを使ってgithub pagesにホストした流れをシェアできればと思います。
【Node.js】Socket.IO / Express / TypeScriptでソケットサーバー構築【Room接続 / メッセージ投稿】
Node.js, Socket.IO, Express, TypeScriptを使って、ターミナル上で利用できる簡単なチャットアプリを作ります！ 本格的なアプリを作る前に各種パッケージの使い勝手を理解するのに最適なサンプルですので、ぜひ参考にしてください
JavaScriptとTypeScriptの違いについて（サンプルコードあり）
JavaScript と TypeScript は、主にWeb開発において使われるプログラミング言語ですが、似ているようでいくつかの点で異なります。今回は、JavaScript と TypeScript の言語仕様の違いや互換性について、簡
【TypeScript】Graph API を使って Instagram の投稿を取得する【2022年6月版（v14.0）】
React x TypeScriptでInstagramの投稿をサイト上に表示したかったときの備忘録 使用したGraph APIはv14.0だけど12.x, 13.xあたりも同じっぽい（多分）（未検証） 全体的な流れのうち、1, 2は書くのめんどいので割愛 Instagramをプロアカウントに変更する facebookとInstagramをリンクさせる facebook developerアカウントでアプリの作成 Graph APIで使用するアクセストークンの有効期限の延長 instagram business idの取得 instagramの投稿の取得してサイトに表示する 1. facebo…
必要なパッケージのinstall $ npm install --save-dev @babel/preset-typescript ts-jest @types/jest babel.config.js に追記 module.exports = { presets: [ ["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-typescript" // 追加 ], }; テストの実施 $ npm run test > xxxxxx@1.0.0 test > jest PASS __tests__/sam…
TypeScript x axios で配列を非同期で処理する方法
やりたいこと 会員情報を複数取得したい 会員情報を複数取得できるAPIが存在しない 実装 APIへアクセスするファイル export default class Sample { public async fetchUsers(): Promise<{username: string, /* ... 適当な型定義 */}[]> { return Promise.all( [1, 2, 3].map(async row => axios.get(`http://example.jp/api/member/${row}`), ), ).then((results: AxiosResponse<{ …
Google Analytics Data API (GA4) を使ってNextjs上に人気記事を表示する
Google Analytics Data API (GA4) + Nextjsで人気記事の表示機能を実装します。 ユーザーのアクセス数によって表示される記事が動的に変わります。
[React+Tailwind] Carousel を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Carousel コンポーネントです。 JavaScript ベースの Carousel.js です。 import { forwardRef }...
kintoneを使用していて、Twitterのハッシュタグのような機能を使用したいと思ったことはありませんか？ただ、フリーワードでユーザーがタグを登録するとなると、サブテーブルなどを活用しなければうまく実装することができません。
[React+Tailwind] Card を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Card コンポーネントです。 JavaScript ベースの Card.js です。 import { forwardRef } from 'r...
[React+Tailwind] ButtonGroup を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Button コンポーネントです。 JavaScript ベースの Button.js です。 import { forwardRef } fro...
[React+Tailwind] Button を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Button コンポーネントです。 JavaScript ベースの Button.js です。 import { forwardRef } fro...
[React+Tailwind] Breadcrumb を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Breadcrumb コンポーネントです。 JavaScript ベースの Breadcrumb.js です。 import { forwardR...
[React+Tailwind] Badge を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Badge コンポーネントです。 JavaScript ベースの Badge.js です。 import { forwardRef } from ...
[React+Tailwind] Avatar を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Avatar コンポーネントです。 JavaScript ベースの Avatar.js です。 import { forwardRef } fro...
[React+Tailwind] Accordion を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Accordion コンポーネントです。 JavaScript ベースの Accordion.js です。 import { forwardRef...
[React+Tailwind] Alert を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Alert コンポーネントです。 JavaScript ベースの Alert.js です。 import { forwardRef } from ...
[React+Tailwind] Alert を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Alert コンポーネントです。 JavaScript ベースの Alert.js です。 import { forwardRef } from ...
サンプルを例に、React Queryの使い方を解説します。入門レベルですが、参考になればと思います。今回作成するサンプルReact Queryとaxiosを使って、GETとPOSTのHTTP通信を行うサンプルを作成しました。GET：取得し
VSCodeにESLintとPrettierを設定してReact+TypeScriptのコードを自動整形
チーム開発をしていると、コーディングスタイルがバラバラで困ることがあります。インデントがずれているスペースの開け方が違う改行の位置がそろっていないということで、コードを自動整形してしまおうという試みです。エディターはVSCode、プロジェク
![[VSCode] 自動補完機能が効かなくなった](https://img.blogmura.com/sites/1282896/post-images/67463299.webp/crop/435x435)
