Vue.jsを利用してスクラッチからガントチャートを作成する方法を解説しています。JavaScriptのガントチャートを検索するとライブラリの利用方法を解説している記事がほとんどで作成方法を公開している記事を見つけるのは困難です。 本文書では有償・無償を問わずガントチャートのライブラリは一切利用しておらず、Vue.jsを利用してスクラッチからガントチャート の作成を行っています。 内容が比較的多いので3回に分けて文書を公開していますが、最終的には下記のようなガントチャートを作成することができます。 完成時のガントチャート 【実装するガントチャートの主な機能】 タスクバーは横方向にドラッグ&ドロップで移動することができ、移動が完了すると日付も一緒に更新されます。タスクバーの両側についている四角いボタンをドラッグ&ドロップすることでタスクの期間を変更することができ、日付も一緒に更新されます。タ
![スクラッチからVue.jsで作る自作ガントチャート | アールエフェクト](https://cdn-ak-scissors.b.st-hatena.com/image/square/30373e33f88d75b27b49a25ffc2c67c2dd9ff695/height=288;version=1;width=512/https%3A%2F%2Freffect.co.jp%2Fwp-content%2Fuploads%2F2020%2F11%2Fvue_gantt_chart.png)