ページの作成とURL

Essepageでは、/publicフォルダー内のフォルダーとページファイルを使ってWebサイトのURLを構成します。

ページファイルが置かれているフォルダーのパスが、WebページのURLに対応します。そのため、個別のルーティング設定ファイルを作成しなくても、ファイルエクスプローラーからWebサイト全体のページ構成を確認できます。

たとえば、次のようなファイル構成があるとします。

/public
├── +page.essepage
├── about
│   └── +page.essepage
└── contact
    └── +page.essepage

各ページは次のURLに対応します。

Webサイトの起点となる/publicフォルダー

訪問者がアクセスできるWebページは、プロジェクトの/publicフォルダーを中心に構成されます。

プロジェクトの標準ホームページファイルは次のとおりです。

/public/+page.essepage

このファイルは、プロジェクトの標準サイトURLにアクセスしたときに表示されるホームページです。

たとえば、プロジェクトの標準サイトURLが次の場合:

https://espg.dev/my-website

ホームページのURLも同じです。

https://espg.dev/my-website

URLには/publicや+page.essepageは表示されません。

/publicはWebサイトの起点であり、その中のフォルダー構成がページのURLに対応します。

標準ページファイル+page.essepage

Essepageで基本的なWebページを作成するときは、+page.essepageという名前のファイルを使用します。

+page.essepage

新しいページファイルを作成するときは、ファイル名に+pageと入力してEnterキーを押してください。エディターによって.essepage拡張子が自動的に追加されます。

完成したファイル名は次のとおりです。

+page.essepage

+page.essepageという名前はURLには表示されません。代わりに、このファイルが置かれているフォルダーのパスがURLになります。

/public/about/+page.essepage

この例でURLを決定する部分はaboutフォルダーです。

/about

ページのURLを変更するときは、+page.essepageの名前ではなく、このファイルが置かれているフォルダーの名前や位置を変更します。

+page.essepageはページであることを示し、フォルダー名がページのURLを決定します。

新しいページを作成する

ホームページとは別に、新しいページを作成してみましょう。

次のURLにサイト紹介ページを作成するとします。

/about

必要なファイル構成は次のとおりです。

/public
├── +page.essepage
└── about
    └── +page.essepage

フォルダーを作成する

1. ファイルエクスプローラーで/publicフォルダーを右クリックします。
2. フォルダーを追加（New Folder）を選択します。
3. フォルダー名にaboutと入力してEnterキーを押します。

/public内に次のフォルダーが作成されます。

/public/about

ページファイルを作成する

1. 新しく作成した/public/aboutフォルダーを右クリックします。
2. ファイルを追加（New File）を選択します。
3. ファイル名に+pageと入力してEnterキーを押します。
4. 作成された+page.essepageファイルを開きます。
5. 次の内容を入力します。

<h1>About Us</h1>

<p>Learn more about our website.</p>

6. ファイルを保存します。

完成したファイルのパスは次のとおりです。

/public/about/+page.essepage

このページを公開すると、サイトURLの/aboutパスからアクセスできるようになります。

ページを公開して確認する

新しく作成した+page.essepageファイルは、まだ公開されていません。新しいページは、最初に公開しないとプレビューで開いたり公開サイトで確認したりできません。

1. 新しい+page.essepageファイルが保存されていることを確認します。
2. ファイルを右クリックします。
3. 公開（Publish）を選択します。
4. 公開が完了したら、もう一度ファイルを右クリックします。
5. プレビュー（Preview）を選択して、開発環境のページを確認します。
6. ページを開く（Open Page）を選択して、公開されたページを確認します。

保存と公開について詳しくは、保存、公開、適用をご覧ください。

フォルダー構成とURL

/publicの下に複数階層のフォルダーを作成すると、URLも同じ順序で構成されます。

たとえば、製品ページの下に新製品を紹介するページを作成するとします。

/public
└── products
    └── new
        └── +page.essepage

このページのURLは次のとおりです。

/products/new

同じ方法で、さらに多くのページを追加できます。

