Mantineからコンポーネントをコピーして使うための方法を解説します。
今回はNext.jsとTypeScriptにて構築した環境にて解説します。
なぜNext.jsなのかと言いますと、Reactで開発するよりも部分的に開発が楽にできて、且つ表示速度を上げられるなどいくつかのメリットがあるからです。
個人的には、Reactの場合だと考慮しないといけなかったルーティングの処理を、ディレクトリで分けることで簡略化できることが大きなメリットの一つと考えており、今後も開発環境にNext.jsを採用する可能性が高いと考えたので今回もNext.jsを使用することに決めました。
Next.js環境にて実践したい方は【環境構築】から行なってください。
コードのコピーの方法だけ知りたい方は【コンポーネントを作成】から読んでいただければと思います。
【環境構築】
それでは、Next.jsとTypeScriptによる環境構築の説明をします。
方法は至って簡単で、コマンドプロンプトもしくはターミナルを開いて、環境を作りたいディレクトリに移動し、以下のコマンドを実行するだけです。
npx create-next-app todoapp –ts
この環境にて、簡単なToDoアプリを作っていこうと考えているので、開発環境の名前をtodoappとしています。
React環境の構築との違いは、create-react-appがcreate-next-appに代わっただけです。
上記コマンドを入力して作成した環境にsrcという名前のディレクトリを作成して、pagesとstylesディレクトリをsrcディレクトリに移動させています。
また、srcディレクトリ内にcomponentsディレクトリを作成しております。
構成はこのようになります。
todoapp
┣src
┃┣components
┃┣pages
┃┗styles
┣public
以下略この状態でターミナルにnpm run buildと入力してhttp://localhost:3000にアクセスしてみましょう。
Welcome to Next.js!
と表示されれば環境構築は完了です。
【コンポーネントを作成】
それではコンポーネントを作成します。
まずMantineのサイトから使用するコンポーネントのコードをコピーします。
以下のURLから使用するコンポーネントを選択してください。
https://ui.mantine.dev
今回は以下URLのボタン用コンポーネントにて説明します。
https://ui.mantine.dev/category/buttons
ボタンが５つ上から並んでいますので使用するボタンの右上にある</>codeをクリックします。
画面にコードが表示されるので右上のCopy Codeをクリックしてコードをすべてコピーします。
次に開発環境のcomponentsディレクトリにbutton.tsxという名前のファイルを作成して、ファイルに先ほどコピーしたコードをペーストします。
ペーストしたコードに一番したにexport default ButtonCopyと付け加えてください。
〜略〜
Copy link to clipboard
</Button>
</Tooltip>
);
}
export default ButtonCopy
ButtonCopyの部分は後で呼び出す際の名前になりますので、適宜変更していただいてOKです。
これにてボタン用のコンポーネントの作成は完了です。
【作成したコンポーネントを使用する】
最後に、作成したコンポーネントの使用方法をご説明します。
環境構築した後の状態だとhttp://localhost:3000にアクセスすると、pageディレクトリ内にあるindex.tsxが表示されております。
このindex.tsxをテキストエディタで開いて編集してみましょう。
まず先ほど作成したコンポーネントをimportします。
４行目にimport ButtonCopy from ‘../components/button’ と追加してして以下のようにしてください。
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import ButtonCopy from '../components/button'ButtonCopyのところはexport default の後に記述した名前になるので、作成した名前に書き換えてください。
from以降の’’で囲われた箇所はindex.tsxから見たコンポーネントの保存場所になります。
ファイルの階層について簡単にご説明します。
ファイルは以下のディレクトリにそれぞれ保存されています。
src
┣pages━index.tsx
┗components━button.tsxindex.tsxからbutton.tsxを参照するには一つ上のpagesディレクトリと同じ階層（src直下）からcomponentsディレクトリ内のbutton.tsxを指定する必要があります。
一つ上のディレクトリを参照するには、’../’と記述します。
二つ上を参照する場合は’../../’というように記述を繰り返すとその分上の階層を参照することができます。
次にcomponentsディレクトリを指定します。
先ほどの記述に続けてディレクトリを記述します。
’../components’
さらに続けて、components内のbutton.tsxを指定します。
この時、拡張子は記述不要です。
’../components/button’
これでbutton.tsxからexportされたButtonCopyをindex.tsxにimportすることができました。
次にindex.tsxのreturn()の中身を編集します。
まず、return ( の次の行の<div className={styles.container}>から、最後の </div>までを以下の通り削除してください。
Before
return (
<div className={styles.container}>
<Head>
・
・
・
・
</a>
</footer>
</div>
)
}After
return (
)
}削除した部分にimportしたButtonコンポーネントを記述すれば完成です。
記述の仕方はimportしたButtonCopyをHTMLのタグのように記述するだけです。
以下のように記述してください。
また、コンポーネントの名前を変更した方は適宜ButtonCopyの箇所を書き換えてください。
return(
<ButtonCopy></ButtonCopy>
)ここまで編集が完了したら、index.tsxとbutton.tsxを保存し、ターミナルにてnpm run devを入力して、ローカルホスト http://localhost:3000 にアクセスして確認してみましょう。
環境構築完了時に確認したWelcome to Next.js!のページではなく、Mantineのサイトからコピーしたボタンのコンポーネントが一つだけ表示されていたら編集は無事完了となります。
まとめ
- npx create-next-app todoapp –ts にてNext.jsの環境構築をしました。
- 階層構造を変更したのち、ページが表示されることを確認しました。
- Mantineのサイトからボタン用コンポーネントのコードをコピーしてbuttonコンポーネントを作成しました。
- コピーしたコードにexport default コンポーネント名を追加して他所から参照できるようにしました。
- index.tsxからbuttonコンポーネントを呼び出すためにimportしました。
- index.tsxのreturn内をすべて削除してimportしたButtonCopyをHTMLのタグのような記述で追加しました。
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。
コメント