自己紹介と開発におけるタスク管理を兼ねる意図で作成。
下記の 2 点の経緯からタスク管理画面の作成を行った。
-
当初、タスクの管理として
GitHub Projectsのかんばん機能を利用していたが、 Issue に付与されたラベルごとの管理がしづらいことや対象となるIssueを編集やコメント記入する際のアクションが多かった点 -
Issue の管理を行う為に毎回、
GitHubのページに移動しなければいけないのは億劫であると感じた点
| 機能 |
|---|
| 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点ある。
- 自分が使用しているパッケージが現在、どのような状態にあり、どんなことが話し合われているのかということについて、動向を追いやすくしたいと考えた点
- README.mdのテーブルの記述内容が増えると、コードの可読性が低下し、メンテナンスコストがかかってしまった点
- このスクリプトを自分のプロジェクトメンバーに展開することで組織力を高めていきたいと考えた点
[上記の背景に対する補足]
自分が使用しているパッケージが現在、どのような状態にあり、どんなことが話し合われているのかということについて、動向を追いやすくしたいと考えた点
上記に関して、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 |
| フッダー | - |