Reactを勉強しながらSUBLINEの料金シミュレーションを作成してみた

この記事はインターパークの技術職がお届けする技術ブログです。

システム部開発ユニットの濱田です！

自分は2023年4月に新卒、そして開発未経験者として入社したのですが気づけばもうすぐ入社して1年が経とうとしているようです…
（大学生時代の怠惰な自分！時間はどうやら貴重なものだったらしいぞ！）

しかし、いつまでも「未経験」という言葉を振り回すわけにはいきません。

そこで今回は「できないなりに自分、もしくは周りの誰かが使ってちょっと便利なものを作る」というテーマで、勉強会に取り組んでみました！
最後まで奮闘記を読んでいただけると幸いです！

第1章 何作ろう

モノづくり経験があまりない自分は最初の一歩である「一体なにを作ればよいのか」にずっと躓いてしまいました。

そんな頭を悩ませ続けていた（現実逃避としていた）自分ですが、某S先輩とのやりとりを契機に、やっと作るものが決まりました。

それは「SUBLINE料金シュミレーション」です。

SUBLINEって…？

インターパークの自社サービスであるSUBLINEとは、「1つのスマホで仕事用に使う2つ目の電話番号を持つことができる」050電話アプリです。

小規模ではありますが自分も開発に携わっているサービスです。

SUBLINEでは1契約で何番号を取得するかによってお客様が契約するプランが異なります。

契約するプランに関しては公式HPにある料金・プラン比較ページから選ぶことができるのですが、初期費用や月額費用が一体どれだけかかるかについてはお客様ご自身で計算していただくほかない、というのが現状です。

そのため、事前に初期費用や月額費用を計算できることには少なからず価値があるのではと思い、「料金シミュレーション」を作成することに決めました。

ゴールが決まったところで早速開発…！といきたいところですが、いきなり社外に公開するレベルのものを作成するには自分のレベルが追い付いていないので、まずは最低限の動くものを作成しようというところから始めることにしました。

第2章 何使おう

事実として自分はまだまだ技術が身についていない人間なので、どのような技術が今回作成するモノに適しているかがわかりません。

でもわからないのなら調べればいいだけなので、「これは実現したい」ということを列挙して早速技術を調査することにしました。
最低限実現したいことは以下になります。

① 単一のHTMLページで完結させたい
② インタラクティブなやりとりができるようにしたい（使用者が契約したいプラン・取得したい番号数を入力することで瞬時に初期費用と月額費用がわかるようにしたい）
③ バックエンドの準備は必要ないため、手軽に開発を進めたい

調査はすぐに終わり使用する技術が決まりました。その名も「React」!

第3章 使う技術を調べてみよう

Reactって…？

自分が作ろうとしているモノは俗に言う「SPA」であるとわかり、SPAというキーワードを用いて調べていくと最近は「React」がよく採用されるということがわかりました。

ReactはMeta社（公開時点は旧Facebook社）が開発したJavaScriptのライブラリです。

（ライブラリとフレームワークの厳密な違いについて自信をもって答えることはできませんが、開発者である自分がコントロールできるものをライブラリ、自分がコントロールできず従うものがフレームワーク、とざっくりと理解した気になっています。）

コンポーネントという要素（HTMLを返すJavaScriptの関数）を使ってUIをくみ上げていくのがReactの特徴です。

Next.jsって…？

「もうReact使えばいいじゃん！終了！」と浮かれていましたが、公式ドキュメントには以下の記述が…

今回作成する小規模なアプリケーションではそこまでNext.jsの恩恵を感じられなさそうですが、一応採用してみることにします。

（追記：本当にNext.jsを活かせていないのでNext.jsの詳細については割愛させていただきます。）

第4章 制作に取り掛かろう

使用する技術が決まったところで早速制作を進めていくことにします。

プロジェクト環境の準備

Reactでプロジェクトを始めるにはNode.jsのインストールが必要なようです。

自分はWindowsを使用しているのでNode.jsの公式サイトからLTSバージョンのインストーラーをダウンロードし、インストールを完了させておきます。

続いて今回のプロジェクトで使用するディレクトリに移動して下記のコマンドを実行します。

npx create-next-app@latest

上記コマンドを入力後にいくつかの質問されます。

Ok to proceed? (y) y
? What is your project named? › hoge
? Would you like to use TypeScript with this project? › No / Yes
? Would you like to use Tailwind CSS with this project? … No / Yes
? Would you like to use `src/` directory with this project? … No / Yes
? Use App Router (recommended)? … No / Yes
? Would you like to customize the default import alias? … No / YesOk to proceed? (y) y
? What is your project named? › hoge
? Would you like to use TypeScript with this project? › No / Yes
? Would you like to use Tailwind CSS with this project? … No / Yes
? Would you like to use `src/` directory with this project? … No / Yes
? Use App Router (recommended)? … No / Yes
? Would you like to customize the default import alias? … No / Yes

ここはお好みだと思いますが、今回はTypeScriptやsrcディレクトリは使用しない、Tailwind CSSは使用することにします。

使用するTailwind CSSとはCSSのフレームワークであり、自分でスタイルを一から作成することなくすでに用意されているクラスを指定することで簡単に見た目を整えることができちゃうという優れもののようです。

App Routerを使用した際の初期フォルダ構成

諸々の準備が完了した際のフォルダ構成は以下のようになっています。

