はじめに

リンクラフト株式会社の星です。
リンクラフトアドベントカレンダーの18日目を担当します。

フロントエンドエンジニアを目指す僕が0からサイトを完成させるまでの経緯を簡単に書かせていただきました！

現在はシステムエンジニアをやらせていただいているのですが、将来的にはフロントエンドエンジニアになりたいと考えています。

そこで今の状況でフロントエンドのスキルを身につけるにはどうしたらいいかと考えた時に、サイトを０から一度作ってみようと思いつきました。

現在のアサイン先で役に立つサイトを作れば、自分のスキルアップにもなるし、アサイン先の作業効率の向上にも繋がると考え、色々考慮した結果タスクを管理するサイトを作成してみることにしました。

そして約半年スキマ時間を使って完成させたタスク管理サイトがこちらです！！！

↓↓↓
https://task-manager-eta-eosin.vercel.app/
↑↑↑

変な攻撃はしないでください(T ^ T)

現在はうちの社員のみ登録が可能になっております。

設計

いわゆる僕は「コーディングが多少できる」というレベルでした。サイトを閲覧できるようになるまでというのは

設計→コーディング→デプロイ

ざっくりこんな感じだと思いますが、デプロイ部分をどうすればいいか全くわかりませんでしたし、設計も何から始めればいいか分かりませんでした。

そこでお馴染みのchatGPTにサイトをブラウザで閲覧できるようになるまでの流れなど何から何まで聞いてみました。やっぱりすごいですね、、全部教えてくれる、、(僕はchatGPTのこと先生と呼んでます笑）

先生に聞いたり、Udemyを活用したりして、設計からスタートしました。作成したのが、

ディレクトリマップ・・・Webサイト内のコンテンツタイトルやURL、内容、ディスクリプションなどの情報をまとめた一覧表
画面遷移図・・・Webサイトやシステム開発の際にサービス全体を把握するためにまとめた図
ワイヤーフレーム・・・Webページのレイアウトやコンテンツの配置を定めた設計図

です。

今回はFigmaを使用して作成してみました。作成した画面遷移図がこちらです。

作成途中の部分もありますが、作ってて楽しくなるように作成してます！

コーディング

コーディングでは言語がTypescript、フレームワークにNext.js(Reactをベースに開発されたフロントエンドフレームワーク)、バックエンドにSupabaseを使用しました。業務でTypescript、Next.jsを以前使用したことがあったので、Udemyで勉強し直して理解を深めました。

Next.js

Next.jsはURLルーティングと呼ばれるリクエストされたURLに対して呼び出すアクションを決定する仕組みや、Webアプリ開発を効率よくするための機能が多く含まれているのが特長です。

Reactとの違いとされているのがサーバー機能の有無です。Next.jsはサーバー機能を持っていますが、Reactにはサーバー機能がありません。つまり、Next.jsは単体でWebアプリを動作させることができますが、Reactは別途サーバーを用意する必要があります。サーバーを用意するということは、サーバー用のモジュールをインストールし、ディレクトリ構成などを検討する必要があるため、Reactのほうが学習コストや難易度が高くなります。

2つ目の大きな違いは、Next.jsはURLルーティングを自動生成してくれることです。初期化時に生成されたフォルダにファイルを配置すると、それに合わせてURLが生成されます。

Supabase

そしてバックエンドに使用したのがSupabaseになります。

SupabaseはBaaSの一種です。BaaS（バース）とは「Backend As A Service」の略称で、アプリケーションのインフラ・ミドルウェア（バックエンド）をクラウド上で提供するサービスです。

BaaSの代表的なサービスに、Googleが提供するFirebaseがあります。Supabaseは明確にFirebaseの代替を目指して、機能の高度化・差別化を図っています。

じゃあ具体的に何ができるのかというと、認証、データベース管理、リアルタイムサブスクリプション、ストレージなど必要なすべてのバックエンド機能を提供してくれ、それらを使用することによりバックエンド開発が手軽にできるようになります！

例えばログイン機能の実装コードになります。

const { data, error } = await supabase.auth.signInWithPassword({
  email: 'example@email.com',  // ログインに使用するメールアドレス
  password: 'example-password',  // ログインに使用するパスワード
});

Supabaseクライアントを作成するコードは、

import { createClient } from '@supabase/supabase-js';

// Supabase URLとAnonキーを使用してクライアントを作成
const supabaseUrl = "https://your-supabase-instance.supabase.co"; // SupabaseインスタンスURL
const supabaseKey = "your-anon-key"; // APIキー（公開用のAnonキー）

const supabase = createClient(supabaseUrl, supabaseKey);

となっています。抜粋しましたがシンプルに作れます！

開発以前はログイン機能の実装はどのようにするのか見当もつきませんでしたが、BaaSを使用することでこんなにも簡単に実装することができました。

デプロイ

最後はデプロイです。コードが完成したところでWebで閲覧できるようになるまで何をどうしたらいいかは全く分かりませんでした。先生に聞いてみるとVercelを使用してデプロイするといいと聞いたので、試してみました。

サーバー

ざっくりいうとWebで閲覧できるようになるにはサーバーにサイトを置く必要があります。このサーバー部分にあたるサービスがVercelになります。そのサーバーがどのように動いているかというと

1.ブラウザがリクエストを送る

ユーザーがURLを入力。
このリクエストがインターネットを通じてVercelのサーバーに送られます。

2.サーバーがレスポンスを返す

Vercelのサーバーが、保存されているWebページ（HTML, CSS, JavaScriptなど）をブラウザに返します。

3.バックエンドとのやり取り

例えばユーザーがタスクを追加した場合、フロントエンド（Next.js）がSupabaseのサーバーにデータを送信。
Supabaseがデータベースに保存し、更新されたタスク一覧を返します。

となります。

Vercel

それでは詳しくVercelがどのような動きをしているかというと、

コードを受け取る

作成したコードをVercelにアップロードします。（GitHub経由で簡単に連携が可能！）
コードを動く形に変える（ビルドする）

Vercelが自動的にコードを「Webブラウザで動く形」に変換してくれます。専門知識は不要！
世界中に配信する（ホスティングする）

完成したWebアプリをVercelの高速なサーバーネットワークを使って公開します。

公開後は、URL（例: https://myapp.vercel.app）が発行されます。このURLを使えば、誰でもそのWebサイトにアクセスできます。

というようになっています。

最後に

今回のサイト作成を機に設計からデプロイまでを一通り自らの手で実施することができ、大変いい勉強になりました。ですが作成して終わりではないので、運用保守にも力を入れていきたいと思います。他の社員の方から、欲しい機能などたくさん声をいただいたので日々改修に努めていきます。

今回はBaaSに頼ってしまった部分もあるので、次はバックエンド部分も自ら作成してみたいと思います。

最後まで読んでいただきありがとうございました。

一緒に働く仲間を募集中です！
リンクラフト株式会社では、組織拡大に伴い積極的な採用活動を行っています。
少しでも興味がある方はぜひご連絡ください。
▽会社ホームページ
https://lincraft.co.jp/
▽Instagram
https://www.instagram.com/lincraft.inc/
▽ご応募はこちらより
https://lincraft.co.jp/recruit
※カジュアル面談も受付中です。ご希望の方はHPのお問い合わせフォームよりご連絡ください。