【プログラム学習備忘録】複雑な画面を作ってみる

Next.js

はじめに

こんばんは、リッキーです。
今回は、Next.jsを用いた少し複雑なWebアプリ画面を作っていきたいと思います。
よろしかったら読んでいってください。

前回の記事は以下です。まだご覧になっていない方はそちらから目を通してみてください。
＞＞https://rikki-hobby.com/nextjs-2/

色々なタグで画面を作ってみる

まずは、画面要素だけを組み合わせて画面を作ってみます。
本記事では、Material-UIというUIライブラリを使います。Next.jsを使う際によく使うものです。色や形状があらかじめ設定されたUI(ボタンなど)を簡単に使うことが出来ます。カードゲームでいうと拡張パックのようなものです。

以下のコマンドをターミナルで入力してまずはダウンロードしましょう。

npm install @mui/material @emotion/react @emotion/styled

次に、プログラムを以下のように編集してください。
編集できたら、実行してください。

import Button from '@mui/material/Button';

export default function Home() {
  return (
    <div>
      <header>
        <div>
          ヘッダー部
        </div>
        <Button>
          ボタン
        </Button>
        <a href="https://rikki-hobby.com/">
          リンク
        </a>
      </header>
      <div>
        <div>
          コンテンツ部
        </div>
        <input name="test" defaultValue="入力フォーム"
         style={{border: "2px solid black"}}/>
      </div>
      <footer>
        <div>
          フッター部
        </div>
      </footer>
    </div>
  );
}

結果

どんな画面が表示されたでしょうか。以下のように表示されれば成功です。
(枠線は見やすさのためつけています。)

コード説明

前回のプログラムと比べると少し長くなったので、抜粋していくつか説明します。

import Button from ‘@mui/material/Button’;

上記箇所は、Material-UIのなかのボタンをインポートしています。
ライブラリ全体は既にコマンドでダウンロードしているのですが、実際にプログラム内で使用する際はライブラリのなかのどれを使うか指定して取り出す必要があります。(それをインポートといいます)
基本形式は「import [要素名] from ‘[ライブラリ名]’」です。

<a href=”https://rikki-hobby.com/”>
リンク
</a>

上記箇所では、別URLへのリンクを作成しています。href=”…”はタグの属性と呼ばれるもので、色んな機能を設定できるものです。どんな属性を設定できるかはタグによって決まっています。hrefはリンク先を設定できます。押してみると本ブログのホーム画面に移動すると思います。

<input name=”test” defaultValue=”入力フォーム”
style={{border: “2px solid black”}}/>

上記箇所は、入力フォームを作成しています。defaultValueは画面表示直後に入力されている内容、styleは入力フォームの形式を設定しています。

styleは、ほぼ全てのタグで設定が出来てとても便利なのですが、上のようにTypeScriptコードに全て書いていくとプログラムが見えづらくなることがあります。その場合はCSSという形式のファイルにstyleだけ分離して記載します。次回は、このCSSを用いたstyleの設定を試していこうと思います。

さいごに

Next.jsで、少し複雑なアプリ画面を作ってみました。
コメント・ご指摘等いただけると励みになります。
ご覧いただきありがとうございました。

コメント

タイトルとURLをコピーしました