Code for final

ふぁいなる向けのコード置き場です。すでにコードじゃないこともいっぱい。

TypeScriptは難しくない。JavaScriptをやったことあればTypeScriptでシステム開発はすぐできる。メリットだらけなのでやったほうがいい。

ついこないだまでTypeScriptでシステム開発をってやってみたいけど 新しく覚えるの大変だろうな、覚えること多いんだろうなーって思って JavaScriptに逃げていました。
でも、思いきって今回仕事でTypeScriptを使って、システムのリリースまで終わったいまでは 絶対JavaScriptより、TypeScriptがいいって思います。

あとで詳しく書いていますが、TypeScriptでシステム開発しようと思って未経験者しか集まらなくても、 JavaScriptをやったことあれば、以下の2つだけ伝えればTypeScriptでシステム開発できますし、メリットだらけなのでやったほうがいいです。
現に今回やったシステム開発(20名くらい)で誰一人TypeScriptやったことあるひとはいませんでしたが、TypeScriptで開発できたので実証済みです。

  • 型推論できるものは型は書かない。わからないひとはエラーになったら型を書くこと。
  • 変数はまずconstで宣言する。変更する必要があるものはlet。varは使用禁止。わからないひとはconstでエラーになったらletにする。

TypeScriptが何者かご存じない方は、以下を見てもらえればわかりますが、 TypeScriptで書いたコードはビルドすることでJavaScriptに変換され、ブラウザで実行されます。
Microsoftが開発したものなので将来的にも安心して使えますし、導入するときに顧客に説明するときもMicrosoftが作ったものと言えばすんなり通るでしょう。

ja.wikipedia.org

わたしがTypeScriptを誤解していた点、良いと思う点についてまとめたいと思います。

誤解していた点

覚えないといけないことが多そう

コードを書くという点でいえばぜんぜん覚えることないです。
より便利にコーディングするために知ってたほうがいいことはいくつかありますが。
TypeScriptはJavaScriptに型が追加になったものと認識で問題ないとわたしは思います。
その型もプリミティブ型(基本の型)でいえばstring, number, booleanくらいしかありません。あと使うのは自分で作ったクラスです。
あとは変数宣言にはvarを使わずconstを使うくらいですかね。 また、細かい点はコードが間違っているとエディタが警告してくれるので始める前に学習しなくても自然と身につきます。

型を書かないといけないので逆にコード量が増えて大変そう

TypeScriptは型が追加になるってことくらいは知っているひとは多いと思います。
C#やったことあるひとならわかると思いますが、型推論があるのでそんなに気にしなくていいです。
型推論がわからないひとは以下のコードを見てもらえばと思います。
型をつける、つけないの判断できないのではないかと不安に思うひともいると思いますが、 ご安心ください。 つけないといけない場合はビルドエラーになるのでわかります。VSCodeが赤線を引いてくれます。

const id = ""; // string型と推論できるので型の記載は不要です。
const id; // 初期値から型推論できないので型が必要です。ビルドエラーになります。

書いたコードを見直しましたが、型を書いてたのはメソッドの引数と戻り値の宣言と独自のクラスにキャストするときくらいでした。
メソッドの引数と戻り値(ある場合)は必ず書いたほうがいいです。それがTypeScriptのいいところですから。
その理由は後述します。

自分だけコーディングできてもチーム全員できないとチーム開発では使えないのでは?

今回のプロジェクトでは20名ほどコーダーがいましたが、 誰一人TypeScriptを使ったことあるひとがいませんでした。存在すらしらなかった人が多かったです。
ただ、JavaScriptをやったことあるといったひとでした。
このご時世、JavaScriptをやったことないひとは新人くらいだと思います。
JavaScriptさえ知っていればチーム開発でもTypeScriptは全然使えます。
以下の3点だけ説明すればOKだとわたしは思います。
実際、今回の開発もこれでうまくいきました。

  • 型推論できるものは型は書かない。わからないひとはエラーになったら型を書くこと。
  • 変数はまずconstで宣言する。変更する必要があるものはlet。varは使用禁止。わからないひとはconstでエラーになったらletにする。
  • エディタ上で赤い線が出ているところは必ず修正する。(当たり前ですけど守られていないことがありました)

守らないひとがいてバラバラになるのでは?と危惧されると思いますが、エディタの設定で矯正できますし、 最終的にビルドのときにエラーになるのでわかります。

