JavaScriptの配列の反復処理にfor..in文を使うとインデックスが文字列型になる

Facebook にシェア
Pocket

気づいたら元号が変わってました。アウトプットが大事と書かれている本を読んでインプットしながら、アウトプットしない日々を送っています。

先日、仕事で配列の探索をしようと、下記のような処理をしました(実際にはもう少し複雑です)。

やっていることは単純に、配列からある’バナナ’という文字列が入っているインデックスを取得し、インデックスが1だった場合に、コンソールに’バナナは2つ目です’と出力しているだけです(これぐらいならArray.prototype.indexOf() – JavaScript | MDNを使えよと思われそうですが、実際にはもう少しループの中で複雑なことをしていました)。

一見、普通に’バナナは2つ目です’と出力されるような気がしますが、何も出力されません。見つからなかったら、’バナナはみつかりませんでした’と出力されるはずですが、それすらでてきません。

おかしいなぁ。と思って試しに、「i === 1」を「i == 1」としてみると、なんと’バナナは2つ目です’と出力されました。もしかしてと思って、最後に「console.log(typeof pos)」といれると、stringと出力されました。

配列のインデックスを「arr[‘0’]」というように、数値の文字列型で取得できるのは知ってたのですが、for..inを配列で使うと、インデックスは文字列型になってしまうことは知りませんでした。まあ、確かにfor..inはあくまでオブジェクトのプロパティ名が代入される処理ですしね。

MDNを見ると、「注: for…in はインデックスの順序が重要となる 配列 の繰り返しには使うぺきではありません。」と書かれてました(参考:for…in – JavaScript | MDN)。普通のforループかforEachを使うのがよさそうです。

ただ、forループだといちいちlengthの指定が必要だし、forEachだと途中で抜けれなくて無駄な処理が多くなりそうなので、for…inにしました。ですが、もう少し調べてみると、Array​.prototype​.some()を使うと自分のやりたいことはできそうだと発覚。

Array​.prototype​.some()ってあまり使う機会ないと思って使ったことなかったんですけど、こういう使い方もあるなら結構いろいろ使いどころありそうです。

vue-cliでビルドした本番環境を、ルート以外で動かす

Facebook にシェア
Pocket

先日の記事、Vue.jsでmousedownとtouchstartのイベントを扱う | while(isプログラマ)で作成したプログラムなんですが、ビルドしたうえでvuejsフォルダをサーバに作ってアップして公開しようと思ったらうまく動きませんでした。

原因は単純に外部ファイルの指定が、「」とルートからの指定となっているため。開発環境はともかく、本番環境はこれだと困るということもあります。

そういう場合、プロジェクトのルートフォルダに、「vue.config.js」というファイルを作成して、下記のように設定。

これは、本番環境では/vuejs/を基点としたファイル構成にし、開発環境ではルートを基点とするファイル構成ととらえるという指定です(参考:Configuration Reference | Vue CLI)。こういうことでビルド時に外部ファイルの参照が、「」となり、うまく動かすことができました。

前回作成したプログラム:MousedownとTouchstart

Vue.jsでmousedownとtouchstartのイベントを扱う

Facebook にシェア
Pocket

(Vue.jsと書いたけど、そんなにVue.jsは関係ない)

業務でVue.jsを用いてウェブアプリを作っているのですが、そのアプリのうち、あるボタンをクリック(タップ)ではなく、触ったとき、つまりマウスのボタンを押し下げた時やタッチデバイスに触れた時にイベントが発生してほしいという要望を受けました。

それを聞いた瞬間、「Pointer Events」が使えると思いました。過去にここのブログでも紹介しています(現時点でIEのみ実装されてるPointer Eventsが超便利 | while(isプログラマ))。過去にはIEでしか実装されてなかったそろそろ他のブラウザでも実装されてるのではないかと思い、ためしにpointerdownで実装してみました(参考:pointerdown – Event reference | MDN)。試しにChromeで動かしてみると、想定通りに動きました! やったー!

と思ったのもつかの間、「できました!」と上司に伝えたところ、「iPhoneで動かないんだけど」とのこと。なんと、PointerEventsはSafariには実装されてませんでした(泣)。
参考:Pointer events:Can I use… Support tables for HTML5, CSS3, etc

仕方がないので、mousedownとtouchstartで書き直すことに。まあ、一つ記述が増えるだけだしいいか。多分、マウスボタンを押すとmousedown、タッチパネルでタッチするとtouchstartのイベントが発生するだろうしと思って、下記のような感じで書きました(イベント内にはconsole.logの記述しかしてませんが、実際には通信処理を行う記述でした)。

