TodoONada株式会社

noteをご覧いただきありがとうございます。 お仕事の依頼お待ちしております。

TodoONada株式会社

noteをご覧いただきありがとうございます。 お仕事の依頼お待ちしております。

マガジン

  • MVP開発マガジン

    MVP(Minimum Viable Product)開発に関する記事を纏めています。

最近の記事

  • 固定された記事

新規IT事業に『MVP開発』をおすすめする強い理由とは?

『MVP開発』という言葉をご存知ですか? 「MVPなんて言語あったっけ……?」と不安になられるかもしれませんが、大丈夫です。MVPは言語ではありません。 しかし1日ごとに技術が進歩している現代のIT業界、 特にスタートアップや新規IT事業を興す際には、絶対に『MVP開発』を知っておいたほうがいいです。 この記事では、MVP開発の基本概念やメリット、実践的な使い方等をご紹介します。 MVPとは何か?MVP開発のMVPは『Minimum Viable Product』の略です

    • Next.js とSupabaseで求人マッチングアプリを作る⑦~求職者一覧、求職者詳細情報~

      今回は求職者一覧と求職者詳細を作成します。 企業一覧 企業詳細 求職者一覧 求職者詳細 求人一覧 求人詳細 おおよそ前回の流れと一緒なので、もし自学目的であれば、前回のコードを見ながら作ってみたあと、答え合わせをしても面白いかもしれません。 それでは見ていきましょう! Supabase側の設定前回と同様に求職者テーブル(mst_job_seeker)の`SELECT`ポリシーをtrueに変更します。 mst_job_seekerのポリシー変更Supabase

      • Next.js とSupabaseで求人マッチングアプリを作る⑥~企業一覧、企業詳細情報~

        今回から一覧系ページ、詳細系ページの作成を進めます! 具体的には 企業一覧 企業詳細 求職者一覧 求職者詳細 求人一覧 求人詳細 になります。 今回は企業一覧と企業詳細を作成します。 単に情報取得・表示だけでなく、ポリシーの調整も含まれているため、そのあたりも意識して制作していきましょう。 Supabase側の設定今まで企業テーブル(mst_company)は自社のアカウントでした取得できないようにしていましたが、 今回求職者が企業一覧を見ることができるよう

        • Next.js とSupabaseで求人マッチングアプリを作る⑤~求人募集の登録・修正機能~

          今回は前回の続きで求人募集の登録・修正機能とそのUIを追加します。 これも『企業のプロファイル』『求職者のプロファイル』と同じように実装したいところですが、少し違う点があります。 例えば『"新規作成"と"既存求人の編集"の切り替え』や『作成・編集の権限』等です。 そのあたりに注意して構築を行いましょう。 Supabase側準備求人テーブルの作成(trn_job)Supabaseのダッシュボードから`Table Editor`→`New Table`を押下し、新しいテーブル

        • 固定された記事

        新規IT事業に『MVP開発』をおすすめする強い理由とは?

        マガジン

        • MVP開発マガジン
          2本

        記事

          Next.js とSupabaseで求人マッチングアプリを作る④~求職者のプロファイル変更~

          今回は前回の記事の続きで、『求職者の基本情報を変更する』UIを追加します。 基本的な流れは『企業のプロファイル変更』と同じです。 なのでもし自学目的で見ておられる方は、企業プロファイルのコードを見ながら、求職者部分のUI実装を行ってみてください。 Next.js実装components/userinfo/MainContents.tsx以前同様に、求職者の基本情報の変更画面も追加します。 import { userInfoContentsType } from "@/ut

          Next.js とSupabaseで求人マッチングアプリを作る④~求職者のプロファイル変更~

          Next.js とSupabaseで求人マッチングアプリを作る③~企業のプロファイル変更~

          前回に引き続き、求人マッチングアプリの制作方法をご紹介します! 先日作ったマスタデータに対して、UIを追加していきます。 今回は、以下のような『企業の基本情報を変更する』UIを追加しましょう。この記事をベースに、UI作成・DBとの紐づけを習得してみてください。 Next.js実装components/UserInfo.tsx"use client";import Link from "next/link";import { createClient } from "@/u

          Next.js とSupabaseで求人マッチングアプリを作る③~企業のプロファイル変更~

          Next.js とSupabaseで求人マッチングアプリを作る②~マスターデータ設定~

          今回は前回の記事に続き、今後必要となるマスターテーブル群を作成していきます。 Supabaseの`Table Editor`を開き、下記の順序で設定してください。(外部キーの関係上順番通りに作成しないとエラーになる可能性があるため注意) Supabaseは、この通りインターフェースを通して、簡単にテーブル設計が可能です。 是非この記事を通して、DBの設定方法等を勉強してみてください。 業界テーブル(mst_industry)ITや金融、商社など業界を指定するテーブルです

          Next.js とSupabaseで求人マッチングアプリを作る②~マスターデータ設定~

          Next.js とSupabaseで求人マッチングアプリを作る①~ユーザ認証~

          今回からNext.jsとSupabaseを利用して求人マッチングアプリを作成します。 現在求人マッチングアプリに、大きな注目が集まっているのはご存知でしょうか? IT業界をはじめ多くの企業が人手不足となっており、企業は採用に多大なコストと労力を支払っています。 単純に労働人口が減っていることもありますし、働き方や転職に対する意識の変化も相まって、求人マッチングや副業マッチングの市場規模が急拡大しているのです。 なお弊社では『マッチングワン』という『低コスト・短期にマッチン

          Next.js とSupabaseで求人マッチングアプリを作る①~ユーザ認証~

          Next.jsとSupabaseで作成したチャットアプリにお知らせ機能を実装する

          今回は以前作成したチャットアプリに、お知らせ機能を追加してみましょう! ひょっとしたら『お知らせ機能なんて目立つ形で入れなくても良いのではないか』と思うかもしれませんが、既存ユーザーへのお知らせ機能というのは、多くの人が想像している以上に重要です。 例えば新規機能を追加したり、新規オプションを追加した際、まず最初にアピールするべきは既存顧客です。 あなたのサービスを使いたいと思っており、ニーズもあることがわかっているユーザーだからです。 たとえ新規プラン等の直接的なPR

          Next.jsとSupabaseで作成したチャットアプリにお知らせ機能を実装する

          Next.js+Supabaseでアプリを作ろう!記事一覧

          TodoONada株式会社ではNext.js、およびSupabaseでのアプリ開発記事を定期的にご紹介しています! アプリ開発に必要な技術を順に紹介しているので、是非ごらんいただき技術向上に役立ててください。 Next.js + SupabaseでTodoアプリ作成 CRUDの基本を学ぼうNext.js + Supabaseでリアルタイムチャットを作ろうNext.js + SupabaseでStorageを利用した画像投稿アプリ作成Next.js + SupabaseでRL

          Next.js+Supabaseでアプリを作ろう!記事一覧

          Next.js + SupabaseでGraphQLを利用する方法

          ここまでSupabaseによるアプリ開発方法をいくつかご紹介してきましたが、ぜひ使ってほしい機能が一つあります。 それが『GraphQL』です。 そもそも『GraphQL』とは何か、というところからご説明すると、『GraphQL』はMeta社(旧Facebook)が開発したAPI用のクエリ言語であり、データの取得時に優れたパフォーマンスを発揮します。 通常のREST API等からユーザーの"名前"と"年齢"を取得しようとした場合、ユーザーの情報すべてがAPIから返ってきて

          Next.js + SupabaseでGraphQLを利用する方法

          Nextjs + SupabaseでSupabaseのStorage Image Transformationsを利用する方法

          前回はSupabase上で『画像投稿アプリの最適化』方法についてご紹介しました。 しかしながらSupabaseでPRO以上のプランを契約しておられる場合、もっと簡単に画像の最適化を行う事ができます。 それが『Storage Image Transformations』です。 今回はそちらの実装方法をご紹介します。 ※Storage Image Transformationsの機能はPROプラン以上(PRO・TEAM・ENTERPRISE)でないと利用できませんのでご注意くだ

          Nextjs + SupabaseでSupabaseのStorage Image Transformationsを利用する方法

          [初心者向け]AIを何から触ってみたらいいのかわからない人のための比較ガイド

          連日のAIニュースや、NVIDIA株の高騰等を受けて、多くの人に生成AIの凄さ・素晴らしさが伝わっているかと思います。 しかしながら、皆さんは実際に生成AIを触ったことがあるでしょうか? 実を言えば『AIに興味がある』と思いながらも、触ったことのない人、業務に使っていない人は多いようです。 ベリタスの調査によれば、日本で生成AIを業務利用している割合は38%と、11カ国中最も低い利用率でした。 そのぐらい、まだ日本ではAIの利用が進んでいません。 逆に言えば、今からでも生

          [初心者向け]AIを何から触ってみたらいいのかわからない人のための比較ガイド

          Next.jsとSupabaseで全文検索を実装する方法

          今回はNext.jsとSupabaseを利用し、テーブルの全文検索を行うことができるアプリを作成します。 実はこの『全文検索』、FirebaseよりもSupabaseのほうが優れている分野の一つです。 FirebaseはNoSQLデータベースを使っているため、ネイティブの全文検索がありません。そのため独自の検索ソリューションを利用する必要があります。 しかしSupabaseはPostgreSQLデータベースを利用しているため、元々全文検索機能が含まれており、『textSea

          Next.jsとSupabaseで全文検索を実装する方法

          Supabase + Next.jsで画像投稿アプリを最適化する(画像圧縮、ファイルサイズ制限、ファイルのアップロード数制限)

          以前、認証付きのストレージサービスの作り方をご紹介しました。 しかしながら、もしこれをリリースして世の中に出した場合、解決しなければ行けない問題がいくつかあります。 例えば『サイズ制限』がついていないため、ユーザーがスマートフォンで撮影した無圧縮の画像をそのままアップロードするかもしれません。 更に、『投稿制限』もついていないため、一人で何点でも投稿が出来てしまいます。 このままではストレージや処理を圧迫するだけでなく、ユーザービリティも損なってしまうでしょう。 なので今

          Supabase + Next.jsで画像投稿アプリを最適化する(画像圧縮、ファイルサイズ制限、ファイルのアップロード数制限)

          SupabaseのEdge FunctionsとSendGridでメールを一斉送信する

          WEBサービスやECサイト、会員向けメルマガを発行する際、どのようにして送信されますか? 『普通にメールソフトやGmailから送信すればいいのでは?』と思うかもしれませんが、実はそれ、すごくリスクが高い手法です。 同じIPから同じ文面を大量送信すると、受け手のブラックリスト等に入れられ、普通のビジネスメールですら届かなくなるかもしれません。 では一般企業はどのようにしてメールを送っているのか、といえば『SendGrid』のようなメール送信サービスを利用しています。 Send

          SupabaseのEdge FunctionsとSendGridでメールを一斉送信する