神戸ITフェスティバル2016に行ってきた


神戸ITフェスティバル2016:11.25(金)〜26(土)デザイン・クリエイティブセンター神戸(KIITO)

今年は転職したばかりで有給がないうえに、忙しかったので土曜日のみ(土曜日も行こうか迷ったぐらい忙しい。今日も仕事いってたので、ここのところゆっくりと休めてない)。

最近は毎年そうだけど、特に今年はウェアラブルに力をいれていたように感じた(それと、攻殻機動隊とのコラボ。ただ、自分は攻殻機動隊を見たことがないのでよく分からない)。特に、ウェアラブル関連では、例年と比べてやけに大企業の出展が多かった気がする。富士通に日本電気にエプソンにリコー。シャープが中小企業に見えるぐらい(いや、今は実際に中小企業だったっけ。東証二部だし)。

ただ、これは自分のコミュ力のなさが悪いのだけど、どうやって展示を見て回ったらいいかいまだによく分からない。興味があってもなかなか展示へ近づくことができないし、空き時間に展示会場の回りをぶらぶらするのだけど、なぜか一歩が踏み出せない。自分の場合、ビジネスの客になるような存在でもないし、「何か興味があるんですか?」なんて聞かれてもいい回答が思いつかない。多分、そんな気後れする必要なんてないんだろうけど。客観的に見てみると、もしかして自分は変な人に見えるんじゃないかといろいろ考えてしまった。

ただ、ちょうどうちの会社がドローンで何かやりたいと言っていたので、ドローンの展示をしているところについては理由をつけられるということで気楽にいくことができた(他も行ったけど、特別な理由がないため、ちょっと勇気がいる)。実際、「ドローンを買ったのはいいものの、どうビジネスにするか考えて無くて……」と伝えると、そういう会社が多いとのことだ。名刺もらったのだけど、自分も渡したほうがよかっただろうか。まあ、むこうにはメリットがあるわけじゃないしいいか。

他には、例年とくらべるとやけに子どもが多い気がした。どうも、子供向けのプログラミング講座にも力をいれていたよう。やっぱり、最近の子どもにはプログラミング教室が人気なのか。日本の将来を担っていく人材になってくれるといいな。

多いといえば、女装しているスタッフも多かった印象。ただ、アニメのキャラクターのコスプレっぽい感じならまだいいのだけど、普通に女の子の私服を着こなしていた人、というよりさくらインターネットの江草陽太さんにはちょっと動揺してしまった。セミナーのはじめに自己紹介があったけど、格好については何の説明もなく普通に進行(服装以外は普通に男性です)。さくらインターネットの執行役員だそうで、調べてみるとどの記事でも女性らしい格好をしていた。
ASCII.jp:小笠原、江草、山口の3人が語った「さくらのIoT」の軌跡と奇跡 (1/3)|さくらの熱量チャレンジ
「さくらのIoT Platform」は“データを迎えに行く”プラットフォーム – INTERNET Watch
ASCII.jp:賃貸物件のカギがスマートロックになると、何が起こる? 開発企業を独占取材
まあ、最近はダイバーシティという考えが浸透しているし、そういう人がいるのも不思議ではないのかもしれない。セミナー終了後は普通に名刺交換をお願いされていたし、むしろ、動揺していた自分が異端なのかも。さくらインターネットの株持ってるけど、この感じならしばらく売らなくてよさそうかも。

セミナーもいくつか参加してきました。参加したのは、『デザイナーが考えるウェアラブル』『人工知能対話サービスの今と3歩先の未来』『ITによる他分野連携が加速する最新技術』『モノをネットワークでつなぐサービスの開発』の4つ。なぜかわからないけど、昔と比べて聞きたい質問というのが思いつかなくなってきてる気がする。だいたい今までなら、セミナー2つ参加したら、一つぐらいは質疑応答時間に質問したいことがあったり、実際に質問することもあったけど、今回は全く質問自体思い浮かばなかった。うまい質問ができるようになりたい。

ところで、自分は視力が悪く、メガネをかけているけど多分、0.5ぐらいじゃないかと思う(ただし、運転用には別にある)。最近また見えづらくなってきたような気がするのだけど、それはともかく、そういうこともあって前の方の席で聞くようにしている。それはいいのだけど、先程、自分が参加したセミナーについて調べてみると、自分の後ろ姿の写っている写真をいくつか見かけてしまった。しかも、後ろ姿を見ただけでダサい格好というのがよく分かる。今度からもう少し後ろに座ろうかな……(そろそろ、普段用のメガネも度が高いのに変えるか)。

なお、来年は別のイベントと合同で、『078』という枠組みのなかで神戸ITフェスティバルを開催するそう(参考:音楽・映画・IT・食のイベント『078』、COMIN’KOBEとタイアップして2017年5月6日・7日に神戸で開催。イベントロゴも募集 | UROROS)。時期はゴールデンウィーク(11月にはやらないということだろうか?)。ゴールデンウィークってどうなんだろう。一応、ビジネス的な意味合いもあるイベントだと思うのだけど、集まるのかな? 子どもは確かに多そうな気がする。多分、暇だろうし、来年もいこうかな。

