フロントエンドビューを作成方法　

#フロントエンドビュー(Frontend view)
このトピックでは、ブロック、レイアウト、テンプレートなど、Magento 2のビューについて学習します。 [前のトピック](https://qiita.com/moaazfarag/items/9f984c54f9817537ad4d)では、ルートとコントローラーを作成します。 ご存じのとおり、ページの表現を出力するためにビューが使用されます。

Magento 2では、ビューは3つのパスで作成されます。
-ブロック
- レイアウト
- テンプレート
作成したモジュールの単純なビューを構築することで、どのように作成するかを見つけます[前のトピック](https://qiita.com/moaazfarag/items/9f984c54f9817537ad4d)

##コントローラーを作成する
まず、レイアウトファイル`.xml`を呼び出すコントローラーを作成します。

```php:Karabiner/HelloMagento2/Controller/SomethingElse/Index.php
<?php

namespace Karabiner\HelloMagento2\Controller\SomethingElse;

use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;

class Index extends Action
{
    /**
     * @var PageFactory
     */
    private $pageFactory;

    public function __construct(Context $context, PageFactory $pageFactory)
    {
        parent::__construct($context);
        $this->pageFactory = $pageFactory;
    }

    /**
     * call Karabiner/HelloMagento2/view/frontend/layout/hellomagento2_somethingelse_index layout
     */
    public function execute()
    {
        return $this->pageFactory->create();
    }

}

```

##レイアウトファイル（.xml）を作成
レイアウトは、Magento 2モジュールのビューレイヤーの主要なパスです。 レイアウトファイルはXMLファイルで、`{MAGENTO_DIRECTORY}/view/{area}/layout/`フォルダーにあります。 
エリアパスは、レイアウトが適用される場所を定義する`frontend`または`adminhtml`（adminダッシュボード）です。

レイアウトファイルの形式は`{ルーターID} _ {コントローラー名} _ {アクション名}.xml`の形式になります。

レンダリングページの場合、Magentoはレイアウトファイルをチェックしてページのハンドルを見つけ、ブロックとテンプレートをロードします。 このモジュールのレイアウトハンドルファイルを作成します。

ファイル: app/code/Karabiner/HelloMagento2/view/frontend/layout/hellomagento2_somethingelse_index.xml

```xml:app/code/Karabiner/HelloMagento2/view/frontend/layout/hellomagento2_somethingelse_index.xml
<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Karabiner\HelloMagento2\Block\SomethingElse" name="hello_magento2_display" 
                   template="Karabiner_HelloMagento2::hello_world.phtml" />
        </referenceContainer>
    </body>
</page>
```


##ブロックファイルの作成

↑のファイルでは、このページのブロックとテンプレートを定義します。
class(ブロッククラス)：HelloMagento2\HelloMagento2\Block\SomethingElse
**ブロッククラスは、テンプレートファイルにデータを提供するクラスです。**
 
template(テンプレートファイル)：Karabiner_HelloMagento2::hello_world.phtml
ファイル名には2つの部分があります。
  1. `Karabiner_HelloMagento2`：`Karabiner/HelloMagento2/view/frontend/templates`を参照してください
  2. `hello_world.phtml`：上記のフォルダー内の場所は、`SomethingElse/ hello_world.phtml`です。
 
name：これは必須属性であり、ブロックを参照として識別するために使用されます

##テンプレートファイルを作成する
hello_world.phtmlというテンプレートファイルを作成します

`app/code/Karabiner/HelloMagento2/view/frontend/templates/hello_world.phtml`
以下コードを追加して

```php:app/code/Karabiner/HelloMagento2/view/frontend/templates/hello_world.phtml
<?php

/**
 * @var \Karabiner\HelloMagento2\Block\SomethingElse $block
 */
?>

<?= $block->sayHi() ?>
```

レイアウトファイルでは、 `Karabiner_HelloMagento2::hello_world.phtml`によってテンプレートを定義します。 これは、Magentoがモジュール`Karabiner_HelloMagento2`のテンプレートフォルダーでファイル名`hello_world.phtml`を見つけることを意味します。 モジュールのテンプレートフォルダーは、 `app/code/{vendor_name}/{module_name}/view/frontend/templates/`です。

テンプレートファイルでは、ブロックオブジェクトに変数「$ block」を使用できます。 ご覧のとおり、Blockでメソッド `sayHi（）`を呼び出します。 完了しました、

レイアウトまたはphtmlを変更した後、cache:cleanコマンドラインを実行する必要があります

```bash:MAGENTO_DIRECTORY
bin/magento cache:clean
```
もう一度このページにアクセスしてください
(`http://[MAGENTO_URL]/custom_router_name/somethingelse`) and see the result.

![block-created.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275433/e270e9e0-e70a-c2c4-1fcb-327aebde34a0.png)