うんうん。確かに、マウスでもタッチパネルでも反応しますし、押すとボタンの色も変わってくれます。これでいいかと思って上司に報告。しちゃダメでした。「二回発生しているように思うんだけど」と……。いやいやそんな馬鹿な。実はタッチしたときに2か所で反応しちゃってるだけじゃないの? なんて思いましたが、試しにChromeのDeveloper Toolのエミュレータで見てみるとtouchstartもmousedownのイベントも発生しました(しかも、mousedownのイベントが発生しない時もある)。

調べてみると、確かにタッチデバイスでもマウスイベントが起こるものらしい。preventDefault()でデフォルトイベントをキャンセルするとmousedownは発生しないらしい(参考:TouchEvent と MouseEvent の両方をサポートする – ウェブデベロッパーガイド | MDN)。仕方がないので、Vue.jsのpreventイベント修飾子を使って実装することに。

この実装で何回か試してみて確かにイベントが一回しか実行されないようになりました。これで一安心。と思ったのもつかの間。「Androidだと押した感じがしないのだけど」と。いやいや、active疑似クラスでボタンの色は変えてるし……。と思って自分のAndroidで試してみるとタップしてもボタンの色が変わりませんでした……。preventDefault()を行うことで、active疑似クラスのスタイル指定が反応されなくなってしまったのでした。仕方がないので、自分でアクティブ化用のクラスを追加し、ポインターがはずれるとクラスを外すことに。

早く、PointerEventsが使えるようになってくれないだろうか。

2019/02/24追記:サーバにもアップしました。
MousedownとTouchstart

vue uiではじめる単一ファイルコンポーネントのVue.js

Facebook にシェア
Pocket

今年からVue.jsを使ったプロジェクトに関わるようになりました。前から気にはなっていたのですが、趣味で使う気にもなれず、ようやく触ることができました(自分が興味があった技術に触れることができる仕事というのもなかなかうれしいもんですね)。

Vue.js自体は、去年の11月にヘルプとしていった出向先で少し触れています。その時は、「何だこれ? 拡張子がvueで、同じファイルにHTMLとJavaScriptとたまにCSSが書いてあるぞ。Vue.jsってjQueryみたいなJavaScriptのライブラリじゃないのか?」なんて思ったのですが、今回のプロジェクトに配属になってそれが単一コンポーネントというものだと知りました(参考:単一ファイルコンポーネント — Vue.js)。

というわけで今回はその、Vue.jsの単一ファイルコンポーネントのプロジェクトを作成する方法を紹介。大概、コマンドラインで作成する方法が紹介されることが多いですが、今回はWebブラウザを使った作成方法について紹介します。

まずは、npmでVue CLI3というVue.jsの開発支援ツールをnpmでインストール(npmが無い人はNode.jsでインストールしてください)。

つづいて「vue ui」とコマンドをうちます。

そうすると、自動的にWebブラウザがたちあがって、下記のような画面が表示されます。日本語で書かれているので特に迷うことはないと思います(Vue.jsは本当、サポートページも日本語ページが存在して本当に便利です。ただ、Vue CLI 3のサイトは日本語ページが存在しないんですよね……)。

ここで「作成」ボタンを押し、プロジェクトを作成する新しいフォルダを作ります(この処理はいらないのですが、一応ここでフォルダも作れるという説明のために)。


フォルダができたら、「+ここに新しいプロジェクトを作成する」というボタンをクリックします。

下にある「次へ」ボタンをクリックします。スクリーンショットをとっていませんが、プロジェクトフォルダは「vue-test」としました。

プリセットを選択します。ここでは、あえて「デフォルトプリセット」を選びます(あえてと言ったのは、デフォルトだとVue RouterやVuexがインストールされないからです。後でこの二つについてもインストールします)。

そうすると、プロジェクトの作成が始まります。

「プロジェクトダッシュボード」という画面になると、プロジェクトが作成できています。

フォルダを見てみると、確かにファイルができていました(と、ここで気づいたのですが、vue-testフォルダの下にvue-testフォルダができてしまっているという。そりゃあ、設定のプロジェクトフォルダなんて名前につけたからそりゃそうなりますよね……)。

つづいて、左側のメニューの一番下にある「タスク」をクリックし、つづいてでてきたメニューの「serve」をクリックします。

「タスクの実行」というボタンがでてくるので、このボタンをクリックします。

そうすると、作成されたプロジェクトの開発用サーバ上で起動します。トップページは下記のようになっているはずです。

ところで今回、プロジェクトをデフォルトで作成してしまったので、Vue RouterやVuexが入っていませんので、vue uiを用いてインストールします。左のメニューから「プラグイン」を選択すると、上に「Vue Routerを追加」や「Vuexを追加」ボタンが表示されています。予想できると思いますが、このボタンをクリックすることで簡単にインストールできます。

