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

第1章　何作ろう

SUBLINEって…？

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

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

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

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

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

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

第2章 何使おう

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

Reactって…？

Next.jsって…？

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

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

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

プロジェクト環境の準備

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 / Yes

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

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

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

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

useStateについて

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>
    );

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

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

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

以上です。