WEBサイト

企業サイト

React TypeScript Vite Docker GitHub
TECH
使用技術
React / TypeScript / Vite / Docker / GitHub

制作エピソード

企業サイト

Reactで作成して欲しいとのご希望があり、React + TypeScript + Viteを使用して、企業サイトのリニューアルを行いました。

ターゲット

・web制作、リスティング広告運用、業務改善システムの導入などを検討している方
・将来的に拡張性や保守性を意識したサイト制作を希望するクライアント

目的

・React と TypeScript を使い、モダンな開発環境(Vite + GitHub)で企業サイトを構築する経験を積む
・競争が激しい業界でコンバージョン獲得できるようなサイトを作成する

製作期間

サイト作成:半年

URL

https://altered.co.jp/

制作に関するエピソード

「初めてのリアクト」

このサイトは、初めて React を使用して作成した企業サイトです。

JavaScriptの基礎から学び直し、サイトを実際に作りながらReactやTypeScriptの書き方を身につけました。

制作には時間がかかりましたが、その分大きな学びとなりました。

「ある程度ページできてきた後に行うファイル整理の大変さ」

特に苦労したのは、ファイル整理とパス管理です。

ページ制作を進めるうちにコンポーネントフォルダ内にファイルが増え、どこに何があるのか分かりにくくなったため、整理を試みました。インポート文の少しの間違いでエラーが出てサイトが表示されなくなったりして、動作確認と修正に時間がかかりました。

相対パスが深くなって見にくいため、途中から絶対パスに切り替え。すべてのインポート文を書き換える作業は大変でしたが、「最初から設計を意識すべき」という実感につながりました。

「CSSの管理」

Pure CSSを使用していると、クラス名の重複によって不要なスタイルが他ページに影響し、デザインが崩れる問題が発生。途中からCSS Modulesを導入し、クラスのスコープを明確化することで解決しました。

「ライブラリ導入の難しさ」

Reactでは便利なライブラリが多数ありますが、その仕様理解や使いこなしには試行錯誤が必要であることを実感しました。

この制作を通じて、React を使ったサイト制作を経験し、書き方、ファイル構成、パス管理、CSS設計の重要性を学びました。

作品一覧へ戻る