Visual Studio CodeのEmmetでlang=”en”をlang=”ja”にする方法


最近はHTMLやJavaScriptのコードを書くときには、Visual Studio Codeというエディタを利用しています(自分の利用している環境は、Windowsのv1.6.1です)。

前はBracketsを利用していたのですが、Visual Studio Codeのほうが軽くて多機能な感じがするので、気に入っています。

そのVisual Studio Codeに標準でついているのが、Emmetという機能。短縮記法でHTMLを書くことができ、例えば、『ul>li*4』と入力してタブキーを押すと、下記のようなHTMLが出力されます。

そんな中でも基本的なのは、『html:5』もしくは『!』(多分、こっちのほうがよく使う)を書いた後にタブキーを押して出力される、HTMLの基本的なテンプレート。簡単なサンプルページ的なものを作るときはまずこの記法を使うことが多いのですが、一つ問題があって、デフォルトでは下記のようにlang属性がenとなってしまっています。

これをjaにしたいと思って調べてみたら、snippets.jsonというファイルを編集したらいいということが分かりました(参考:Visual Studio Code for Windows、HTML ファイルで使う Emmet のスニペットを変更する – Browser)。ただ、ここに書いてあるフォルダが自分の環境には無く、いろいろ探してみるとVisual Studio Codeをインストールしたフォルダ内にありました。

C:\Program Files (x86)\Microsoft VS Code\resources\app\node_modules\emmet\lib\snippets.json

多分、32ビット環境なら、『Program Files (x86)』ではなく、『Proguram Files』フォルダの下にあると思います。

このファイルを編集すれば、lang=”en”から、lang=”ja”に変更できます。ただし、場合によってはこの場所にあるファイルは編集できなくなっていると思うので、ファイルを右クリックしてプロパティを選び、セキュリティからUsersの変更権限を与えて起きましょう(フルコントロールでもいいと思います)。

開くと、3行目に”lang”というキーに”en”という値が設定されています。予想できる通り、ここの”en”の値を”ja”にすれば、lang=”en”が、lang=”ja”に置き換わります(ついでにその下の”locale”の値も”en-US”から”ja-JP”にしといてもいいかもしれません)。

と、ここまで書いてVisual Studio Codeが更新を促してきたので更新したら、このファイルまで更新されちゃいました……(なので、lang=”en”に戻る)。