インストールすると先ほどのトップページが下記のようになります。

URLに「/#/」とついて、さらに「Home|About」というリンクが表示されてますね。これが、Vue Routerの機能です。「About」のリンクをクリックすると、下記のようになりました。

Visual Studio Codeでプロジェクト内のsrcフォルダにあるmain.jsを見てみると、下記のようになっていました。このうち「router」がVue Routerの機能のことで、「store」がVuexの機能です。ちゃんとどちらも追加できたようです(ちなみに、Visual Studio Codeには、「Vetur」というvueファイル作成支援用の拡張機能を追加しています)。

ちなみに、vue uiの画面ですが、左下にある家のアイコンボタンを押すことでホーム画面に戻れます。

また、今回は新しくプロジェクトを作成しましたが、既存のプロジェクト(コマンドラインで作成したプロジェクト)を追加したい場合はインポート機能を使ってvue ui上で扱うこともできます。

というわけで、今年はVue.jsについていろいろ勉強していきたいと思います。

間違えてUiPathのコミュニティ版ではなくトライアル版をインストールしてしまった話

Facebook にシェア
Pocket

確か昨年の10月後半のことなのですが、職場の自分の端末に勉強用のためにUiPathのコミュニティ版をインストールしようと思ったら間違えてトライアル版をインストールしてしまい、しかもそのままトライアル版のシリアルNoでアクティベーションしてしまいました。

しばらくしてトライアル版をインストールしてしまったことに気づき、ディアクティベーションしようと思いました。が、なぜかトライアル版にディアクティベーションするために必要な「regutil.exe」というファイルが見当たらず。そのままコミュニティ版をインストールしても、すでにこの端末にはアクティベーションしているからコミュニティ版では使えませんというようなエラーがでて使えずという状態になりました。

とはいっても、体験版はインストールして60日は使えるのでまあいいかと思い、そのままトライアル版を使ってUiPathの勉強をしていました。実際にUiPathが必要になるのは、12月の客先常駐案件だったためです(ただしその後、11月に1か月間、客先の炎上案件にいってほしいと言われたので、実際使ったのは数日程度です)。

1月に自社に戻ってきたのですが、UiPath Studioを起動してみると、使用期限切れで使えず(そりゃそうだ)。特に何か問題があるわけではないのですが、12月に常駐案件でいっていたお客さんから何か問題があったらメールするかもしれないと言われ、上層部からも機会があればUiPathについて知見などを共有してほしいといわれており、できたら会社の自端末でもUiPath Studioを動くようにしておきたいとは思っていました。

というわけで、なんとかしてコミュニティ版をインストールできないかと思って調べてみると、カスタマーサポートを通じてディアクティベーションしてもらったという人がフォーラムにいました(トライアル版ライセンスをディアクティベートしたい – 日本 / フォーラム – UiPath Community Forum)。なので、カスタマーサポート | UiPath株式会社に連絡することに。内容はほとんど上記に書いたことそのまま、「体験版を間違えてインストールしちゃったのだけど、知見を共有してほしいといわれているのでコミュニティ版をインストールしたいのでそのやり方があれば教えてください」という感じです。

そしたら、UiPath用のカスタマーサービス用のURLなんてものが届きました。Zendeskというサービスを使っているようです。こんなサービスがあるんですね。日本語版もあるらしい。知らなかった。

次の日に「Community Editionのご利用に際しては、弊社ライセンスサーバー上での設定が必要となります。」とメールが届きました。そのためには、ご利用端末のデバイスID及びライセンスコードが必要になるとのことなので、Zendeskにログインしたうえで、デバイスID及びライセンスコードを書いて送信(カスタマーサポートページでデバイスIDとライセンスコードを書く必要はあったのだろうか……)。

そうすると、何やらむこうのサーバでディアクティベーションしてくれたようで、「Community Edition利用に必要な手続きが完了いたしました」とメールが届き、試しにコミュニティ版のUiPathを起動すると、エラーが出ず起動できました。

ちなみに、スタッフからのメールには、無料体験版の期間延長(30日分)も申請書を書くことでできると書いてありました(申請書の内容次第っぽいですが)。コミュニティ版の利用には、利用規約により利用できない場合があるので、その場合は無料体験版の延長を検討してほしいとのことです。利用規約の抜粋までしてもらえて、親切な対応でした(多分、こういうサポート対応はよくあるんだと思います)。

というわけで、トライアル版を間違えてインストールしてしまった場合は、カスタマーサービスに連絡する必要がありそうです。UiPathのスタッフからすると何の得にもならず、無駄に時間をつぶしてしまうだけのような気もしなくはないですが……。