waveさんの技術日誌

wave1008の日記の新館です。

Node.jsでexceljsを使う(その1)

Node.jsでExcelの処理をしたいと思いました。

いろいろライブラリがあるのですが、APIが直感的なのでexceljsがよさげだと思いました。

https://www.npmjs.com/package/exceljs#reading-xlsx

でも、このドキュメントはちょっと不親切なので、初心者にはわかりにくいです。そもそもNode.jsそのものに慣れていないので、非同期I/Oの扱いがよくわからんでかなり悩みました。以下の記事を読んでPromiseパターンを理解すると、だんだん書き方が分かってきました。

 

参考にした記事

俺たちはJavaScriptの非同期処理とどう付き合っていけば良いのだろうか - Qiita

JavaScript Promiseの本

 

試しにTypeScriptでサンプルコードを書いてみました。


// exceljsで複数のExcelファイルを読み込んでファイルとシートの一覧を作成する
// TypeScriptのサンプルです。

import * as Excel from 'exceljs';
import * as path from 'path';
import * as fs from 'fs';

// 処理対象のExcelファイルのリストを作成します。
let dataDir = path.resolve("testdata");
let filelist = fs.readdirSync(dataDir).map(f => { return path.join(dataDir, f); });

// exceljsはファイルの読み込みに非同期のメソッドしか提供していないので、promiseパターンで実装します。
// まず、ファイルリストに対応してWorkbookの読み込みを行うPromiseのリストを作成します。
let promises = filelist.map(file => {
    let workbook = new Excel.Workbook();
    return workbook.xlsx.readFile(file) // readFileはPromiseを拡張したPromishを返します。
        .then(() => {
            // workbookにはfileの情報が含まれないので、fileとペアにしてresolveします。
            return Promise.resolve({ file: file, workbook: workbook });
        });
});

// すべてのPromiseを実行します。
Promise.all(promises)
    .then(function (results) {
        // ファイル、シートID、ワークシート名をコンソールに出力します。
        results.forEach((x) => {
            let workbook = x.workbook;
            workbook.eachSheet((worksheet, sheetId) => {
                console.log(x.file + "," + sheetId + "," + worksheet.name);
            });
        });
    }).catch(function (err) {
        console.log(err);
    });

実行結果

f:id:wave1008:20170524012314p:plain

 

いい感じじゃないですか。

exceljsでExcelの処理がどこまでできるか興味あります。

 

オッサンが始めるAngular(その1):Hello World

Angular 2に入門しようと思ったらいつのまにかAngular 4になっていました。

時の流れは早いものです。

Angularのチュートリアルで勉強します。

 

エディタの用意

Angularをインストールするまえに、エディタをインストールします。エディタは好きなもの使えばいいですが、ここではVSCodeを使ってみます。

 

f:id:wave1008:20170511232028p:plain

f:id:wave1008:20170511232055p:plain

f:id:wave1008:20170511232102p:plain

f:id:wave1008:20170511232111p:plain

f:id:wave1008:20170511232118p:plain

f:id:wave1008:20170511232123p:plain

f:id:wave1008:20170511232127p:plain

f:id:wave1008:20170511232143p:plain

 

 

CLI QUICK START

AngularのチュートリアルCLI QUICK STARTをやってみます。

CLI Quickstart - ts - CLI-QUICKSTART

f:id:wave1008:20170511232859p:plain

 

【超手抜き翻訳】 

Angular CLIはAngularで開発する際に利用するコマンドラインインターフェースです。

このガイドの目的はAngular CLIを使用してTypeScriptで記述したAngularのアプリケーションをビルド・実行することです。

以下のステップで説明します。

  1. 開発環境のセットアップ
  2. プロジェクトとスケルトンアプリケーションの作成
  3. アプリケーションの実行
  4. アプリケーションの編集

 

Step1. 開発環境のセットアップ

Node.jsとnpmをインストールします。最低でもnode 6.9.x, npm 3.x.x を使用してください。

https://nodejs.org/en/download/

f:id:wave1008:20170511233618p:plain

 

f:id:wave1008:20170511233643p:plain

f:id:wave1008:20170511233650p:plain

f:id:wave1008:20170511233655p:plain

f:id:wave1008:20170511233659p:plain

f:id:wave1008:20170511233704p:plain

f:id:wave1008:20170511233708p:plain

 

 nodeとnpmのバージョンを確認。

f:id:wave1008:20170511233945p:plain

 

Angular CLIをグローバルにインストールしてください。

f:id:wave1008:20170511234249p:plain

 

f:id:wave1008:20170511234307p:plain

完了。

 

Step2. 新規プロジェクトの作成

ng newコマンドでプロジェクト(my-app)とスケルトンアプリケーションを作ります。

f:id:wave1008:20170511234449p:plain

 

しばらく待ちます。長い。

f:id:wave1008:20170511234613p:plain

 

 my-appの下にいろいろ生成されています。

f:id:wave1008:20170511234715p:plain

 

Step3. アプリケーションの実行

プロジェクトのディレクトリへ移動し、サーバーを起動しましょう。

ng serveコマンドでサーバーを起動します。

f:id:wave1008:20170511234838p:plain

 

ブラウザでアプリケーションが開きます。

f:id:wave1008:20170511234917p:plain

 

Step4. Angularのコンポーネントを編集する

my-app\src\app にapp.component.tsが生成されています。(中身はTypeScript)

f:id:wave1008:20170511235148p:plain

 

app.component.tsをVSCodeで開きます。

titleのテキストを'My First Angular App'書き換えます。