ビルド(コンパイル)環境を構築するのがめんどそう

JavaScriptはビルドする必要がないので、手軽さという点ではJavaScriptよりは劣ると思っていました。
これがわたしが一番敬遠する理由でした。
コマンドでビルドする仕掛けをバッチ処理で作る必要があるのかと思っていました。
ただ、Vue CLIを使うことでまったくビルドしている感じなく、 JavaScript同様に使えるので杞憂だったということがわかりました。
今回はVueだったのでVue CLIでしたが、ほかの環境でもきっと同じだと思います。

ビルドしたものを動かすからデバッグができないのでは?

デバッグはtsファイルにブレークポイントをつけて普通にできますのでご安心を。
デバッグのテクニックは後日記事を書きたいと思います。

良い点

タイプミスに早期に気づける

これが一番の魅力だと思います。IDEが発展してきてインテリセンスなどで だいぶタイプミスによるバグを軽減することができるようになりましたが、 完全にゼロにすることはできません。
TypeScriptではビルド時にチェックはもちろん、VSCodeだとエディタ上で 赤い線で警告することもできるので効率よくコーディングできます。

const userid = "a";
// 宣言が見えないくらい間があいている
alert(user_id); // ビルドエラーになる。user_idという変数は宣言されていないため

想定と違う型の値が入ることがない

JavaScriptだと型がないのでどんな値でも入るので 間違って違う型の値が入ってる可能性があるかもと心配することがあるかもしれませんが、 TypeScriptでは型があるので型に当てはまらないものは入りません。
また、使う機会は局所的ですが、any型というなんでも入る型もあります。

let value = "0"; // 型推論で文字列型になる。
value = 1; // 数値型はいれることができない。

メソッドに渡しているものが間違っていると警告してくれる

メソッドの引数と戻り値には必ず型を定義しますので、 間違った型の変数を渡したら赤で警告がでるのでコーディングミスが事前に防げます。
JavaScriptだと動かしてエラーになるまで気づけません。

function main() {
  this.add(1)
}

function addPrefix(value: string) :string {
  return "prefix" + string;
}

変数が変わってないことを保証してくれる

TypeScriptでは変数をconstで宣言することをおすすめします。
constは一般的に定数で使うキーワードですが、TypeScriptでは 一度いれたらインスタンスを変更できない変数として使います。
変更しようとしたら警告してくれるので間違いに気づけます。
変数って意外と一回入れたら変更しないものです。
今回開発したコードを見直しましたが、ほとんどconstでいけてました。
letを使ってたのはループ内変数くらいですね。
ちなみにconstでarrayを宣言してpushしてもエラーにはなりません。
インスタンスを変更していないので。

const numbers = [];
numbers.push(1); // ○ エラーにはならない。インスタンスを変更していないから。
numbers = []; // ✕ エラーになる

for (let i = 0; i < array.length; i++) { 
  // forで回すときはletを使う
}

メソッドの処理でnullやundefifnedチェック処理が不要になる

JavaScriptだとundefinedやnullが入ってこないかチェックする必要があったりしますが、 TypeScriptではnullとundefinedを型として扱うことができるので、 チェックする必要がなくコードがスッキリします。(HTMLとの境界のメソッドでは一部例外もありますが) 誤っていれたらエディタで赤い線が出るのでわかりやすいです。
もちろんnullを使いたいときは使うこともできます。

const value = ""; // string
const value :string = null; // ビルドエラーになる
const value :string | null = null; // nullをいれることができる

map型がある

システム開発ではよくmap型を使います。
JavaScriptにはmap型がなく、代替としてobjectをmapとして使ったりしますが、 TypeScriptでは標準でmap型があるので非常に便利です。

const idMap = new Map<string, number>();
idMap.set("a", 1);
idMap.set("b", 2);
idMap.forEach((value, key)=>{
  console.log(value); // mapを回すことも可能
});

クラスが使える

クラスもシステム開発では必須といっていいと思います。
データを定義するのに使います。
特に継承をうまく使って共通化したりすれば、品質も生産性もあがります。

export default class Home extends Base {

}

というようにいいことしかないのでこれからWEBシステムを開発するひとがいたら JavaScriptではなく、ぜひTypeScriptで開発してほしいと思います。

