最初のアプリケーションを作成しましょう！
********************

.[perex]
コメント付きのシンプルなブログを作成しながら、Nette Framework を一緒に学びましょう。さあ、始めましょう！

最初の2つの章の後には、独自の機能的なブログを持ち、素晴らしい投稿を公開できるようになりますが、機能はまだかなり制限されています。コメントの追加、記事の編集、そして最後にブログのセキュリティ保護をプログラムする次の章も読むべきです。

.[tip]
このガイドは、[インストール |nette:installation]ページを読み、必要なツールを正常に準備したことを前提としています。また、[PHP でのオブジェクト指向プログラミング |nette:introduction-to-object-oriented-programming]を理解していることを前提としています。

PHP 8.1以降を使用してください。完全なアプリケーションは[GitHub |https://github.com/nette-examples/quickstart/tree/v4.0]で見つけることができます。


ウェルカムページ
========

まず、`nette-blog`ディレクトリに新しいプロジェクトを作成することから始めましょう：

```shell
composer create-project nette/web-project nette-blog
```

この時点で、Web Projectの初期ページはすでに機能しているはずです。ブラウザで次のURLを開いて試してみましょう：

```
http://localhost/nette-blog/www/
```

そして、Nette Frameworkの初期ページが表示されます：

[* qs-welcome.webp .{url: http://localhost/nette-blog/www/} *]

アプリケーションは機能しており、編集を開始できます。

.[note]
問題が発生した場合は、[これらのいくつかのヒント |nette:troubleshooting#Netteが動作せず 白いページが表示される]を試してください。


Web Project の内容
===============

Web Projectには次の構造があります：

/--pre
<b>nette-blog/</b>
├── <b>app/</b>              ← アプリケーションディレクトリ
│   ├── <b>Core/</b>         ← 動作に必要な基本クラス
│   ├── <b>Presentation/</b> ← Presenter、テンプレートなど
│   │   └── <b>Home/</b>     ← Home Presenter のディレクトリ
│   └── <b>Bootstrap.php</b> ← ブートストラップクラス Bootstrap
├── <b>bin/</b>              ← コマンドラインから実行されるスクリプト
├── <b>config/</b>           ← 設定ファイル
├── <b>log/</b>              ← エラーログ
├── <b>temp/</b>             ← 一時ファイル、キャッシュなど
├── <b>vendor/</b>           ← Composer によってインストールされたライブラリ
│   └── <b>autoload.php</b>  ← インストールされたすべてのパッケージのオートロード
└── <b>www/</b>              ← 公開ディレクトリ - ブラウザからアクセス可能な唯一のディレクトリ
    └── <b>index.php</b>     ← アプリケーションが起動する最初のファイル
\--

`www/`ディレクトリは、画像、JavaScriptファイル、CSSスタイル、およびその他の公開アクセス可能なファイルを保存するためのものです。このディレクトリのみがインターネットからアクセス可能なので、アプリケーションのルートディレクトリをここに設定してください（これはApacheまたはnginxの設定で設定できますが、後で行いましょう。今は重要ではありません）。

私たちにとって最も重要なフォルダは`app/`です。ここには`Bootstrap.php`ファイルがあり、フレームワーク全体を読み込み、アプリケーションを設定するクラスが含まれています。ここで[オートロード |robot-loader:]がアクティブになり、[デバッガー |tracy:]と[ルート |application:routing]が設定されます。


クリーンアップ
=======

Web Projectには初期ページが含まれており、プログラミングを開始する前に削除します。したがって、ファイル`app/Presentation/Home/default.latte`の内容をためらうことなく「Hello world!」に置き換えます。


[* qs-hello.webp .{url:-} *]


Tracy (デバッガー)
=============

開発にとって非常に重要なツールは[デバッグツール Tracy |tracy:]です。ファイル`app/Presentation/Home/HomePresenter.php`で何らかのエラーを引き起こしてみてください（例えば、HomePresenterクラス定義の波括弧を削除するなど）、何が起こるか見てみましょう。エラーを分かりやすく説明する通知ページが表示されます。

[* qs-tracy.avif .{url:-}(debugger screen) *]

Tracyは、アプリケーションのエラーを探す際に非常に役立ちます。また、画面右下隅にフローティングTracyバーが表示され、アプリケーションの実行に関する情報が含まれていることにも注意してください。

[* qs-tracybar.webp .{url:-} *]

本番モードでは、Tracyはもちろん無効になっており、機密情報は表示されません。この場合、すべてのエラーは`log/`フォルダに保存されます。試してみましょう。`app/Bootstrap.php`ファイルで次の行のコメントを解除し、呼び出しのパラメータを`false`に変更して、コードが次のようになるようにします：

```php .{file:app/Bootstrap.php}
...
$this->configurator->setDebugMode(false);
...
```

ページを更新すると、Tracyは表示されなくなります。代わりに、ユーザーフレンドリーなメッセージが表示されます：

[* qs-fatal.webp .{url:-}(error screen) *]

次に、`log/`ディレクトリを見てみましょう。ここ（`exception.log`ファイル）に、ログに記録されたエラーと、既知のエラーメッセージページ（`exception-`で始まる名前のHTMLファイルとして保存されている）が見つかります。

行`// $configurator->setDebugMode(false);`を再度コメントアウトします。Tracyはlocalhostで開発者モードを自動的に有効にし、他の場所では無効にします。

作成したエラーを修正し、アプリケーションの作成を続行できます。


感謝を送る
=====

オープンソースの作者を喜ばせるトリックをお見せします。簡単な方法で、プロジェクトが使用しているライブラリにGitHubでスターを付けることができます。実行するだけです：

```shell
composer thanks
```

試してみてください！

{{priority: -1}}
{{sitename: Nette Quickstart}}