React + Material UIでWebサイト作るときに実装までに準備することまとめ

7575 ワード
React material-ui ポートフォリオ ポートフォリオ テキストリンク

はじめに

最近仕事でReactをメインに開発しており、せっかくならプライベートでも何か作ってみたいと思い、とりあえず自分のホームページを作ることにしました。
Okula Portfolio Site
Reactのプロジェクト作成やMaterial UIの導入などはいろんな記事がありますが、それだけではWebサイトとしては成立しません。実装前にやる様々な準備をまとめてみました。

本記事ではReactのチュートリアルなどは取り扱いませんのでご容赦ください

使用技術

Typscript
React
Material-ui

Webサイトの構成を決める

私はFigmaであらかたのデザインを起こしました。
Figma
ここで全体の構成、配色、ロゴなどを定義します。

サイトの構成

とりあえずこんな感じにしてみました。

  • ファーストビュー（TOP）
  • 自己紹介（AbountMe）
  • スキルセット
  • 連絡先

紹介したいプロダクトがある人はそれも追加するといいですね。
ちなみに、連絡先は実装中です・・・

配色

配色の参考はいろんなサイトがあるので自分にあったものをお探しください。ちなみに私はこのサイトを使用させていただきました。
COLOR SUPPLY
メインカラー、アクセントカラー、白、黒、グレーくらいを定義するといい感じにまとまると思います。

ロゴ

サイトのファーストビューとアイコンに使用するロゴを作成します。
ロゴはFigmaでそれっぽく作成して、svgやpngでエクスポートして素材として使用しました。

favicon.ico

favicon.icoとはホームページタイトルの横に表示されるアイコンのことです。

先ほど作ったロゴをpngでエクスポートし、このサイトで作成しました。
Faviconジェネレーター
世の中素敵なサービスばかりで感謝です

React+Material UIで実装

さて、前作業は終わりましたので、実装していきます。
create-react-appを使用してReactのプロジェクトを作成し、Material UIをimportします。
この記事では具体的な手順については触れません。

サイトタイトルを変更する

public/index.htmlのtitleタグの中を変更してサイトタイトルを変更します

favicon.icoを変更する

public/favicon.icoを先ほど作成したものと差し替えます。

テーマカラーとフォントの反映

テーマカラーは先ほど決めたものを使用します。
フォントについてはデフォルトでも問題ないんですが、せっかくなので変更しましょう。
今回はgoogleフォントから選びました。
Googleフォント

使いたいフォントを選択すると、linkタグが表示されます。これをindex.htmlの中に記載します

index.html
<head>
    <link
      href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap"
      rel="stylesheet"
    />
</head>

次にMaterial UIのテーマを変更します。こんな感じのファイルを作ります。

theme.ts
import { createMuiTheme } from "@material-ui/core/styles";

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#F3F1F1",
    },
    secondary: {
      main: "#E76F53",
    },
  },
  typography: {
    fontFamily: ["'M PLUS Rounded 1c', sans-serif"].join(","),
  },
});
export default theme;

次にindex.tsxに追記してテーマを反映します。

index.tsx
import { MuiThemeProvider } from "@material-ui/core/styles";
import theme from "./theme";

ReactDOM.render(
  <React.StrictMode>
    <MuiThemeProvider theme={theme}>
      <App />
    </MuiThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

これでMaterial UIのコンポーネント全体にテーマカラーとフォントが適用されました。
詳しい原理はMaterial UIの公式サイトをご覧ください。

Lets 実装

ここまでくれば準備はほぼ完了です。好きなように実装をします。
Gridを使用すると後からレスポンシブ対応しやすくなります。

サイトを公開する(おまけ)

実装が終了したらいよいよサイトの公開です。github.ioを使用しました。
Reactアプリのgithub.ioの設定についてはこちらの記事を参考にさせていただきました。
ReactアプリをGitHub Pages(Project Pages)で公開する

最後に

本当はアニメーションやいい感じのデザインを取り入れたかったのですが、それは今後頑張るということで一旦公開としました。自信をもって「これがわたしのポートフォリオです」と言えるように改修していこうと思います。
仕事じゃない開発は好きなように時間を使えて、楽しいですね。
以上です。