f:id:wave1008:20170511235225p:plain

 

保存すると、ng serveがファイルの変更を検出してリビルドが実行され、ページがリロードされます。

f:id:wave1008:20170511235341p:plain

 

同様に、app.component.cssを編集します。

f:id:wave1008:20170511235502p:plain

 

保存すると、ng serveがファイルの変更を検出してリビルドが実行され、ページがリロードされます。

f:id:wave1008:20170511235631p:plain

 

 

CLI QUICKSTARTは以上です。

 

 

 

 

ドキュメントのバージョン管理はSVNとGit、どっちがいいの?

SVNからGitへの移行を考えたんだけど…

10年ほど前にバージョン管理ソフトウェアとしてSVN(TortoiseSVN)を使い始めました。現在はドキュメントもソースコードもバージョン管理なしの世界には戻れないなと感じています。世の中的にGitが流行っているのは知ってたんだけど、職場でもGitに移行するって話は具体化しなかったし、いろいろ不便はあったけどSVNに慣れちゃってたんで、Gitの導入はしてませんでした。久しぶりに技術ブログを書くにあたって、サンプルコードを共有するならGitHubがいいかなーと思い、ようやく使い始めたところです。

なるほど、GitはオリジナルのリポジトリをローカルPCにコピー(クローン)して、ローカルで一旦コミットしてから、オリジナルにプッシュするという二段構えの構成になっている。個人の作業は成果物が完成するまでローカルで進めるので、マージの衝突頻度が緩和されるんですね。また、ローカルで履歴管理できるので、SVNで不満だった「作業中のものを適宜コミットして履歴管理に乗せたいけど、未完成のものをコミットすると他の開発者に迷惑をかける」って問題が解決されてます。SVNだと履歴管理したいなーってタイミングでパッチファイルを作って、SVNの一時フォルダにコミットすることで履歴管理の代用とするなんてダサいことをやってました。TFSだとシェルブ機能で一時保存できるらしいので、あれはあれで便利そうですけどね。

なんか、Gitいいかもって思ったので、ソースコード管理だけでなくTortoiseGit使ってドキュメント管理もSVNから移行しようかなってちょっと考えたんだけど、結論から言うと思い留まりました。GitはSVNと比較すると、ドキュメント管理に向いていないと思います。理由は以下。

 

個人的にGitでのドキュメント管理を避ける理由

  1. 空フォルダを作成できない
  2. ファイルをロックできない
  3. プッシュしないと中央のリポジトリに反映できない

 

1.空フォルダを作成できない

Gitは空のフォルダを作成することができません。理由は知りません。この制約を回避するために、なんでもいいからファイルを一つ置くということが必要です。一般には.gitkeepという名前の空ファイルを置くのがプラクティスなんだそうです。

ドキュメント管理するのに何で空フォルダを使いたいのかって?それは、プロジェクト開始時にドキュメントの保管場所としてフォルダ階層を一式登録し、そこに置くようにルール化したいからです。よくありますよね、こんなの。

  • 01.プロジェクト計画
  • 02.要求分析
  • 03.要件定義
  • 04.外部設計
  • ...

フォルダ階層の末端に.gitkeepなんてファイル置きたくないです。

 

2.ファイルをロックできない

SVNのファイルロック機能は、ファイルを読み取り専用にすることでロックされている状態を擬似的に実現しているだけの簡易なものですが、無いよりもマシです。企画書や報告書なんかを複数人で編集する際、ロックを取得してから(読み取り専用を書き込み可能にしてから)編集するというワークフローになっていると、編集者どうしが自然に協調して作業することができます。

一方、Gitにはロック機能がありません。そもそも分散型なので、排他機能を実現しようがありません。ドキュメント管理はSVNのような集中型が向いていると思います。

 

3.プッシュしないと中央のリポジトリに反映できない

これが一番問題な気がします。AさんとBさんが同じ報告書.pptxを編集していたとして、Aさんが編集した結果をBさんが取得しようと思ったら、Gitだと以下の手順になります。

  1. Aさんが報告書.pptxをコミット(ローカル)
  2. Aさんが報告書.pptxをプッシュ
  3. Bさんが報告書.pptxをプル

 

Gitのことをよく理解して使いこなしているエンジニアならともかく、ドキュメントを中心に仕事をしている人なら、コミットしたらそこで安心して、プッシュするのを忘れますよね。で、「企画書コミットしましたー」「プルしても落ちてこねえよ。ちゃんとプッシュしたのかよ」なんて会話が想像できますよね。

そもそも、テキストファイル以外のドキュメントはソースコードのようにはマージできないから、pptxとかxlsxとかの非テキストファイルはコミットとプッシュを二段階に分ける必要ないんですよね。コミットした時点で衝突がわかればそれでいい。集中型のSVNはそのような挙動なわけで、そこからあえて分散型のGitのフローに移行するメリットはないんじゃないかと思います。

 

以上のことから、ドキュメント管理はSVNのほうがいいと思うんです。サーバー管理がめんどくさいかもしれないけど、ドキュメントはSVNで、ソースコードはGitでやるのがよいと思われ。実践してないから知らんけど。

 

技術ブログ再び

数年のブランクを経て、久しぶりに技術ブログを書こうという気になってきたので、ぼちぼち始めます。といっても、サボっていたぶん世の中のトレンドにキャッチアップできていないところ多々有り。興味の対象もMSテクノロジーからすっかりオープン系に移ったところで、さしあたってはnodeとか、Angularとか、Seleniumなんかを掘り下げて行こうかなって思っています。