search

Yuisei-Maruyama / MyPortfolio

This is my portfolio.
1 stars 1 forks source link
eslint javascript mui node prettier react react-hooks react-router react-router-dom scss si-fi styled-components typescript

readme

My Portfolio

Portfolio URL

https://yuisei-maruyama.work/

目的

自己紹介と開発におけるタスク管理を兼ねる意図で作成。

開発におけるタスク管理画面の作成経緯

下記の 2 点の経緯からタスク管理画面の作成を行った。

要件定義

機能一覧

機能
GitHub Issue の Todo ラベル内容閲覧機能
GitHub Issue の新規作成機能
GitHub Issue に付与されたラベルごとの管理機能
コンポーネントのプレビュー機能
ドキュメントのプレビュー機能
特定コマンドによるアニメーション表示機能
https://github.com/Yuisei-Maruyama/MyPortfolio#%E4%BD%BF%E7%94%A8%E6%8A%80%E8%A1%93%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3 の自動更新機能

(※「使用技術・バージョン」に記載されているテーブルはコミット時に updateReadmeTable.ts によって自動更新される。）

GitHub Issue の Todo ラベル内容閲覧機能

GitHub Issue に付与された Todo ラベルの内容からタイトルと詳細内容が閲覧可能 Issue タイトルをクリックすることで該当 Issue に遷移可能

GitHub Issue の新規作成

付与されたラベルごとの管理機能

ドラッグ＆ドロップにおけるラベルの修正

ex.) Todo -> Doing ラベルに変更

ex.) Doing -> Closed ラベルに変更

特定コマンドによるアニメーション表示機能

VSCode でも親しみのある 「command + shift + p」 を押下することで、コマンドリストが表示される。
コマンド入力ボックスに下記のワードを入力することによって、指定したコンポーネントを表示することが可能になる。

コマンド名 説明
all 全てのコマンドを表示する。
alert ウィンドウ上部にアラートを表示する。
matrix ウィンドウ内にマトリックスでお馴染みのあのアニメーションを表示する。

ex.) matrix

「使用技術・バージョン」テーブルの自動更新機能

上記機能を実装した背景としては、3点ある。

[上記の背景に対する補足]

自分が使用しているパッケージが現在、どのような状態にあり、どんなことが話し合われているのかということについて、動向を追いやすくしたいと考えた点

上記に関して、npm の各パッケージの詳細URLが https://www.npmjs.com/package/{パッケージ名} になっているという規則性を見つけた。
そこでテーブルの「技術」カラムを npm の 各パッケージの link にすることで、Githubのページに遷移する為のアクションを減らし、パッケージの状態の確認が楽になると考え、実現に至った。

README.mdのテーブルの記述内容が増えると、コードの可読性が低下し、メンテナンスコストがかかってしまった点

以前に自分が関わっていたプロジェクトにおいて、マークダウンのテーブルで多くの情報を扱おうとした際にとても苦戦した経験があった。
その経験を踏まえて、手作業でマークダウンを編集する事なく、スクリプトで自動的にテーブルを生成する方法を実現した。
結果として、手作業で行っていた煩わしいテーブルの内容のメンテナンスをせずに多くの情報を扱うことが容易になった。

使用技術・バージョン

