最初のアプリケーションを作ろう
***************

.[perex]
コメントの付いた簡単なブログを作りながら、Nette Framework を知りましょう。さっそく始めます。

最初の 2 つの章を終えれば、動くブログが手に入り、素晴らしい記事を公開する準備が整います。とはいえこの 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> ← プレゼンター、テンプレートなど
│   │   └── <b>Home/</b>     ← Home プレゼンターのディレクトリ
│   └── <b>Bootstrap.php</b> ← 立ち上げのクラス Bootstrap
├── <b>assets/</b>           ← 生のアセット（SCSS、TypeScript、もとの画像）
├── <b>bin/</b>              ← コマンドライン向けのスクリプト
├── <b>config/</b>           ← 設定ファイル
├── <b>log/</b>              ← エラーのログ
├── <b>temp/</b>             ← 一時ファイル、キャッシュなど
├── <b>vendor/</b>           ← Composer が入れたライブラリ
│   └── <b>autoload.php</b>  ← 入れたすべてのパッケージの自動読み込み
└── <b>www/</b>              ← 公開のフォルダ。ブラウザから触れる唯一の場所
    ├── <b>assets/</b>       ← ビルドされた静的ファイル（CSS、JS、画像など）
    └── <b>index.php</b>     ← アプリケーションを立ち上げる最初のファイル
\--

`www/` のディレクトリは、画像、JavaScript のファイル、CSS のスタイル、そのほか公開されるファイルを置くためのものです。ここはインターネットから直接触れられる唯一のディレクトリなので、ウェブサーバーの document root がここを指すように設定してください（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 Bar にも注目してください。実行時の大事な情報を見せてくれます。

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

本番モードではもちろん Tracy は切られていて、機微な情報は一切表示しません。エラーはすべて代わりに `log/` のディレクトリに保存されます。試してみましょう。`app/Bootstrap.php` で次のコードの断片を見つけ、その行のコメントを外して、メソッドの呼び出しのパラメータを `false` に変え、次のようにします。

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

ウェブのページを読み込み直すと、もう赤い画面は見えません。代わりに利用者にやさしいメッセージが表示されます。

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

では `log/` のディレクトリをのぞいてみてください。ここ（`exception.log` ファイル）に記録されたエラーがあり、見覚えのあるエラーのメッセージのページも（`exception-` で始まる名前の HTML のファイルとして）保存されています。

`// $this->configurator->setDebugMode(false);` の行をまたコメントに戻してください。Tracy は `localhost` の環境では自動的に開発モードを有効にし、それ以外では切ります。

これで入れた誤りを直して、アプリケーション作りを続けられます。


感謝を送る
=====

オープンソースの作者を喜ばせる小技をお見せします。あなたのプロジェクトが使っているライブラリに、GitHub で簡単に星を付けられます。次を走らせるだけです。

```shell
composer thanks
```

試してみてください。

{{priority: -1}}