Emmetの機能ではないですが、Visual Studio Codeの機能として提供されているユーザー定義スニペットを用いて、追加しなきゃいけないのかもしれません(参考:Visual Studio Code for Mac ユーザー独自のスニペット定義(Emmet編) – Qiita

日本語環境だと、メニューの『ファイル』→『基本設定』→『ユーザースニペット」→HTMLと入力してエンターキーを押すことで、スニペットの設定ファイルが開きます。そこに全体を囲む波括弧({})の中に、下記のようにスニペットの設定を追加します。

こうすると、prefixの値に指定している『html』と入力した後にタブキーを押すと、lang属性がjaとなっているテンプレート文字列が出力されました(残念ながら、『!』ではダメでした)。

ただやっぱり、Visual Studio Codeを更新してもsnippets.jsonの内容を保持する方法があればそれが一番いいと思います。もし、やり方を知っているかたがいたら教えてください。

JavaScriptで日時の加減算を行う


またもや、改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用までから。

JavaScriptの日時処理は少し面倒だという印象があります。上で紹介した本を読んでも、ES2015でもそれは変わってないらしく、例えばフォーマットによる日時を付与した関数なんてものも用意されてないらしいです。

その点ではMoment.jsというライブラリ(参考:Moment.jsを使う – Qiita)がよさげではあるのですが、今回は素のJavaScriptを使った加減算について。

というのもやり方は簡単で、DateオブジェクトのgetXxxxxメソッドとsetXxxxxメソッドを使えばいいだけだそう。実は、本をよむまで、getとつくメソッドがあるのは知ってたけど、setとつくメソッドがあるのは知らなかった。

使い方としては以下。

見て分かるように、月をまたいでもちゃんと計算される(それにしてもなぜ、月だけ0始まりにしたのだろうか。最初間違えて、『new Date(2016,11,6,22,30);』として12月6日になって混乱した)。

これを応用したら、指定の日付の月末日を取得することができる。

ちなみに、setXxxxメソッドの戻り値は、Dateオブジェクトではなくて1970 年 1 月 1 日 00:00:00 からのミリ秒数。Dateオブジェクトだったらメソッドチェーンが利用できたので少し面倒。まあ、目的は変更後の日付を返すのではなく、自分自身の日付を変更するということだから仕方ないか。

まあ、やろうと思えば下記のようにできなくはない。

いや、これはメソッドチェーンとは言わないか。

というよりよくよく考えたら、Dateオブジェクトを新しく生成すればいいだけでした(調べて気づいた)。

なお、日付通しの計算については、getTimeメソッドを利用して数値化したうえで、1単位をミリ秒数で表した数で割らなきゃいけないそうです。

なんで標準でこれぐらいの計算が簡単にできるメソッドが用意されていないのだろうか……。ES2015では追加されるんじゃないかと期待していたのだけど……。

JavaScriptで、できるかぎり小数演算の誤差を少なくする方法


JavaScriptにかぎらず、プログラミングでの小数を含む演算では誤差が発生してしまうことがよくあります。例えば、『0.2+0.1』という単純な足し算すら、『0.30000000000000004』という結果になってしまいます(Chromeで確認した場合)。その対応方法が改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用までに書いてあったのでメモしておきます。

対応方法といっても単純なことで、ようは小数をいったん小数の長さ分の10の累乗を掛けて整数にしてから演算し、それから10の累乗分した数を割って正しい値を取得するというもの。最後の10の累乗で割るときに誤差が発生してしまうのではないかと思いそうですが、割られる方の数が整数であれば誤差は発生しないようです(例えば、『12.35/10』の結果は『1.2349999999999999』となるけど、『1235/1000』の結果は『1.235』となる)。

というわけで、小数の演算に対応した関数を書いてみました。

足し算、引き算、掛け算、割り算の4つの関数がありますが、上半分はすべて同じです。本来ならこの部分は共通化しておいたほうがいいでしょうね。エラー処理は余計だったかもしれません(この処理がなくても、どのみち例外エラーが発生するのだし、throwで返すのではなく、0やnullを返すとかでもいいかも)。

エラー処理はまず引数が数値かどうかチェックし、その後に指数表記かどうかを調べています。

実行した結果は下記のとおりです(『//=>』より右側が実行結果)。

ところで今回、小数って英語でなんていうんだけと思って調べて、英語でdecimalということを初めて知りました。decimalというと、10進数というイメージがあるのだけど、小数という意味もあったのかと。どっちの意味で使ってるか分かりづらいことってないのだろうか。

JavaScriptでローカル変数と同じ名前のグローバル変数を呼び出す方法(環境問わず)


今回も改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用までで知ったことから。

昔も似たようなタイトルで投稿したことあるのですが(JavaScriptでローカル変数と同じ名前のグローバル変数を呼び出す方法 | while(isプログラマ))、これはフロントエンド(ウェブブラウザ)限定の方法。グローバル変数はWindowオブジェクトに属しているから、windowオブジェクトのプロパティとして呼び出せばいいという話でした。今回は環境を問わず、例えばnode.jsでも通じる話。

その前に、JavaScriptでの関数の指定方法は4つあります。

1つ目は下記のようにfunction命令で定義する方法。

2つ目は下記のようにFunctionオブジェクトのコンストラクターを経由して定義する方法。

3つ目は下記のように関数リテラルで定義する方法

4つ目はES2015で追加されたアロー関数で定義する方法

どれも、『func(123)』とするとコンソールに『123』と出力されますが、実はそれぞれ微妙に違うそうです。例えば、function命令は静的な構造で定義より上で呼び出す記述があっても実行されるのに対し、関数リテラルやFunctionコンストラクターは実行時に評価されるので、定義より上で呼び出す記述があればエラーとなる等。

で、今回その違いで初めて知ったのが、Functionコンストラクターで定義した関数内の変数は、定義したスコープ内に同じ変数名があったとしてもグローバル変数を参照するということ。Functionコンストラクターなんて普段使わないから知りませんでした。

というわけで、以下サンプル。

2つ目の即時関数で、globalFuncやglobalAppleを用意して、それぞれFunctionコンストラクターで定義した即時関数からfunc関数とapple変数を取得しています。この結果は、同じスコープ内にappleという変数とfuncという関数があるにも関わらず、『global:10』となりました。つまり、グローバル変数を取得しているわけです。

まあ、現在のスコープ内に定義されている変数名と同じ名前のグローバル変数を取得することなんてそうそうないとは思いますが、Functionコンストラクターで定義した関数の中の変数はグローバル変数を参照するということは覚えておいたほうがいいかもしれません。「スコープ内で同じ名前の変数が存在してるのに、何でエラーになるんだろう?」となりかねません(もちろん、エラーになる理由はグローバル変数に同名の変数がないから)。

まあでも、最初に紹介した本にも書いてありましたが、Functionコンストラクターでの関数宣言は利用しないほうがいいと思います。分かりづらいです。文字列変数を利用して生成できるというメリットはあるかもしれませんが、その変数が外部から参照している値を利用していたらセキュリティ的に問題になる可能性があります。