技術 version 備考
@emotion/react ^11.4.1 CSS in JS を使用するためのパッケージ
@emotion/styled ^11.3.0 CSS in JS を使用するためのパッケージ
@mui/icons-material ^5.2.1 CSSフレームワーク Material-UI を使用するためのパッケージ
@mui/lab ^5.0.0-alpha.63 CSSフレームワーク Material-UI を使用するためのパッケージ
@mui/material ^5.0.0-rc.1 CSSフレームワーク Material-UI を使用するためのパッケージ
@testing-library/jest-dom ^5.11.4 React で Unit テストを行うためのパッケージ
@testing-library/react ^11.1.0 React で Unit テストを行うためのパッケージ
@testing-library/user-event ^12.1.10 React で Unit テストを行うためのパッケージ
@types/jest ^26.0.15 jestの型定義ファイルのパッケージ
@types/react-dom ^17.0.0 react-domの型定義ファイルのパッケージ
@types/styled-components ^5.1.25 styled-componentsの型定義ファイルのパッケージ
@uiw/react-md-editor ^3.9.1 React で Markdown を表示できるようにする
@use-it/interval ^1.0.0 setInterval を提供するカスタム React フック
highlight.js ^11.6.0 Webページ上に表示したプログラミングコードなどに色を付けるライブラリ
marked ^4.0.18 markdownをhtmlに変換するライブラリ
mermaid ^9.1.3 テキストとコードを使用して図と視覚化をマークダウンで実現できるライブラリ
react ^17.0.2 ユーザインタフェース構築のための JavaScript
react-beautiful-dnd ^13.1.0 ドロップ&ドラッグを実現できる
react-csv ^2.2.2 React上で簡単にcsvエクスポート機能を実装できるライブラリ
react-dom ^17.0.2 Javascript のオブジェクトでリアルDOMを仮想的に作り、変更箇所だけ差分検知し更新することを React で行えるようにする
react-hook-form ^7.34.0 フォームの入力データを検証まで含めて、簡単に扱えるライブラリ
react-hot-keys ^2.7.2 キーイベントを取得して、そのイベントに対する処理を行える
react-icons ^4.2.0 Ant Design や Material Designなどを集めたアイコンの宝庫
react-particle-effect-button ^1.0.1 particleアニメーションが付いたボタンを表現できる
react-router-dom ^5.2.0 ルーティングを定義できる
react-scripts ^5.0.1 アプリケーションの初期表示時に JS の読み込み処理を行う
react-vertical-timeline-component ^3.5.2 タイムラインの表示
sass ^1.45.1 Sass をコンパイルするためのモジュール
sass-loader ^12.4.0 Sass を CSS へ変換するためのモジュール
shelljs ^0.8.5 移植可能な（Windows / Linux / OS X）の Unix シェルコマンドを Node.js API の上に実装できるモジュール
styled-components ^5.3.5 React思想のコンポーネント単位での管理がスタイルにも可能になる
tslib ^2.3.1 コンパイル後の js ファイルが大きくなるのを防ぐ
typescript ^4.1.2 JavaScript に対して、静的型付けとクラスベースオブジェクト指向を加えた言語
uuid ^8.3.2 uuid を付与する
web-vitals ^1.0.1 サイトの健全性を示す重要指標を計測できる
@material-ui/core ^4.12.3 CSSフレームワーク Material-UI を使用するパッケージ(旧) -> @mui/material に変更された
@material-ui/icons ^4.11.2 CSSフレームワーク Material-UI のアイコンを使用するパッケージ(旧) -> @mui/icons-material に変更された
@types/marked ^4.0.3 markedの型定義ファイルのパッケージ
@types/mermaid ^8.2.9 mermaidの型定義ファイルのパッケージ
@types/node ^17.0.29 nodeの型定義ファイルのパッケージ
@types/react ^17.0.19 reactの型定義ファイルのパッケージ
@types/react-beautiful-dnd ^13.1.2 react-beautiful-dndの型定義ファイルのパッケージ
@types/react-csv ^1.1.3 react-csvの型定義ファイルのパッケージ
@types/react-router-dom ^5.1.8 react-router-domの型定義ファイルのパッケージ
@types/react-vertical-timeline-component ^3.0.1 react-vertical-timeline-componentの型定義ファイルのパッケージ
@types/uuid ^8.3.3 uuidの型定義ファイルのパッケージ
@typescript-eslint/eslint-plugin ^4.31.1 ESLint で Typescript のチェックを行う
@typescript-eslint/parser ^4.31.1 ESLint を Typescript で解析できるようにする
axios ^0.24.0 Promise ベースの HTTP Client
babel-plugin-styled-components ^2.0.7 styled-componentsで出力されるクラス属性にファイル名やdisplayNameを表示する
eslint ^7.32.0 コードの解析
eslint-config-prettier ^8.3.0 ESLint と Prettier を併用する
eslint-config-standard ^16.0.3 JavaScript Standard Styleのルールをeslintに適用する
eslint-plugin-import ^2.24.2 importの順番をルール化して自動で整列させる
eslint-plugin-jsx-a11y ^6.6.0 jsx(tsx) にアクセシビリティのルールを追加する
eslint-plugin-node ^11.1.0 Node.js の記述に対するルールを設定する
eslint-plugin-promise ^5.1.0 非同期処理に対するルールを設定する
eslint-plugin-react ^7.25.2 React のルールを設定する
eslint-plugin-react-hooks ^4.3.0 React Hooksのルールを設定する
eslint-plugin-styled-components-varname ^1.0.1 styled-components の変数名の命名ルールを設定する
husky ^7.0.0 Git コマンドフックに指定したコマンドを呼び出せる
lint-staged ^11.1.2 commit したファイル(ステージングにあるファイル)に lint を実行する
polished ^4.1.3 JavaScript で rgba を使用できるようにする
prettier ^2.4.1 コードの整形
react-app-rewired ^2.1.8 webpack の設定を上書きしてエイリアス設定しているパスの解決を行う
ts-node ^10.5.0 typescript のファイルを単体で実行できるモジュール

動作環境

デバイスの識別 OS 対応ブラウザ
PC macOS Monterey Google chrome 最新

基本設計

サイトマップ

画面名

画面名 URI
ヘッダー -
メイン画面 /
タスク管理ボード画面 /board
コンポーネントプレビュー画面 /components
対象のコンポーネントのプレビュー /components/:label
ドキュメントプレビュー画面 /documents
対象のドキュメントのプレビュー /documents/:label
フッダー -