プログラミング学習をスタートし、現在はProgateのJavaScriptコースの修了を経て、実案件の獲得を目指して日々奮闘しています。
現在、ポートフォリオの第一弾として「南浦の母」という占いサイトを制作しています。先日、ついにこのサイトを実際のインターネット上に公開することができました！今回は、公開までの試行錯誤と、そこで得た学びを共有します。
1. 昨日の難関：JavaScriptの競合とデザインの乱れ
サイト制作の最終盤、スマホ対応（レスポンシブ化）を進めていたところで大きな壁にぶつかりました。
- デザインの崩れ: CSSの小さな記述ミス（閉じカッコの不足など）が原因で、全体のバランスが崩れてしまい、非常に見にくい状態になってしまいました。
- JavaScriptの機能競合: ハンバーガーメニューと予約モーダルを同時実装したところ、ボタンのクリックイベントが干渉し合い、一方が正常に動かなくなる事態が発生しました。
【解決策と学び】 「なぜ動かないのか？」を冷静に切り分けるため、HTMLのクラス設計を見直し、特定のボタン（.reserve-button）だけにイベントが発生するように修正しました。この経験を通して、ただコードを書くだけでなく、後から見ても整理された「設計」の重要性を痛感しました。
2. 本日の挑戦：FileZillaを使ったサーバー公開
自分のPC（ローカル環境）で正しく動くようになったら、次は「世界中の人が見られる状態」にする必要があります。
今回は、プロの現場でも標準的に使われているFTPソフト「FileZilla（ファイルジラ）」を使用し、契約しているレンタルサーバー（ConoHa WING）へデータをアップロードしました。
【こだわったポイント】 すでに運用しているブログ（WordPress）に影響を与えないよう、サーバー内に専用のディレクトリ（/test-site/）を新しく作成し、そこにファイルを転送しました。ディレクトリ構造を理解し、適切な場所へデータを届けるプロセスは、まさに「実務での納品作業」そのもので、非常に緊張感のある、しかしワクワクする体験でした。
3. ついに公開！「南浦の母」公式サイト
アップロード後、ブラウザにアドレスを入力し、自分の作ったサイトが表示された瞬間は感無量でした。
- 本番環境での動作確認:
- ヒーロー画像が正しく表示されているか。
- 修正したハンバーガーメニューは動くか。
- 最後に実装した「トップに戻るボタン」は機能しているか。
全てが思い通りに動いているのを確認し、「自分はWebサイトを形にできるんだ」という大きな自信に繋がりました。
まとめとこれからの展望
「コードを書くこと」と「ユーザーに届ける（公開する）こと」。この両輪を回して初めて、エンジニアとしての仕事が成立することを学びました。
今回の挑戦で、サーバー納品の実務スキルを一通り身につけることができました。次はさらにポートフォリオをブラッシュアップし、いよいよ最初の案件獲得に向けてチャレンジを始めていきます！
最後まで読んでいただき、ありがとうございました。
コメント