個人ブログで記載したものをまとめたwebサイト「WITMAN」を公開しました！

2021年10月15日 18:58

最近個人のはてなブログ・Qiita・Noteで記載したものをまとめたwebサイト「WITMAN」を公開したので、制作した経緯・制作した手順について紹介いたします。

公開したサイト

制作した経緯

1. 自分の行っていることを効率的にアピールするため

個人でブログを書いているものとして、以下の3つがありそれぞれをまとめる場所として何か欲しいと思った。また、今後オリジナルブログを作成したときのハブにもなればいいなと思い、オリジナルで作成。
はてなブログ: https://jackswim3411.hatenablog.com/
Qiita: https://qiita.com/miwashutaro0611
Note: https://note.com/jackblog

2. React.js, TypeScriptの勉強のため

実務でReact.js, TypeScriptを使う可能性があり、その勉強を行いたかった。

3. Webサービスを公開することで、公開するまでの部分や運用するにあたっての知見のため

サービスを公開・運用するにあたって2番目の「 React.js, TypeScriptの勉強のため」の知識がより深くなる&将来的にちゃんとサービスを制作したくなった時に参考にできるものが欲しかった。

制作した技術スタックについて

FW - Next.js

React.jsの勉強のため、Vue.jsではなくReact.jsを使用。また、複数ページでの作成だったためheadの設定をいい感じに行ってくれるもの&SSR,SSG周りも簡単に行うことができるため、Next.jsを使用。

style - Emotion

style周りはEmotionを使用。

Emotionを使用しているしている理由として、以下になります。

- styled-componentsの場合、<div class="button"></div>のような書き方では出なく<Button></Button>のような書き方になるため、個人的に合わない不採用。
- css-modulesの場合、<div class="button"></div>はできるが、cssinjsでの知見が欲しかったため、不採用。
- Emotionの場合、styled-componentsのような書き方や<div class="button"></div>のような書き方のどちらもできるため、採用

ディレクトリ構成

こちらの記事をベースに以下のようなイメージでディレクトリ構成を行いました。

project/
├── public/ : 画像などの静的ファイルの格納場所
├── src/
│   ├── api/ : 各種apiの格納箇所
│   ├── components/ : 各種コンポーネントの格納箇所
│   │   ├── atoms/ : atomsのコンポーネントのコンポーネント配置箇所。
│   │   ├── molecules/ : moleculesのコンポーネントのコンポーネント配置箇所。
│   │   ├── organisms/ : organismsのコンポーネントのコンポーネント配置箇所。
│   ├── foundations/ : next/linkやheadの設定などcomponentsには分類されないものの配置箇所。
│   ├── hooks/ : 各種カスタムhook
│   ├──layouts/ : templatesのコンポーネント配置箇所。
│   ├── lib/ : ライブラリのカスタムしたものなどの配置箇所。
│   ├── pages/ : ページ全体のファイル
│   ├── styles/ : 全体的なスタイル・スタイルの変数などの配置箇所。
│   └── types/ : 複数ファイルにまたがる型定義ファイルの配置箇所

deploy - vercel

Next.jsと相性が良い&簡単にデプロイを行いたいと思ったため、vercelを使用。

公開するまでの制作ルール・使用したツールについて

1. ロジック周りのコードでないものについては、ファイル名を固定

components配下のファイルのファイルについて以下のように統一。

hoge : コンポーネントフォルダ
├── index.tsx : webサイトでのコンポーネント
├── style.ts : スタイル周りの設定
├── index.stories.tsx : storybookのコンポーネントファイル

2. lint周りはcommit時に実行するようにし、コード自体もフォーマットを統一する

個人での制作のため、ある程度自動でコードの記載ミス&フォーマット統一ができるようにlint, prettierを導入しています。ちなみに設定については以下のようにしています。

.eslintrc

{
 "extends": [
   "eslint:recommended",
   "plugin:react/recommended",
   "plugin:@typescript-eslint/recommended",
   "plugin:import/typescript",
   "plugin:prettier/recommended"
 ],
 "parser": "@typescript-eslint/parser",
 "plugins": [
   "react",
   "@typescript-eslint",
   "import",
   "prettier",
   "@emotion"
 ],
 "env": {
   "browser": true,
   "node": true,
   "es6": true
 },
 "parserOptions": {
   "ecmaVersion": 2017,
   "sourceType": "module",
   "ecmaFeatures": {
     "jsx": true
   }
 },
 "rules": {
   "prettier/prettier": "error",
   "no-use-before-define": [
     0
   ],
   "@typescript-eslint/no-use-before-define": [
     1
   ],
   "@typescript-eslint/indent": [
     "error",
     2
   ],
   "@typescript-eslint/prefer-interface": "off",
   "react/jsx-filename-extension": [
     "error",
     {
       "extensions": [
         ".jsx",
         ".tsx"
       ]
     }
   ],
   "react/prop-types": "off",
   "react/react-in-jsx-scope": "off",
   "@emotion/jsx-import": "error",
   "sort-imports": 0,
   "import/order": [2, { "alphabetize": { "order": "asc" } }]
 },
 "settings": {
   "react": {
     "version": "detect"
   }
 }
}

.prettierrc

{
 "semi": false,
 "arrowParens": "always",
 "printWidth":120,
 "tabWidth":2,
 "useTabs":false,
 "singleQuote":true,
 "proseWrap":"preserve"
}

stylelint.config.js

module.exports = {
 // add your custom config here
 // https://stylelint.io/user-guide/configuration
 plugins: [
   'stylelint-scss',
   'stylelint-declaration-block-no-ignored-properties',
   'stylelint-no-unsupported-browser-features',
   'stylelint-prettier',
 ],
 extends: ['stylelint-config-recess-order'],
 rules: {
   'prettier/prettier': true,
   'plugin/declaration-block-no-ignored-properties': true,
   'plugin/no-unsupported-browser-features': [
     true,
     {
       severity: 'warning',
     },
   ],
   'font-family-no-missing-generic-family-keyword': true,
   'declaration-block-no-shorthand-property-overrides': true,
   'declaration-block-trailing-semicolon': 'always',
   'selector-pseudo-element-colon-notation': 'double',
 },
}