初めての投稿なので、至らぬ点があるかと思いますが、温かい目で見て頂ければ幸いです。
プロジェクトの管理の中で、気がついたときに課題管理表にメンバーが書き込みを行うといった事をやっていましたが、Excelだと誰かが開きっぱなしだったりすると編集出来なくてちょっと面倒です。
プロジェクト管理ツールを利用していればそちらを使うのも手ですが、今回はNode.jsとSQLiteを使って誰でもいつでも気がついたときに課題の登録が出来るようなものを目指して作ってみました。
環境はWindows10で行っています。
使うもの
私が動作を確認した構成は以下の通りです
- npm:6.4
- Node.js:8.xx
- Express:4.16
- SQLite:3.22
SQLiteのインストール
公式サイトに行ってダウンロード＆インストールを行ってください。
DBとテーブルの作成
今回はToBe方式での課題管理を行うことを想定し、以下のカラムを用意します。
- 課題
- 理想の姿
- 理想とのギャップ
- 解決策
インストールフォルダをカレントディレクトリにします。
まずDBを作りたいので、以下のコマンドを発行します。
sqlite3kadai.db次に課題の記録用にテーブルを作ります
createtablekadaitable(idintegerPRIMARYKEYAUTOINCREMENT,kadaitext,risoutext,gyapputext,kaiketsutext)カラムは以下のような定義にしました。
- id (キー項目＆オートインクリメントで自動採番にしました)
- kadai(課題）
- risou(理想の姿）
- gyappu(理想とのギャップ）
- kaiketu(解決策）
実際はかっこいいカラム名とかにして貰えればと思います。
作り終わったらCtrl+cでSQLiteから抜けて、コマンドプロンプトを閉じてください。
Node.jsで課題管理表の雛形を作る（Express)
今回は「kadai」というフォルダを作成して、そこに作っていく想定で説明します。
kadaiフォルダをカレントに設定し、Nodeコマンドプロンプトで必要な以下のパッケージをインストールします
# Express-Generator
npm i express-generator
# SQLiteのモジュール
npm i sqlite3
トップページを作る
トップページには以下の物を作ります
- タイトル
- 課題登録画面遷移リンク
- 課題表
レイアウト等は自分であまり考えたくないので、CDNのBootstrapを利用しました。
viewsフォルダのindex.ejsを以下のように編集します。
<!DOCTYPE html><html><!-- Bootstrap CSS --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"crossorigin="anonymous"><head><title>課題管理表</title><linkrel='stylesheet'href='/stylesheets/style.css'/></head><body><divclass="container"><divclass="row"><divclass="col"><h1>課題管理票</h1></div></br><divclass="col-md-12"><ahref="/write">新規追加</a><br></div><br><tableclass="table table-bordered"><theadclass="thead-dark"><tr><thscope="col">No</th><thscope="col">課題</th><thscope="col">理想の姿</th><thscope="col">理想の姿とのギャップ</th><thscope="col">解決策</th></tr></thead><tbody><%for(vari=0;i<posts.length;i++){%><tr><td><%=posts[i].id%></td><td><%=posts[i].kadai%></td><td><%=posts[i].risou%></td><td><%=posts[i].gyappu%></td><td><%=posts[i].kaiketsu%></td></tr><%}%></tbody></table></div></div><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP"crossorigin="anonymous"></script></body></html>続いてindex.ejsで利用するためのroutesの中のindex.jsを修正します。
varexpress=require('express');varsqlite3=require('sqlite3');varrouter=express.Router();vardb=newsqlite3.Database('./kadai.db');/* GET home page. */router.get('/',(req,res,next)=>{db.serialize(()=>{db.all('select * from kadaitable',(err,rows)=>{if(!err&&rows){constnewRows=rows.map(row=>{if(row.content){row.content=row.content.replace(/\r?\n/g,'<br>');}returnrow;});console.log(newRows);res.render('index',{posts:newRows});}});});});module.exports=router;とりあえずトップ画面はこれで完成しました。
Nodeのコマンドプロンプトから以下を実行します
npm start
こんな感じのメニューが表示されたらOKです。
その２では登録画面を作って、実際にSQLiteのテーブルに書き込み、トップ画面に反映されるまでを解説します。