UiPathでzipファイルを解凍する。

最近、RPAについて勉強しています。
UiPathを使ってzip解凍をしたくなって、試していたのですが、ちょっとだけはまったので記録しときます。

UiPathには便利なアクティビティ(部品)がたくさんありますが、圧縮ファイルを解凍するアクティビティはまだないみたいです。
アンオフィシャルなものならあるかもですが。

なので7-zipを使って解凍することにします。

www.7-zip.org

7-zipをインストールしてある前提とします。

プロセスを開始アクティビティを配置して、以下のように設定します。

f:id:finalstream:20190920105719p:plain

プロパティ
ファイル名   "C:\Program Files\7-Zip\7z.exe"
引数 "x -y -o""" + rootPath + """ -p" + zipPassword + " """ + item.ToString() + """"

rootPathは解凍先、zipPasswordはzipファイルのパスワード、itemは解凍するzipファイルの変数です。

ポイントとしては以下の3つですかね。

  • "(ダブルクォーテーション)はエスケープ("で囲む)が必要
  • オプションとオプション値の間にスペースは入れない
  • 引数全体を"で囲む

Windows 10のWindows Updateでエラーになるときは設定の「更新とセキュリティ」の中にある「トラブルシューティング」の「Windows Update」が有効です。

仕事とかでWindows10を使っていると、ときたまWindows Updateが失敗するマシンに遭遇します。

そのときはエラーコードで検索してネットに書いてある方法をいろいろと試すと思いますが、 Windows Updateに限っては特効薬があると思っています。

それはトラブルシューティングです。

ぼくはこれまで数々のトラブルでWindowsトラブルシューティングにすがってきましたが、 解決されたことは一度もありませんでした。
なのでトラブルシューティングはただの飾り程度に思っていましたが、 Windows Updateについては別です。

いままで何回か使ってきましたが、かなりの確率で修復されます。

設定の更新とセキュリティの中にトラブルシューティングがあり、その中のWindows Updateから実行します。

f:id:finalstream:20190906180625p:plain

トラブルシューティングの一番上にあるということはWindows Updateがトラブりやすい仕様なんでしょうね。

あくまでぼくの経験に基づくものなので治らなくてもクレームしないでくださいね。

SQL ServerでOracleみたいに@ファイル名でSQLを実行する方法。

SQL Serverで前々からOracleみたいに@sqlファイル名でSQLファイルを実行できないかと思っておりました。
以前簡単に調べたときは見つけられなかったのですが、今回またほしい機会があって調べたらありました!

以下のとおりにやればできました。同じようにお困りの方はお試しあれ。

1.SQLServer Management Studioで新しいクエリを開く

2.クエリメニューのSQLCMDモードを選択

3.クエリとして以下のように記述。:rをつけてスペースあけてファイル名を書く

:r c:\work\xxxx.sql
:r c:\work\xxxx2.sql
:r c:\work\xxxx3.sql

4.実行

Vue.jsを使った商用にも耐えれるフロントエンド開発環境を無償で手軽に整える手順。

最近、フロントエンドの共通処理方式を検討してくれと依頼されたため、前から気になっていたVue.jsを使ってみたかったこともあり、 思い切って提案したら普通に通りました。なので毎日Vue.js三昧です。楽しいです。
ただ、商用なシステムなので失敗は許されないので、いろいろと不安はありますが、いまのところうまく行ってます。

Vue.jsは単体で使用するとただのjsファイルなので、cdnとかで普通のhtmlに読み込めると使えるわけですが、 商用となるとフォルダ構成、ビルド環境、テスト環境とかどうしようか迷うわけです。
そしてチームで開発するため、その手順や運用が簡単じゃないとうまくいきません。
eclipseのテンプレートプロジェクトみたいなものがあればいいのに…と探すとありました!

ここではVue.jsを使った手軽な商用でも使える開発環境を構築する手順を記載します。
スペックにもよりますが、およそ30minくらいで構築が可能だと思います。 また、インストールなどの細かい手順はここでは記載していないのでググってください。

※今回の開発環境は期間が短く、また若手(スキルが低い)メンバーで開発をする必要があったもあって、 Nuxt.jsやVuexといった学習コストが高そうなものは採用しておりませんのでご了承ください。
その弊害でイベントの伝播で多少バケツリレーにはなりましたが、許容範囲だったと思います。

必要なソフトをいれる

必要となるソフトはまずはVisual Studio Code(VSCode)とNode.jsです。
以下からダウンロードしてそれぞれインストールします。

azure.microsoft.com

nodejs.org

Visual Studio Code拡張機能をいれる

VSCode拡張機能をアドオンして使うものなので、最低限必要と思うものだけ記載します。

marketplace.visualstudio.com

日本語で使いたいひとは必須です。

marketplace.visualstudio.com

Vue.jsをVSCodeで使うときは必須です。vueファイルに対応してくれます。

marketplace.visualstudio.com

デバッグするのに必須です。for Firefoxもあります。

marketplace.visualstudio.com

リアルタイムにコードの静的解析をしてくれるのであったほうが便利です。

marketplace.visualstudio.com

コードを整形してくれます。チームで開発するときはフォーマットがバラバラになるのであったほうが便利です。

上記は必須と思うものですが、ほかにも便利な拡張はあるかもなので必要に応じていれる。

VSCodeを起動してVue CLIをインストールして起動する

きど次にターミナルを開きます。ターミナルメニューから新しいターミナルを選択します。
ここで以下のコマンドを入力します。

npm install -g @vue/cli

次にVue UIを起動するため、以下のコマンドをたたきます。

vue ui

するとブラウザが起動し、Vue UIが起動します。
Vue.jsはie11でも動きますが、Vue UIはie11だと動かないので注意ください。

vueプロジェクトを作成する

Vue プロジェクトマネージャから作成を選択する。
任意の場所(c:\developなど)を決めて、ここに新しいプロくジェクトを作成するをクリック。
ここではプロジェクト名を「xxx」として作成することにするのでプロジェクトフォルダはxxxと入力します。

次のプリセットの選択は手動を選択します。

次の機能の有効化は以下のものを有効化します。
TypeScriptの有効化は強く推奨します。TypeScriptを使うことでコードをケアレスミスを防げますし、何よりシンプルに書けます。
最後に書いてますが、TypeScriptからJavaScriptへのコンパイルはビルド時に勝手に行われるため気にしなくてもいいです。
私が行った今回のプロジェクトではVuexは学習コストが高くなるため、見送ったので選択していませんが必要に応じて有効化してください。

  • Babel
  • TypeScript
  • Router
  • Linter / Formatter
  • Unit Testing
  • E2E Testing

次の画面でselectのところを以下のように選択します。 Cypressは企業のプロキシで弾かれる場合がありますので、その場合はNightwatchを選択してください。

Pick a linter : ESLint + Prettier

Pick a unit testing solution : Jest

Pick a E2E testing solution : Cypress or Nightwatch

すべて選択したらプロジェクトを作成するをクリック。 必要なファイルをダウンロードするのでそれなりに時間がかかります。
VSCodeのターミナルを見れば動いているので進捗がわかります。
終わったら以下のような画面が表示されます。

f:id:finalstream:20190428142904p:plain

サーバを起動する

上記の画面で、左側のメニューの一番下のタスクを選択します。
表示された一覧の一番上にある「serve」を選択し、タスクの実行をクリック。 するとビルドが始まります。下のところに緑のチェックマークが出るまで待ちます。

f:id:finalstream:20190428143926p:plain

アプリを開くをたたけばブラウザが起動し、サンプル画面が表示されます。

f:id:finalstream:20190428153513p:plain

ソースコードを確認する

VSCodeでプロジェクトフォルダ(xxxの場所)を開くとソースが種類ごとにフォルダに分かれて配置されています。 商用だとプロジェクトの構成は重要になると思いますので、このようにサンプルファイルが予め入っていてそれを 参考に配置すればいい感じになるのはとても便利です。

srcの下にcomponentsとviewsがあります。 componentsには共通部品を、viewsには画面のソースをいれます。
画面ごとにフォルダをきってもいいと思います。

f:id:finalstream:20190428160154p:plain

最後に

Vue.js(Vue CLI)のいいところは、簡単にオールインワンで最新の開発環境を構築できるというところだと思います。
TypeScriptといえばjsにコンパイルする環境を構築するのを勉強しなくてはいけないと思っていて 躊躇していた人もVue CLIでビルドをすれば勝手にjsに変換したものをビルドしてくれるし、 VSCode修正したtsファイルも何もせずにリアルタイムにブラウザに反映される。
さらに何もしなくてもデフォルトで今流行りのWebpackでビルドされるので、依存関係を気にせず開発でき、通信量削減にも繋がります。

これでひとまず開発環境は整いました。
あとは開発する上で気をつけることやハマったところを記事にしていきたいと思います。

Windowsのネットワークと共有センターのトラブルシューティングでも復帰しない場合に、ネットワークを初期化するコマンドを実行したら直った話。

先日、会社で使用していたPCが突然、ネットワークに繋がらなくなりました。
前日まで使えてたので設定が悪いわけでもありません。
そして周りの席のメンバーは普通に使えているのでネットワーク障害でもないです。

ネットワークトラブルのときよくやるのが、ネットワークと共有センターのトラブルシューティングですが、 それでも問題を特定できないと言われる。
顧客から借りているPCなので使えないと仕事にならないし、交換を依頼してもすぐもらえるかわからないし、 何よりレビューをする必要があるものがたまっている。
詰んだ。。

とりあえず状況を確認した。

設定を確認した

設定が飛んだ可能性を疑って、ipconfigをたたいたらipアドレスdnsが表示されたので設定は問題なかった。

ケーブルを交換した

隣のメンバーのケーブルを借りてやってみるもつながらず。

IPアドレスを交換した

さらに隣のメンバーのIPを借りてやってみるもつながらず。

バイスマネージャからネットワークドライバを削除して再インストールした

設定が消えて再設定するはめになったが、つながらず。

隣のメンバーの端末にpingを飛ばした

宛先ホストに到達できませんというエラーで到達できず。

デフォルトゲートウェイpingを飛ばした

宛先ホストに到達できませんというエラーで到達できず。

ここでデフォルトゲートウェイpingを飛ばした結果を見て気づきました。
pingコマンドの最後に表示される損失が正常なら0%ですが、25%だったり、50%だったり 実行するたびに変わってました。
こんな現象ははじめてでした。

藁をもすがる想いで事象に関連しそうなものをググったがピンポイントな 解決方法は見つからず。 海外のページにネットワークの初期化コマンドを実行すればよいと書いてあるようなところがあったので コマンドをひたすら実行してみた。
するとつながった。

最終的に成功したのは以下の手順です。

1. ネットワークを初期する以下のコマンドを2つ連続して実行する。

>netsh interface ip reset c:\reset.log
>netsh winsock reset

どちらも今まで使ったことが無いコマンドですが、ネットワークの設定をリセットしてくれるみたいです。
片方のコマンドだけではだめだったので注意。

2.再起動してipアドレスを設定し直す。

再起動後、ipアドレスの設定が消えている(dnsは残ってました)ので再設定するとなんと繋がりました。

というわけで、原因は全く不明ですが、ネットワークの復旧ができました!

デフォルトゲートウェイpingを飛ばしたとき、謎の損失が確認できるときは ひょっとしたらこの手順で解消できるかもです。 お試しください。

Chromeを更新したら新しいタブのよく使うサイトのサムネイルが表示されなくなったのを復活する方法。

先日、Chromeが自動更新されてUIが変わりました。
それは別によかったんですが、新しいタブのよく使うサイトがアイコン表示に変わってしまいました。
最初はあんまり関係ないかと思って使っていたのですが、意外とサムネイルがないと不便ということが。。
無意識的にたぶん文字を読まずに視覚的に判断してたんですね。

で、復活させる方法がないか、海外のサイトを探しまくったところありました。
以下の4つの操作を行うことで復活可能なので困っている方はお試しください。

アドレスバーに「chrome://flags」をいれてEnterキー

設定画面に飛びます。

検索ボックスに「Enable using the Google local NTP」を入れてEnabledに変更

なぜNTPが?とおもったらNew Tab Pageのことっぽいですね。
Default→Enabledにします。

f:id:finalstream:20180922094715p:plain

検索ボックスに「New Tab Page Material Design Icons」を入れてDisabledに変更

こっちだけでいけると思ったけどNTPのほうも変更する必要があります。
Default→Disabledにします。

f:id:finalstream:20180922094839p:plain

Chromeを再起動

特に設定を保存するボタンとかはないのでそのまま再起動で問題ないです。
右下に現れる「RELAUNCH NOW」ボタンをクリックで再起動されます。

これで復活したと思います。