bauhaus

昔々の1994年頃〜2000年代後半頃のWEB創成期に、WEBデザイン・企画・制作をや…

bauhaus

昔々の1994年頃〜2000年代後半頃のWEB創成期に、WEBデザイン・企画・制作をやってました。その後、プラットフォームSIを中心に従事してきましたが、最近リスキリングで、フロントエンド関連を中心に勉強をしています。よろしくお願いします。Xは@amayan_tです。

[React] チュートリアル 名刺アプリ Supabase連携 （後編）

Reactのチュートリアル記事です。 名刺アプリ Supabase連携 （後編）です。 本記事は、以下の記事をモチーフに作成した名刺アプリのチュートリアルです。 こちらの「4. 名刺アプリの開発」をベースに進めてます。元記事では、データの格納にBaaS（Backend as a Service）であるSupabaseを利用したものとなってますので、同様にSupabaseを活用して開発したいと思います。なお、参考記事ではCI/CDの為のテスト実装まで触れてますが、本記事ではテ

bauhaus

    • [React] チュートリアル 名刺アプリ Supabase連携 （前編）

      Reactのチュートリアル記事です。 今回の記事も、以下の記事をモチーフに作成した名刺アプリのチュートリアルです。 こちらの「4. 名刺アプリの開発」をベースに進めてます。元記事では、データの格納にBaaS（Backend as a Service）であるSupabaseを利用したものとなってますので、同様にSupabaseを活用して開発したいと思います。なお、参考記事ではCI/CDの為のテスト実装まで触れてますが、本記事ではテストまでは言及していません。機能面に焦点を当て

      bauhaus

      • [CSS] レスポンシブなfont-size指定

        CSSにおいて、レスポンシブ対応って本当に大変です。各種デバイスの画面サイズに合わせてブレイクポイントをいくつか設けて、レイアウト調整をしていきますが、同じブレイクポイントの中でも画面サイズによって意図しないレイアウトになったり、崩れたり、試行錯誤が続いたりします。 フォントサイズについても同様で、ブレイクポイントに応じて、よりも、もっと画面サイズに応じて柔軟に可変するような事出来ないだろうかと思ってました。 そんな中、なかなか良いプラクティスを見つけました。こちらを参考

        bauhaus

        • [React] チュートリアル 学習記録アプリ ユーザー認証実装

          チュートリアル 学習記録アプリ、3回目です。前回まででSupabaseを活用したDBデータの読み込み・編集・削除を実装しました。 今回は、Supabaseの認証機能を利用してユーザー認証の仕組みを設けてみたいと思います。 Supabaseの設定、環境構築、サインアップ機能、ログイン・ログアウト、パスワードリセット機能の実装を解説します。 長い内容ですが、じっくり取り組んでいただけると嬉しいです。 なお、これまでの記事は以下となります。 はじめに本記事は、Reactの初学者

          bauhaus

        [React] チュートリアル 名刺アプリ Supabase連携 （後編）

        bauhaus

          [React]チュートリアル 学習記録アプリ Supabase編

          前回に続き、学習記録アプリのチュートリアルの2回目です。今回は、学習記録データの格納に、BaaS（Backend as a Service）であるSupabaseを利用してみました。 コードは前回の記事をベースに変更していきます。 前回の記事はこちらです。 はじめに本記事は、Reactの初学者向けのチュートリアルコンテンツです。前回の記事をベースにBaaSである、Supabaseのデータ処理を実装し、実際にアプリケーションをデプロイしてユーザーが使えるリリースまでを行えます

          bauhaus

          [React]チュートリアル 学習記録アプリ Supabase編

          bauhaus

          [React]チュートリアル 学習記録アプリ 1

          今回の記事は、以下の記事をモチーフに作成した学習記録アプリのチュートリアルです。 こちらの3-3. 課題3をベースに進めてます。元記事では、データの格納にBaaS（Backend as a Service）であるSupabaseを利用したものとなっていますが、この記事では、データはローカルストレージに格納する方式としています。Supabaseを活用したものは、次回に紹介したいと思います。 はじめに本記事は、Reactの初学者向けのチュートリアルコンテンツです。上記参考サイ

          bauhaus

          [React]チュートリアル 学習記録アプリ 1

          bauhaus

          [React]Todoリストの作成 – 初学者向け２

          [React]Todoリストの作成 – 初学者向け、その２です。 前回は基本的に元の参考記事に準じた内容でしたが、ここからは、元記事以外の、私のオリジナルでカスタマイズした内容となります。より機能のブラッシュアップを行うのと、Firebase-GitHub連携を行い、GitHubにコミットの都度、Firebaseに自動でデプロイする仕組みを構築します。 前回の記事はこちら 前回参考にした記事はこちらです はじめに本記事は、Reactの初学者向けのコンテンツです。前回までの

          bauhaus

          [React]Todoリストの作成 – 初学者向け２

          bauhaus

          [React]Todoリストの作成 – 初学者向け１

          少し前からReactの勉強をしてます。 本日ご紹介するのは、よくある、Todoリストの作成です。 こちらの記事を参考にしています。 はじめに 本記事は、Reactの初学者向けのコンテンツです。基本は上記サイトの内容そのまま試しています。所々、追加の説明を記載したり、追加でカスタマイズをしてたりもしてます。Reactの基本的な使い方から実際にアプリケーションをデプロイしてユーザーが使えるリリースまでを行えます。 React環境は、Vite＋TypeScript CSS＋UI

          bauhaus

          [React]Todoリストの作成 – 初学者向け１

          bauhaus