App Routerを利用するうえで一番重要となるのが、ルート直下にappフォルダです。

appフォルダ直下に配置した「page.js」がルーティングの対象となります。

例えば開発サーバーを立ち上げapp配下にexample/page.jsを作成し、localhost:3000/exampleに入力するとexample配下にあるpage.jsの内容が表示される、といった具合です。

その他のフォルダや設定ファイルについては今回使用することがなかったので説明を省きます。

hoge/
  |- app/
  |     global.css
  |     layout.jsx
  |　   page.jsx
  |     page.module.css
  |
  |- node_modules/
  |     ...
  |       
  |- public/
  |     ...
  |
  |- next.config.js
  |- package-lock.json
  |- package.json
  |...
hoge/
  |- app/
  |     global.css
  |     layout.jsx
  |　   page.jsx
  |     page.module.css
  |
  |- node_modules/
  |     ...
  |       
  |- public/
  |     ...
  |
  |- next.config.js
  |- package-lock.json
  |- package.json
  |...

第5章 恥ずかしいけど公開しよう

Reactの公式ドキュメントにあるチュートリアルを一通りやってみていざ制作開始してみましたが、実際に手を動かすとなると中々進まず、なんとか料金計算できる仕組みを作るので精一杯でした…

恥ずかしくてとても見せられたものではありませんが、恥をかかないと成長しないと思うので、自分以外の人でもみられるよう公開することにしました。

少し調べるとNext.jsを開発したVercel社が提供している「Vercel」というプラットフォームを利用すれば簡単に公開できるとのことだったのでやってみました。

第6章 Reactのどのような機能を使用したかをまとめよう

Reactにはhooksという便利な機能があらかじめ用意されており、今回制作した料金シュミレーションでも2つのhooksを使用しました。

今回は一番多く使用したhooksについて自分なりにまとめてみました。

useStateについて

一番多く使用したhooksです。useStateを使用することで、ユーザーが入力・選択した値、今回の料金シュミレーションだとプランや取得したい番号数を管理するために使用しました。

state変数の状態が変わることで何が起きるの…？

state変数の状態が更新されることによって、なぜ画面の表示が変わるのかについて理解するのに時間を要しました…

公式ドキュメントや下記の記事を読むことで少し理解をすることができたので下記にプロセスをまとめてみます。


1. state変数（ここではreqNumbers）が更新される
2. 更新をキャッチしたReactがコンポーネント（ここではPageコンポーネント）を呼び出し、前回呼び出したときとの差異を確認する
3. 2.で差異があった場合のみDOM（DocumentObjectModel）に反映する
4. ブラウザのレンダリングによってDOMが画面に反映される

レンダーやレンダリングなど似たような言葉が使用されているときはその文脈においてどのような意味で使われているのかを把握することが大事だなと感じました…下記の例だと、reqNumbersがstate変数で、setReqNumbersがstateを更新するための関数です。

input要素にonChangeというイベントハンドラを渡すことで、ユーザーが値を入力するたびにhandleReqNumbersChange（変数名が冗長すぎますね…）が実行されます。

処理内容としては、現在入力された値をvalueに代入し、setReqNumbers関数に渡すことで、state変数が更新される、といった流れになっています。

export default function Page() {
    const [reqNumbers, setReqNumbers] = useState(0);

    const handleReqNumbersChange = (e) => {
        const { value } = e.target;
        setReqNumbers(value);
    };
    return (
        <div>
            <div>
                <label>取得したい番号</label>
                <input type="number" min="1" value={reqNumbers} onChange={handleReqNumbersChange}/>
            </div>
        </div>
    );export default function Page() {
    const [reqNumbers, setReqNumbers] = useState(0);

    const handleReqNumbersChange = (e) => {
        const { value } = e.target;
        setReqNumbers(value);
    };
    return (
        <div>
            <div>
                <label>取得したい番号</label>
                <input type="number" min="1" value={reqNumbers} onChange={handleReqNumbersChange}/>
            </div>
        </div>
    );

React公式ドキュメント

参考にさせていただいた記事

第7章 今回の反省点をまとめよう

自分が納得するものを作成できなかったのですが、それはいったい何が原因なのかについて最後にまとめることにしました。

1. 制作に時間を費やすよりもReact・Next.jsの概念を何とか理解しようと時間を費やしてしまった。

肝心の成果物が完成しなければ元も子もないですね。特有の概念をじゃあ説明できるぐらい理解できたかって言われると決してそんなレベルまで到達していないので、無駄な時間の使い方をしてしまったと思います。

2. 準備に取り掛かるのが遅かった
綺麗なまでの言い訳ですね。最初から何かいいものを作ろう、何とかなるだろっていう甘い考えが諸悪の根源ですね。

3. ChatGPTに頼りすぎていた
新しい技術を学ぶ際はChatGPTに頼りすぎずに地道に公式ドキュメントを読んでいったほうがいいということを痛感しました。

反省することが多い初めての勉強会でしたが少しでもこれからの勉強会でいいものが作れるよう精進します…

AIに応援ソングを作ってもらいました

最後に音楽生成AI「Suno」を使用して自分を励ますような曲を作ってもらったので共有させてください。

そこまで輝けたら電気代浮きそうですね…

以上です。

▍もっと知りたい方はこちら

▼技術ブログ

▼採用資料