データグリッド Reactでデータグリッドを実装したいときにおすすめしたいコンポーネント集です。 Material UIが好きなので、Material UIを使っている私の目線でのコメントが多いですが、ご容赦ください。 まだ実装お試ししていないけど良さそうなものがいくつかあるので、少しづつ追加しますよ :D コンポーネント集 見る専部門 データを見せることに向いている系です。 Material UI - Table Component Table React component - Material-UI MaterialUI純正のテーブルコンポーネントです。ソートやフィルタは自分で実装してイベントで差し込んでいく感じですね。仮想テーブルもできますが、他のライブラリとのあわせ技なので、このコンポーネントの特徴ってことでもないですね。なにより、Material UIの純正なので、Material UIをアプリの全体荷適用しているなら第一候補ですね。見た目もスッキリ統一感が出ますしね。あとはなんて言ったって、Material UIはデモページもAPIのページもとっても詳しい。ありがたい。 React-Table tannerlinsley/react-table Reactのテーブルといえばこれですね。名前もそのままReact-Table。いろいろな方がコントリビュートしてくれているので、やりたいことはなんだってできるような印象です。デモページもとっても豊富でわかりやすいですね。Material UIにこだわらないなら、第一候補ではないでしょうか？ちょっと見た目の調整は頑張らないといけないかもしれないですね。Style差し込んで行きましょう。 Grid.js Grid.js - Advanced table plugin 比較的新しいライブラリです。TypeScriptで実装されているのがいいですね！新しい割にGitHubスター数が結構多いので、これからグイグイくるんじゃないかなぁ、という期待と、TypeScriptを採用しているので仲良くなれそうだなぁという理由から、序盤で紹介させていただきました。見た目もかっこいいですね。 Material-table mbrn/material-table Materialデザインを踏襲して実装されたテーブルコンポーネントですね。Material UIのサイトでも紹介されているので、公式もその良さを認めているのかな？テーブル自体の操作感はよく、いいコンポーネントだと思います。 mui-datatables gregnb/mui-datatables Material-table と対を成すのが、mui-datatablesです。テーブル自体の操作感はかなり良いです。デモページも結構見やすくて、見ているだけでも楽しくなるので、おすすめです。gregnb/mui-datatables SpreadSheet寄り編 データを見ながらちょちょっと修正したいときに便利なコンポーネントです。ほとんどExcelじゃん、ってのもあります。 react-data-grid React Data Grid · Excel-like data grid component built with React Excelライクな感じになっているが、それなりにWeb感も残しています。Excelほど自由自在にコピペできる感じではないのがちょっと惜しい。 React Datasheet React Datasheet Component かなりExcelライクな感じですね。テーブルのほとんどの要素を編集可能にしないといけないケースには向いていそうですね！ ブルジョワ編 金の力は偉大だ！！！ ReactGrid (有償) React Grid なにもいうことはないです。すげーよ。
Reactでデータグリッドを実装したいときにおすすめしたいコンポーネント集です。 Material UIが好きなので、Material UIを使っている私の目線でのコメントが多いですが、ご容赦ください。
まだ実装お試ししていないけど良さそうなものがいくつかあるので、少しづつ追加しますよ :D
データを見せることに向いている系です。
Table React component - Material-UI MaterialUI純正のテーブルコンポーネントです。ソートやフィルタは自分で実装してイベントで差し込んでいく感じですね。仮想テーブルもできますが、他のライブラリとのあわせ技なので、このコンポーネントの特徴ってことでもないですね。なにより、Material UIの純正なので、Material UIをアプリの全体荷適用しているなら第一候補ですね。見た目もスッキリ統一感が出ますしね。あとはなんて言ったって、Material UIはデモページもAPIのページもとっても詳しい。ありがたい。
tannerlinsley/react-table
Reactのテーブルといえばこれですね。名前もそのままReact-Table。いろいろな方がコントリビュートしてくれているので、やりたいことはなんだってできるような印象です。デモページもとっても豊富でわかりやすいですね。Material UIにこだわらないなら、第一候補ではないでしょうか？ちょっと見た目の調整は頑張らないといけないかもしれないですね。Style差し込んで行きましょう。
Grid.js - Advanced table plugin
比較的新しいライブラリです。TypeScriptで実装されているのがいいですね！新しい割にGitHubスター数が結構多いので、これからグイグイくるんじゃないかなぁ、という期待と、TypeScriptを採用しているので仲良くなれそうだなぁという理由から、序盤で紹介させていただきました。見た目もかっこいいですね。
mbrn/material-table
Materialデザインを踏襲して実装されたテーブルコンポーネントですね。Material UIのサイトでも紹介されているので、公式もその良さを認めているのかな？テーブル自体の操作感はよく、いいコンポーネントだと思います。
gregnb/mui-datatables
Material-table と対を成すのが、mui-datatablesです。テーブル自体の操作感はかなり良いです。デモページも結構見やすくて、見ているだけでも楽しくなるので、おすすめです。gregnb/mui-datatables
データを見ながらちょちょっと修正したいときに便利なコンポーネントです。ほとんどExcelじゃん、ってのもあります。
React Data Grid · Excel-like data grid component built with React
Excelライクな感じになっているが、それなりにWeb感も残しています。Excelほど自由自在にコピペできる感じではないのがちょっと惜しい。
React Datasheet Component
かなりExcelライクな感じですね。テーブルのほとんどの要素を編集可能にしないといけないケースには向いていそうですね！
金の力は偉大だ！！！
React Grid
なにもいうことはないです。すげーよ。
今日JavaScript(Node.js)を書いていたときに遭遇した出来事を備忘録がてら書き残しておく。 エラーになったコード 下記のコードはエラーになる。 const fs = require('fs') (async () => { console.log(fs) })() 実行結果 (async () => { ^ TypeError: require(...) is not a function 上のエラーを解決させたコード JavaScriptは;を書こうが書かまいがが動く、と思っていたが、1行目の末尾に ; をつけることで、今回のコードは問題なく動くようになる。 const fs = require('fs'); (async () => { console.log(fs) })() ※実行結果は長くなるので省略。サンプルコードが悪かった... "TypeError: require(...) is not a function"が出る仕組み これはどういうことかなと思ったけど、考えてみれば単純なことだった。 JavaScriptは文末にセミコロンを付けなかった場合、その後の文が構文的に解釈可能な場合、解釈しようとする。 自分もここらへんは自信がないので、JavaScript Primer の記述も引用させていただく。 JavaScriptには、特殊なルールに基づき、セミコロンがない文も行末に自動でセミコロンが挿入されるという仕組みがあります。 しかし、この仕組みは構文を正しく解析できない場合に、セミコロンを足すという挙動を持っています。 これにより、意図しない挙動を生むことがあります。そのため、必ず文の末尾にはセミコロンを書くようにします。 引用元のページ: https://jsprimer.net/basic/statement-expression/#statement-expression-summary つまり先ほど私が書いたコードは下記のように解釈された形となる。 // require('fs')(/* ~ */) 的な解釈となっていた const fs = require('fs')(async () => { console.log(fs) })() 余談: prettierでセミコロンを付けない設定をした際の挙動 気になったので試してみた。 prettier の設定で semi: false にしたとき、;はどこにつくのか？ 結果は下記の通り。 const fs = require('fs') ;(async () => { console.log(fs) })() あとがき 普段 ; は付ける派なのだが、なんとなくプロトタイプのコードを書いていてつけないでいた。後から prettier かければ済む話だとか考えていたら、思わぬエラーに引っかかった。 おかげでJavaScriptのことを少し知ることができたので結果的に良かったと思う。
今日JavaScript(Node.js)を書いていたときに遭遇した出来事を備忘録がてら書き残しておく。
下記のコードはエラーになる。
const fs = require('fs') (async () => { console.log(fs) })()
実行結果
(async () => { ^ TypeError: require(...) is not a function
JavaScriptは;を書こうが書かまいがが動く、と思っていたが、1行目の末尾に ; をつけることで、今回のコードは問題なく動くようになる。
;
const fs = require('fs'); (async () => { console.log(fs) })()
※実行結果は長くなるので省略。サンプルコードが悪かった...
これはどういうことかなと思ったけど、考えてみれば単純なことだった。
JavaScriptは文末にセミコロンを付けなかった場合、その後の文が構文的に解釈可能な場合、解釈しようとする。 自分もここらへんは自信がないので、JavaScript Primer の記述も引用させていただく。
JavaScriptには、特殊なルールに基づき、セミコロンがない文も行末に自動でセミコロンが挿入されるという仕組みがあります。 しかし、この仕組みは構文を正しく解析できない場合に、セミコロンを足すという挙動を持っています。 これにより、意図しない挙動を生むことがあります。そのため、必ず文の末尾にはセミコロンを書くようにします。
引用元のページ: https://jsprimer.net/basic/statement-expression/#statement-expression-summary
つまり先ほど私が書いたコードは下記のように解釈された形となる。
// require('fs')(/* ~ */) 的な解釈となっていた const fs = require('fs')(async () => { console.log(fs) })()
気になったので試してみた。
prettier の設定で semi: false にしたとき、;はどこにつくのか？ 結果は下記の通り。
prettier
semi: false
const fs = require('fs') ;(async () => { console.log(fs) })()
普段 ; は付ける派なのだが、なんとなくプロトタイプのコードを書いていてつけないでいた。後から prettier かければ済む話だとか考えていたら、思わぬエラーに引っかかった。 おかげでJavaScriptのことを少し知ることができたので結果的に良かったと思う。
はじめに Node.jsアプリケーションからJDBCでSQL Server、Oracle、DB2、Postgres、MongoDBなどのDBや、Salesforce、Eloqua、Oracle Sales Cloud、Oracle Service CloudなどのSaaSアプリケーションにJDBCで接続する必要性があるならば、DataDirect JDBCドライバを利用すると楽勝です。 この記事では、DataDirect JDBC ドライバを使用して Node.js から Salesforce データに接続してみます。 事前準備 Node.js DataDirect Oracle JDBC ドライバのダウンロード＆インストール 1,こちらよりDataDirect JDBCドライバをダウンロードします(お試し版が15日使えます)。 2,jarファイルのダウンロードが終了したら、パッケージを実行してJDBCドライバをインストールします。 1)Windowsの場合、インストーラを実行し、JDBCドライバをインストールします。 2)Unix/Linuxの場合、以下のコマンドでドライバをインストールします。 java -jar PROGRESS_DATADIRECT_JDBC_INSTALL.jar Node.jsのJDBCパッケージをインストールする 1,Node.jsでは、JDBCドライバを利用するためにnode-jdbcパッケージをインストールする必要があります。 2,以下のコマンドでパッケージをインストールします。 npm i jdbc 3,DataDirect JDBCドライバを/install_dir/Progress/JDBC_XX/libからプロジェクトライブラリにコピーします。 今回はSalesforceで試すので、Salesforce JDBCドライバであるsforce.jarをコピーしました。 Node.jsからSalesforceに接続する 1,DataDirect JDBCドライバを経由し、Salesforceに接続。テーブルにクエリするサンプルコードを以下に記述します。必要に応じて変更くださいね！ var JDBC = require('jdbc'); var jinst = require('jdbc/lib/jinst'); var asyncjs = require('async'); if (!jinst.isJvmCreated()) { jinst.addOption("-Xrs"); jinst.setupClasspath(['./drivers/sforce.jar']); } var config = { // SparkSQL configuration to your server url: 'jdbc:datadirect:sforce://login.salesforce.com;DatabaseName=default;SecurityToken=stoken', drivername: 'com.ddtek.jdbc.sforce.SForceDriver', minpoolsize: 1, maxpoolsize: 100, user: 'saiteja09@gmail.com', password: 'password', properties: {} }; var sforcesqldb = new JDBC(config); //initialize sforcesqldb.initialize(function(err) { if (err) { console.log(err); } }); sforcesqldb.reserve(function(err, connObj) { if (connObj) { console.log("Using connection: " + connObj.uuid); var conn = connObj.conn; // Query the database. asyncjs.series([ function(callback) { // Select statement example. conn.createStatement(function(err, statement) { if (err) { callback(err); } else { statement.setFetchSize(100, function(err) { if (err) { callback(err); } else { //Execute a query statement.executeQuery("SELECT * FROM SFORCE.Account;", function(err, resultset) { if (err) { callback(err) } else { resultset.toObjArray(function(err, results) { //Printing number of records if (results.length > 0) { console.log("Record count: " + results.length); console.log(results); } callback(null, resultset); }); } }); } }); } }); }, ], function(err, results) { // Results can also be processed here. // Release the connection back to the pool. sforcesqldb.release(connObj, function(err) { if (err) { console.log(err.message); } }); }); } }); 2,setupClasspath メソッドに注意です。DataDirect Salesforce JDBC ドライバへのパスを指定する必要があります。 上記のコードを実行すると、レコード数とテーブルデータがコンソールに表示されます。 簡単ですね！ 参考：Salesforce.com対応高速JDBCドライバー
Node.jsアプリケーションからJDBCでSQL Server、Oracle、DB2、Postgres、MongoDBなどのDBや、Salesforce、Eloqua、Oracle Sales Cloud、Oracle Service CloudなどのSaaSアプリケーションにJDBCで接続する必要性があるならば、DataDirect JDBCドライバを利用すると楽勝です。
この記事では、DataDirect JDBC ドライバを使用して Node.js から Salesforce データに接続してみます。
事前準備 Node.js
1,こちらよりDataDirect JDBCドライバをダウンロードします(お試し版が15日使えます)。
2,jarファイルのダウンロードが終了したら、パッケージを実行してJDBCドライバをインストールします。
1)Windowsの場合、インストーラを実行し、JDBCドライバをインストールします。 2)Unix/Linuxの場合、以下のコマンドでドライバをインストールします。
java -jar PROGRESS_DATADIRECT_JDBC_INSTALL.jar
1,Node.jsでは、JDBCドライバを利用するためにnode-jdbcパッケージをインストールする必要があります。 2,以下のコマンドでパッケージをインストールします。
npm i jdbc
3,DataDirect JDBCドライバを/install_dir/Progress/JDBC_XX/libからプロジェクトライブラリにコピーします。
今回はSalesforceで試すので、Salesforce JDBCドライバであるsforce.jarをコピーしました。
1,DataDirect JDBCドライバを経由し、Salesforceに接続。テーブルにクエリするサンプルコードを以下に記述します。必要に応じて変更くださいね！
var JDBC = require('jdbc'); var jinst = require('jdbc/lib/jinst'); var asyncjs = require('async'); if (!jinst.isJvmCreated()) { jinst.addOption("-Xrs"); jinst.setupClasspath(['./drivers/sforce.jar']); } var config = { // SparkSQL configuration to your server url: 'jdbc:datadirect:sforce://login.salesforce.com;DatabaseName=default;SecurityToken=stoken', drivername: 'com.ddtek.jdbc.sforce.SForceDriver', minpoolsize: 1, maxpoolsize: 100, user: 'saiteja09@gmail.com', password: 'password', properties: {} }; var sforcesqldb = new JDBC(config); //initialize sforcesqldb.initialize(function(err) { if (err) { console.log(err); } }); sforcesqldb.reserve(function(err, connObj) { if (connObj) { console.log("Using connection: " + connObj.uuid); var conn = connObj.conn; // Query the database. asyncjs.series([ function(callback) { // Select statement example. conn.createStatement(function(err, statement) { if (err) { callback(err); } else { statement.setFetchSize(100, function(err) { if (err) { callback(err); } else { //Execute a query statement.executeQuery("SELECT * FROM SFORCE.Account;", function(err, resultset) { if (err) { callback(err) } else { resultset.toObjArray(function(err, results) { //Printing number of records if (results.length > 0) { console.log("Record count: " + results.length); console.log(results); } callback(null, resultset); }); } }); } }); } }); }, ], function(err, results) { // Results can also be processed here. // Release the connection back to the pool. sforcesqldb.release(connObj, function(err) { if (err) { console.log(err.message); } }); }); } });
2,setupClasspath メソッドに注意です。DataDirect Salesforce JDBC ドライバへのパスを指定する必要があります。
上記のコードを実行すると、レコード数とテーブルデータがコンソールに表示されます。
簡単ですね！
参考：Salesforce.com対応高速JDBCドライバー
生JS(EC6)を3ヶ月ほど叩き込んだ後、HTMLとCSSを一通り学び、Node.jsでログイン処理を実装してみました。 【実装環境】 * Node.jsのStable版をインストール * 実装が便利になるということで、Expressを導入。 * Vagrant上で8001のポートを空けて作業 Nodeでログイン処理を行うにあたり、 機能を追加した結果が以下の通り。 "dependencies": { "body-parser": "^1.19.0", "ejs": "^3.1.3", "express": "^4.17.1", "express-session": "^1.17.1", "request": "^2.88.2" } Step1 ID、パスワードが入力され、POSTされるまで 処理のスクリプトを書いているファイル内の処理。 ブラウザで/loginが叩かれた際、login.htmlをレンダリング。 // /loginが開かれた場合の処理 app.get('/login', function (req, res) { res.render('login.html', {err:""}); req.session.name = ""; }) この画面で「ログイン」ボタンを押すと、/loginSendにPOSTする。 <form action="/loginSend" method="POST"> メールアドレス：<input type="text" name="mail" > <br> パスワード ：<input type="text" name="password"> <br> <br> <input type="submit" value="ログイン" > </form> Step2 POSTされたデータを処理する ・ここで入力されたID/パスワードを、データベースに取得する (その際にパスワードはハッシュ化してID/ハッシュ化されたパスワードの組み合わせを取得する) ・正常なログインができた際、セッション情報を付与する。 //アイパス一致すれば、Main画面をレンダリングする。 if (result["結果"] === "OK"){ res.render('main.html'); req.session.mail = result["user_id"]; req.session.name = result["user_name"]; } 執筆中..
【実装環境】 * Node.jsのStable版をインストール * 実装が便利になるということで、Expressを導入。 * Vagrant上で8001のポートを空けて作業
Nodeでログイン処理を行うにあたり、 機能を追加した結果が以下の通り。
"dependencies": { "body-parser": "^1.19.0", "ejs": "^3.1.3", "express": "^4.17.1", "express-session": "^1.17.1", "request": "^2.88.2" }
処理のスクリプトを書いているファイル内の処理。 ブラウザで/loginが叩かれた際、login.htmlをレンダリング。
// /loginが開かれた場合の処理 app.get('/login', function (req, res) { res.render('login.html', {err:""}); req.session.name = ""; })
この画面で「ログイン」ボタンを押すと、/loginSendにPOSTする。
/loginSend
<form action="/loginSend" method="POST"> メールアドレス：<input type="text" name="mail" > <br> パスワード ：<input type="text" name="password"> <br> <br> <input type="submit" value="ログイン" > </form>
・ここで入力されたID/パスワードを、データベースに取得する (その際にパスワードはハッシュ化してID/ハッシュ化されたパスワードの組み合わせを取得する) ・正常なログインができた際、セッション情報を付与する。
//アイパス一致すれば、Main画面をレンダリングする。 if (result["結果"] === "OK"){ res.render('main.html'); req.session.mail = result["user_id"]; req.session.name = result["user_name"]; }
執筆中..
環境 Windows10 Docker Toolbox $ docker -v Docker version 18.09.0, build 4d60db472b やりたいこと $ docker-compose run --rm /bin/bash $ npm i --no-bin-links $ npm run eslint みたいなコマンドを使いたい。 エラー sh: 1: eslint: not found こんな感じで怒られる。 原因 node_modules/.bin にコマンドのリンクが置かれていないため。 Mac では自動で作成されていたため、Windows ではシンボリックリンクがはれない問題 が原因なのかもしれない。 解決法 node_modules を一度全て削除し、docker を介さずに npm i を実行すると node_modules/.bin が作成される。 > npm i > docker-compose run --rm /bin/bash $ npm run eslint とおった。 おまけ http://minatooe.hatenablog.jp/entry/2017/12/15/234418 あとは、Win は管理者権限なら symlink を作れるようになるらしいので、vagrant を動かすコマンドプロンプトを管理者権限で起動すると--no-bin-links をつけなくても大丈夫になるらしい。 とあったのでやってみたができなかった…。
$ docker -v Docker version 18.09.0, build 4d60db472b
$ docker-compose run --rm /bin/bash
$ npm i --no-bin-links $ npm run eslint
みたいなコマンドを使いたい。
sh: 1: eslint: not found
こんな感じで怒られる。
node_modules/.bin にコマンドのリンクが置かれていないため。 Mac では自動で作成されていたため、Windows ではシンボリックリンクがはれない問題 が原因なのかもしれない。
node_modules/.bin
node_modules を一度全て削除し、docker を介さずに npm i を実行すると node_modules/.bin が作成される。
npm i
> npm i > docker-compose run --rm /bin/bash
$ npm run eslint
とおった。
http://minatooe.hatenablog.jp/entry/2017/12/15/234418
あとは、Win は管理者権限なら symlink を作れるようになるらしいので、vagrant を動かすコマンドプロンプトを管理者権限で起動すると--no-bin-links をつけなくても大丈夫になるらしい。
とあったのでやってみたができなかった…。