/public
├── +page.essepage
├── about
│   └── +page.essepage
├── products
│   ├── +page.essepage
│   ├── new
│   │   └── +page.essepage
│   └── popular
│       └── +page.essepage
└── contact
    └── +page.essepage

各ページは次のURLに対応します。

ファイルエクスプローラーのフォルダー構成を見るだけで、サイトにどのようなページとURLがあるかを確認できます。

ファイルとフォルダーの名前を決める

ファイルやフォルダーの名前は、命名規則の範囲内で自由に決められます。

特にページフォルダーの名前はURLの一部になるため、ページの内容が分かる簡潔な名前を使用することをおすすめします。

ハングル、漢字、日本語の文字、絵文字（Emoji）などのUnicode文字も、ファイルやフォルダーの名前に使用できます。

詳しい命名規則については、ファイル名の規則をご覧ください。

ファイルとフォルダーの名前を変更する

ファイルやフォルダーの名前は、ファイルエクスプローラーから変更できます。

1. 名前を変更するファイルまたはフォルダーを右クリックします。
2. 名前を変更（Rename）を選択します。
3. 新しい名前を入力してEnterキーを押します。

ページファイルが置かれているフォルダーの名前を変更すると、そのページのURLも変更されます。

たとえば、次のページがあるとします。

/public/about/+page.essepage

aboutフォルダーの名前をcompanyに変更すると、ページのパスも次のように変わります。

/company

ファイルとフォルダーを移動する

ファイルやフォルダーは、別のフォルダー内へドラッグ＆ドロップして移動できます。

ページファイルや、そのページファイルが置かれているフォルダーを移動してパスが変わると、ページのURLも変更されます。

たとえば、次のページがあるとします。

/public/about/+page.essepage

aboutフォルダーをcompanyフォルダーの中へ移動すると、ファイル構成は次のようになります。

/public/company/about/+page.essepage

ページのパスも次のように変更されます。

/company/about

公開済みページのフォルダー名を変更したり、ページを移動したりした場合は、新しいURLでページが正しく開くことを確認してください。以前のURLを使用しているメニューやリンクも、新しいURLに合わせて修正する必要があります。

ファイルとフォルダーを削除する

不要になったファイルやフォルダーは、ファイルエクスプローラーから削除できます。

1. 削除するファイルまたはフォルダーを右クリックします。
2. 削除（Delete）を選択します。

ファイルやフォルダーを削除する前に、次の点を確認してください。

• 公開サイトのページで使用されていないか
• 他のページからリンクされていないか
• レイアウトやコンポーネントで使用されていないか
• CSS、JavaScript、画像ファイルがページに読み込まれていないか
• フォルダー内に必要なファイルが残っていないか

フォルダーを削除すると、その中にあるすべてのサブフォルダーとファイルも削除されます。削除する対象をもう一度確認してください。

公開済みページが置かれているフォルダーの名前を変更したり移動したりすると、URLが変わります。ページファイルやページが置かれているフォルダーを削除すると、以前のURLにはアクセスできなくなります。

ページが見つからないとき

新しく作成したページが開かない場合や、想定したURLと異なる場合は、次の点を確認してください。

• ページファイルが/publicフォルダー内にあるか
• ファイル名が正確に+page.essepageになっているか
• 目的のフォルダー内にページファイルを作成したか
• ページを一度公開したか
• ページが非表示に設定されていないか
• ブラウザーに入力したフォルダー名と実際の名前が一致しているか
• ファイル名とフォルダー名の大文字と小文字が一致しているか

たとえば、公開サイトのURLがhttps://espg.dev/my-websiteの場合、次のファイルのURLは:

/public/products/new/+page.essepage

次のようになります。

https://espg.dev/my-website/products/new

URLに/publicや+page.essepageを含めないでください。

次のステップ

ページとURLを作成する方法を理解したら、次のドキュメントへ進んでください。

• ページファイル内部の基本構造を確認する: ページ構造
• メニューやリンクでページを接続する: ナビゲーションとリンク
• URLの一部を値として使用するページを作成する: パラメーターフォルダー
• 存在しないURLに表示するページを作成する: カスタム404ページ
• ファイルとフォルダー名の詳しい規則を確認する: ファイル名の規則