アマゾンの商品URLを省略するアプリを作ってみた！

この記事では、Reactを使ったWebアプリの簡単な作成方法（環境構築からデプロイまで）を書きつつ、苦戦したことなどを記録しています。

開発したもの

アマゾンの商品URLを短くできるWebアプリを個人開発しました！
ザ・シンプルって感じです。

こんな拙いWebでも、実際に一人でデプロイまでできるとワクワクします！
作成手順や、アクセスできるリンクも以下に載せています。

動機

• React, TypeScript, Tailwind CSSを使ってフロントだけで動くWebを作りたい（なんか流行っててかっこいいから）
• すぐに無料公開できるようなものを作りたい

そんなことを漠然と思っていた中で、ふとYouTubeについているおすすめ本のURLが気になりました。

「このリンク、めちゃくちゃ短くね」

そう、普段目にするアマゾン商品リンクより明らかに短かったのです。（のちにそれは広告用のアソシエイトのリンクだったことが分かりました。）

そこで、Amazon URLの省略方法について調べていたら、思ったより簡単に省略できそうなことに気づきました。

「これなら自分でもアルゴリズム作れるし、フロントだけだからWeb公開もできる」
そう思い、すぐ取り掛かりました。

ちなみに、Amazon URLを短縮できるWebアプリの競合はたくさん見つけたのですが、私が調べた中だとおそらく、競合のWebよりも2文字ほど短くできていそうです。

使用技術

React, TypeScript, Tailwind CSS, yarn, Vite

デプロイ先は、技術めちゃくちゃ強い友人に以前聞いた Netlify です。
(無料かつhttpsで、ホスト名も多少選べて、ドメインいくらでも作れる？ので便利）

全工程5時間！環境構築からデプロイまでの開発手順

内容としては、慣れている人なら1時間以内、初めての人なら環境構築とデプロイに時間がかかるのを考慮しても2, 3日あれば十分完成する量だと思います！
(私は、Reactでのデプロイ2回目)

アマゾンのアルゴリズムを調べるために、ネットサーフィンをしていた時間など、無駄に色々調べていた1, 2時間を除くと実質3, 4時間の作業量になります。

1. 環境構築

この環境構築部分はだらだら書いてしまったので、さっと見たい人は飛ばしてください。

yarnコマンドで環境構築をしていきます。
基本的に知らないことはGoogleやChatGPTに聞いていくスタイルです。

yarnは、JavaScriptのプロジェクトで使われるパッケージマネージャーの一つです。主に依存関係の管理、パッケージのインストール速度の最適化、バージョンのロックのような機能を提供します。
yarnはnpmと似ていますが、特に速度や安定性にフォーカスして開発されています。

作業ディレクトリに移動します。

$ yarn create vite frontend --template=react-ts

以下のようになれば成功です。

Done Now run:

	cd frontend
	yarn
	yarn dev

✨  Done in 3.22s.

その後、以下のコマンドを順に実行し、起動できることを確認。

$ cd frontend
$ yarn
$ yarn dev

tailwindとscssを入れて設定。これを参考にしました。

以下のコマンドでtailwindを設定

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# classNameを自動で並び替えるプラグイン。もし必要ならば入れる
yarn add -D prettier-plugin-tailwindcss

tailwind.config.jsの変更

// content: [],
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],

index.cssの修正 (内容を置き換えます)

@tailwind base;
@tailwind components;
@tailwind utilities;

警告文が出た場合は、vscodeの拡張機能を入れると消せます。

【Tailwind CSS】Unknown at rule @tailwind解消法

元あったcssは消して大丈夫です。

今回は、開発工数を短くしたいので、基本全てTailwind CSSで見た目を整えていきます。

実装

mainのApp.tsxをいじります！必要ならコンポーネントを作成していきます！このくらいです！（急に雑すぎる）

一つポイントを挙げるなら、
全部まとめるのではなく、問題を分割して考えていくと開発しやすかったです。

例えば、こんな感じです。

• リンクを入力するinputタグが必要
• 入力した文字列を短縮するアルゴリズムが必要
  • いくつかのパターンがあって、例えばdp/のあとに数字が来れば、その後の / 以降は削除できる
  • amazon.co.jp あるいはamazon.jp がないリンクはエラーにしよう
• 表示部分が必要
• どうせならコピーボタンもあったら便利だな。そういうライブラリないかな

アルゴリズムの強み

URLを短くするために、amazon.co.jp だったら amazon.jp に変更するという処理を行いました。
これにより、競合のWebアプリより2文字短くできます！！！
（もちろんSEO対策などの部分で完敗していますが、それはこれから勉強していけばいいんだ！って目で見ていただけると嬉しいです笑）

デプロイ

ようやくデプロイです。

初めはデプロイ方法が分からず、思った以上に苦戦しました。

デプロイについてはこちらの記事に詳しく書いています。

最初は「buildコマンドってなんだ」「どの部分アップすればいいの」みたいに苦戦していました。（なんなら二回目でも少し詰まりました）

今回は必要ないですが、APIキーなどがある場合は、環境変数についても意識する必要があります。

完成

実際に作成したWebアプリのリンクはこちらです！

フロントエンドを簡単に触りたいと思っているくらいのレベルなので、ReactやTypeSciptについて今後もっと知っていきたいです！

まとめ

今回は、数時間あれば簡単に作れる、アマゾン商品URL短縮アプリを紹介しました。

久々に触った技術は、結構忘れてしまっているものだなと思いつつ、一度やっているので初めよりは手こずらずに調べながら実装することができました。

今後も、隙間時間に技術記事や実装報告をアップしていきたいと思います！