カテゴリーアーカイブ 言語

著者:村上

【JavaScript】「The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype」エラーの対処法

長いタイトルですみません…。
現在開発中のシステムで導入している ESLint という検証ツールで、タイトルにあるエラーが発生したので、対処法をまとめ。
エラー文は「The body of a for-in should be wrapped in an if statement to filter unwanted properties from the prototype.」というもので、翻訳したところ「for-inの本体は、プロトタイプから不要なプロパティをフィルタリングするためにif文でラップする必要があります。」とのことでした。
…いまいち意味が分からない…。

今回参考にさせていただいた記事はこちら。

JSLintオプション考察「unfiltered for in」｜もっこりJavaScript｜ANALOGIC（アナロジック）
http://analogic.jp/jslint-options-forin/

上の記事によると、for-in ループを使用したときに列挙されるプロパティには、実際のデータ以外にも、プロトタイプ連鎖から来たプロパティも含まれるとのことでした。
そのため、取得したデータがオブジェクト自身が持つプロパティなのか、プロトタイプ連鎖から来たプロパティなのかを判断する必要があります。
で、それは hasOwnProperty() を使うことで判断できるとのこと。

使い方は下記のとおりです。

const list = ['A', 'B', 'C', 'D', 'E'];
for (data in list) {
    if (list.hasOwnProperty(data)) {
        // 実行したい処理
    }
}

3行目で、データの判別を行っています。
こちらを追加したところ、エラーが解消され、問題なく実行できました。

以上、JavaScript の for-in 文で発生したエラーの対処方法でした。
なおこの後、実装しているコードでは for-in よりも forEach の方が向いているとわかり、上記は使用しないように修正しました…。
が、うっかりと再発させそうなエラーだったので、備忘録としてまとめました。
もし、同じことでお困りの方は参考にしていただければと思います。

著者:杉浦

Leaflet関連のライブラリを用いる際たまに起こるライブラリのバグ

Leaflet – a JavaScript library for interactive maps
　LeafletはJavaScript上で地図を描画、操作できる様にするライブラリです。地図の需要は多くLeafletを拡張するライブラリもまた多くあります。紹介するのはこのLeafletに何かを付け足すようなライブラリにありがちなバグです。
　Leaflet関連のライブラリはLeafletに様々なものを載せます。例えばフルスクリーン化、google map、ミニマップ、サイドバー。重要なのはこれらのいずれもまずLeafletありきだということです。このためライブラリの中には単独で動くようにライブラリ内でLeafletを読み込んでくれるものがいます。これ自体はありがたいしそのライブラリ単独ではむしろ良いことです。ですがこの動作を既にLeafletが読み込まれているにも関わらず行った場合、問題が起きます。既に読み込まれていたLeafletを壊すことがあるのです。このLeafletを壊すような問答無用な読み込み動作を行うライブラリが稀にあります。
　Leaflet読み込み動作付きライブラリと他のライブラリを混ぜ合わせて使うと、他のライブラリを上書きして、存在するはずの関数が存在しない、引数の型が期待したものと異なるといった混乱が引き起こされバグが発生します。対処法はライブラリの中を見て

import L from 'leaflet'

の様な変数Lにleafletを出力している様な記述があるかチェックして消し、プロジェクト内に移動しパスを変更するだけです。
　ライブラリの中をいじること自体はバージョン管理が面倒になるアンチパターンもいい所なのであまり褒められたやり方ではありませんが、幸いLeaflet拡張機能系統のライブラリは小さなものが多く個人でもすぐに読み解け管理できます。

著者:村上

【React】エンターキーが押されたことを検知する方法

チャット画面を作成していたとき、エンターキーでテキスト入力エリアに入力したテキストを送信するという処理を行いたかったので、その方法について。
React と書いていますが、恐らく通常の JavaScript でも扱えるはず。

今回参考にさせていただいた記事はこちらから。

Reactでエンターキーのイベントを取得する方法 – 1日1%成長するブログ
http://masarufuruya.hatenadiary.jp/entry/2017/09/06/200551

さて、実装方法ですが、キー入力されたことは onKeyDown イベントで検知します。

<input type='text' onKeyDown={(e) => this.handleKeyDown(e)} />

上記は、なにかしらのキーが押された場合、その都度 handleKeyDown 関数が呼び出されます。

で、handleKeyDown 関数の中身は下記のとおりです。

handleKeyDown(e) {
  if (e.keyCode === 13) {
    // エンターキーが押された時の処理
  }
}

エンターキーは keyCode では 13 という数字が割り振られているとのことだったので、keyCode の値を見て判断します。
あとは、この if 文の中で、テキストを送信した際に行いたい処理を実行すればOKです。
非常に簡単でした！

以上、エンターキーが押されたかどうかを検知する方法でした。
なお、Androidの実機と iOS の Simulator でも動作確認を行いましたが、問題なく動作しました。
実行ボタンが無くなると、やはりレイアウトがすっきりする気がします。
是非、ご参考にしていただければと思います。

著者:asaba

【react】render内で’===’を使うとなぜか文字列に変換される

reactのrender内では三項演算子がうまく働かない時があるんですが原因はなんなのでしょうか。

例えば

</pre>
const number = 1;

const shelter = number === 1 ? 'number' : 'ather';
<pre>

三項演算子はこのように定義するのですが、ここでは通常ならばnumber変数の中身は1なので変数shelterには’number’が入ります。

ですが、これをrender()内で実行すると、なぜかatherさんが格納されてしまうという事態に！

render()はstateが呼ばれるたびに更新するので、その時に変数も更新されてundefinedになっているのではと思ったのですがどちらの変数に

もしっかりと1が入っている（どういうこと！？）しかも文字列ではなくて普通に数値なんですがそれは・・・。

だとしたらもう怪しいのはお前しかいない、===！とりあえず特定をしたくてこれと==を比較して使ってみたのですが

見事にそれぞれ文字列と数値を吐き出していました。

てな訳で原因が分かったところで結局=を一つ減らして再render()して力ずくで解決させてしまいました。

そもそも数値で定義しているのになぜ文字列に解釈されているのかが分からないのですが。reactには勝手に値を変換するプラグインとかも

入れていないしjavascriptに型推論なんて存在しないしデフォルトの状態でこれならもう’===’を使うのを躊躇してしまいますw

ここは素直に’==’を使いましょうということでしょうか・・・

とりあえずrender()内で値を扱う時は値の型に気を配ってコーディングしなさいという戒めだと思って肝に銘じておきます。