どうも、まさとらん（@0310lan）です！
今回は、簡単なJavaScriptコードだけでTrello風の「タスク管理ボード」を開発することができるライブラリのご紹介です！
非常にカスタマイズ性が高く、自分好みのタスク管理アプリを構築したい人などには最適でしょう。
コードも簡単で初心者の方もすぐに理解できると思うので、ぜひ参考にしてみてください！
【 jKanban 】
■「jKanban」の使い方
それでは、まず最初に「jKanban」を利用するための準備から始めていきましょう！
必要になるのは専用の「JS / CSS」ライブラリで、GitHubからそれぞれ取得して読み込むだけなのでお手軽です。
これらのライブラリは次のようにHTMLへ追記しておけば準備完了です。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jkanbanサンプル</title> <link rel="stylesheet" href="/css/jkanban.min.css"> </head> <body> <!-- ここにタスク管理ボードが表示される --> <div id="mykanban"></div> <script src="/js/jkanban.min.js"></script> <script> //ここにプログラムを書いていく！ </script> </body> </html>
「divタグ」を1つ配置していますが、ここにあとから「タスク管理ボード」を表示させるようにしたいと思います。
今回は、id属性名として「mykanban」を設定しています。
導入準備としてはこれだけです。…簡単ですね。
■「タスク管理ボード」を作ってみよう！
準備が整ったところで、いよいよ「タスク管理ボード」を作成していきましょう！
まず最初にやることは、「jKanban」のインスタンスを作ることです。
const kanban = new jKanban({ オプション });
インスタンスを作る際に、オプションを指定することである程度の初期設定ができるようになっています。
今回は、サンプルとして次のようなオプションを設定してみました。
const kanban = new jKanban({ element: '#myKanban', //タスク管理ボードを表示させたいHTML要素 gutter: '15px', //ボード同士の間隔 widthBoard: '250px', //ボードのサイズ boards: defaultBoards //初期状態のボードの中身をJSONで指定 });
基本的なオプションとしては、タスク管理ボードを表示させたいHTML要素の指定やボードのサイズ・間隔などがあります。（オプションの詳細はコチラ）
注目していただきたいのは「boards」というプロパティに指定するJSON形式のデータです。
これは、必要な「タスク」や「管理ボード」をあらかじめJSONデータで用意しておけば、読み込むだけですぐに独自のタスク管理ボードを表示させることができる機能になります。
そこで、今回は次のようなJSONデータを作ってみました！
const defaultBoards = [ { "id": "sample-board-1", "title": "タスク", "item": [ { "title": "報告書の作成" }, { "title": "14時から打ち合わせ" } ] }, { "id": "sample-board-2", "title": "進行中", "item": [{ "title": "○○案の企画書作成" }] }, { "id": "sample-board-3", "title": "完了", "item": [{ "title": "日報の提出" }] } ];
この例だと「defaultBoards」という名称でJSONデータを作成しており、3つのタスクボードを表示できるようにしています。
「id」は固有の英文字を指定するようになっており「title」がそのままボードのタイトルで「item」は各ボードの中身となる1つずつの「タスク」になります。
実行するとこんな感じです！
タスクの移動もドラッグ操作で簡単にできるようになっています！
もちろん、オプション設定でカラー配色なども好きなように変更できるし、ボードの数やタスクを動的に増やすことも可能です。
このサンプルのソースコードは以下のリンクから閲覧可能です！
■タスクを入力して追加できるようにしてみよう！
今度は、Trelloみたいに自分でタスクを入力して追加できるようにしてみましょう！
この方法だとJSONを用意していなくても利用できるので、さらに応用範囲が広くなります。
まず最初にオプション設定で、以下のように新しく2つの項目を追加します。
const kanban = new jKanban({ ・ ・ ・ addItemButton : true, buttonClick: (elem, id) => addFormElement(id) });
「addItemButton」というプロパティを「true」にすると、ボードにタスクを追加できるボタンが表示されます。
そして、このボタンをクリックした時の処理を「buttonClick」というメソッドに記述すればOKです。
今回は「addFormElement()」という関数を作って指定しました。
関数の中身ですが、フォーム要素を作ってタスク入力用の「inputタグ」を配置してあげるだけです。
function addFormElement( id ) { const formItem = document.createElement('form'); formItem.innerHTML = '<input type="text">'; kanban.addForm( id, formItem ); }
ボード固有のIDを受け取れるようになっているので、それを「addForm()」メソッドに指定すればOK！
あとは、タスク登録用のイベント処理を記述すれば完成です！
function addFormElement(id) { ・ ・ ・ formItem.addEventListener('submit', (e) => { e.preventDefault(); //入力された「タスク」をボードに登録 kanban.addElement(id, {"title": e.target[0].value}); //フォーム要素を非表示にするため削除 formItem.parentNode.removeChild(formItem); }) }
「addElement()」メソッドに入力された文字列を指定すればボードにタスクが追加されます。
最後に生成したフォーム要素を削除すれば、Trello風タスク管理ボードの完成です！
実行するとこんな感じです！
ここまでのサンプルコードは、以下のURLから閲覧できるので参考にしてみて下さい！
■「jKanban」のカスタマイズについて
「jKanban」には多彩なメソッドやAPIが提供されているので、自分好みにボードを細かくカスタマイズすることが可能です。
例えば、オプション設定の「click」メソッドを以下のように追記します。
const kanban = new jKanban({ ・ ・ ・ click: (elem) => kanban.removeElement(elem) });
「removeElement()」にタスク要素（elem）を指定するだけで、以下のようにクリック操作で削除できるようになります！
また、JSONデータを用意する際に「dragTo」へ移動可能なボードを指定することができます！
{ "id": "sample-board-1", "title": "タスク", "dragTo": ['sample-board-2'], "item": [ { "title": "報告書の作成" }, { "title": "14時から打ち合わせ" } ] },
上記の場合だと、IDが「sample-board-2」のボードにだけタスクをドラッグ移動できるという意味になります。
これを上手く活用すると、以下のようにタスクをいきなり「完了」ボードに移動できないルールを簡単に作れるわけです！
他にも、「addBoard() / removeBoard()」でボード自体を追加・削除できたり、「findElement()」でタスクを横断検索する機能なども簡単に作れます。（APIの詳細はコチラ）
これらのカスタマイズも含めた最終的なサンプルデモのソースコードを以下のリンクから閲覧できますので、ぜひ参考にしてみてください！
■JavaScript入門編は全編無料！動画で学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、JavaScript入門編はもちろんPython、Java、C言語、C#、PHP、Ruby、SQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「JavaScript入門編」「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
また、普段有料の「Java入門編」が、4/17（火）～4/23（月）の期間限定で【全編無料】となっております。この機会にぜひごらんください。
■まとめ
今回は、JavaScriptで独自の「タスク管理ボード」を簡単に開発できるライブラリ「jKanban」を駆け足でご紹介しました！
ピュアなJavascriptだけで作られたライブラリなので導入が簡単であり、さらにCSSフレームワークなどと組み合わせればオシャレなボードをすぐに構築できます。
個人やチームのプロジェクト管理などにも応用できるので、ぜひみなさんもオリジナルのタスク管理ボードを作って試してみて下さい！
＜参考＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
