カテゴリーアーカイブ JavaScript

村上 著者:村上

【JavaScript】IEでの「’)’がありません」エラーの原因と対処法

後輩のコードを見ていて発見した Internet Explorer 固有のバグです。
今回遭遇するまで、こんな現象が起きることを知らなかったので、備忘録も兼ねています。

で、コードはこちら。

function checkStr( message = "" ){
    if( message != "" ){
        // 処理
    }
}

一見何の問題もなさそうですし、Google Chrome や Microsoft Edge では問題なく動作しました。
が、どうしてもIEではダメで、「‘)’がありません」というエラーが表示されました。

 

で、対処法ですが、そもそもの原因は関数の引数にデフォルト値を指定したことが原因のようでした。
IEではJavaScriptの関数での引数のデフォルト値の設定には対応していないようですね。
そのため、引数の「message = “”」を 単に「message」に修正すれば問題なく動作しました。

修正後のコードは下記のとおりです。

function checkStr( message ){
    if( message != "" ){
        // 処理
    }
}

1行目の関数の引数のデフォルト値を指定しないように修正しました。

 

以上、IEでの関数エラーの対処法でした。
最初はエラー文を鵜呑みにしてカッコの数があっているかを確認していましたが、原因は全く違いましたね。
たまにこういった見当はずれのエラー文があったりするので、デバッグ作業は難しいです。
今回は思い付きで関数の引数を消してみたら解決したので良かったですね。
同じことでお悩みの方は、是非参考にしてください。

  • この記事いいね! (0)
著者:杉浦

javascriptの一時的な関数、即時関数

 javascriptには即時関数という機能があります。

即時関数 (IIFE; Immediately Invoked Function Expressions) は、関数がブラウザーのコンパイラーに読み込まれた直後に呼び出される関数です。IIFE は、関数宣言の末尾に追加の括弧 “()” があるかどうかで識別できます。

 Function (関数) – 用語集 | MDNより引用。
 書き方は

(function(){/*処理本文*/}(引数));
(function(){/*処理本文*/})(引数);

です。どちらでも問題ありません。即時関数と名付けられていますが、動作からは一時的な関数とも言えます。即時関数は

  • 関数のインスタンスを作る
  • その関数を実行する
  • その関数を捨てる(ステートメントの実行を終了したあとはもう参照しないので)
  • Bear Bibeault; John Resig. JavaScript Ninjaの極意 (Kindle の位置No.2730-2732). . Kindle 版. より引用。
    ということを行います。
     即時関数が用いられる主な目的はスコープの制御です。スコープは変数名の参照範囲のことです。変数名ごとにスコープが定められており、スコープの範囲内ならば変数を呼び出し、書き換えることができ、範囲外ならば呼び出せず、書き換えられないといった具合です。
     即時関数内で宣言された変数は宣言された即時関数内のみがスコープになります。このため、あるコードを即時変数として記述したならば既存のコードの変数名を考慮することなくそのコードを既存のコードに継ぎ足せます。特に即時関数に出番があるのは、任意のページに好き勝手スクリプトを追加する目的であるブックマークレットや変数名の衝突が容易に予想できる圧縮される予定のコードなんかです。

    • この記事いいね! (0)
    村上 著者:村上

    【PHP】正規表現をチェックできる「正規表現チェッカーPHP: preg_match() / JavaScript: match()」【JavaScript】

    今回は、正規表現を扱うときによく利用するサイトを紹介。
    といっても、知ってる人も多いかと思います。

    正規表現チェッカー PHP: preg_match() / JavaScript: match()
    http://okumocchi.jp/php/re.php

    正規表現が正しいかどうかをチェックしてくれるサイトです。
    他にもいくつかありますが、私はもっぱらこのサイトを使っています。
    検索結果の一番上に来ることが多いので、それも理由の一つですね。

     

    サイトはこのようなレイアウトです。

    上のテキストボックスにチェックしたい正規表現を入力し、下のテキストエリアにチェックしたい文字列を入力して、チェック!のボタンを押します。
    すると、結果が下のエリアに表示されます。
    検索結果の配列まで表示されるので、特に重宝しましたね。

    また、下にリファレンスが載っているので、それを見ながら正規表現を組み立てることができます。
    最近はよく使うものについては覚えられるようになってきましたが…最初のころはチンプンカンプンだったので、これにかなり助けられました…。
    郵便番号やメールアドレスをチェックするためのサンプルもいくつか掲載しており、これにも非常に助けられました。

    そして、このサイトでは、PHPだけでなく、JavaScriptでの結果も同時に確認できます。
    まあ、結果はPHPとほぼ同じですが…。

     

    以上、PHPやJavaScriptの正規表現をチェックする方法でした。
    正規表現って苦手な方も多そうですし、私もその一人でしたが…覚えるとかなり便利なので、こういったサイトを活用して頑張りましょう

    • この記事いいね! (0)
    takahashi 著者:takahashi

    QNAPのNASが凄すぎて最早ただのサーバ機と化している件

    知人が自宅サーバー代わりにQNAPのNASの利用を検討しているとのことで、自分も気になって調べていたところ、QNAP製NASに搭載されているOS”QTS”の操作を実際に体験できる公式のライブデモサイトを発見。

    ライブ・デモ – QNAP

    早速触ってみました。
    日本からの利用の場合は、ライブデモ-Asiaを利用すればOKかと思います。


    /私、QNAPのNAS。こっちはQTSのログイン画面。\

    既にNASのログイン画面とは到底思えない装い。
    その完成度にビビりつつも早速ログイン。

    ログインID/PWはデモページ入り口に記載されているものを入力すれば入れます。

    ログインに成功するとようこそ画面が出現。
    そのままチュートリアルを読み進め、ウインドウを閉じると

    iOSとGnomeを足して2で割ったような(?)UIが出現。
    ブラウザのバーとかなかったら普通にPC用のOSに見間違いそうな完成度です。

    NASストレージ内に保存されたファイルや

    Nasの動作設定などもわかりやすい画面で確認・設定ができます。

    が、そんなところでとどまらないのがこのQTS。
    なんと普通のスマホやPCと同様にアプリをインストールすることで様々な機能を追加することができます。
    さすが、伊達にOSと呼ばれはいないようですね…

    しかししかし、OSたるもの、どんなアプリが対応しているか、というのも非常に重要なポイントです。
    ということで、早速アプリストアをチェック

    開いてみて驚いたのはその対応アプリの多さ。

    めっちゃあるwwww

    まずすごいのは、NASなのに

    CMSがうごいちゃう!

    NASなのに…


    DHCPサーバーや仮想スイッチをたてれちゃう。

    極めつけは…

    えっNASなのにNode.jsやRuby on RailsやPostgreSQLも動くの…
    普通に開発環境として使えちゃうじゃないですかやだー!!

    ストレージ内に保存された音楽をブラウザ上やLAN内のDLNA機器などを経由して再生できるメディアプレイヤー機能

    フォトライブラリなど、マルチメディア周りの機能も充実しています。

    ちなみに、

    S3互換のオブジェクトストレージサーバーアプリもあるので、S3とほぼ同じようなAPIをたたいてファイルを取得できるようにすることもできるようです…ヒェー((

    ちなみのちなみに、
    RAID対応NASですので、搭載HDDの状態も勿論画面上から確認できます。

    ここでふと気づいてしまいました…

    自分が自宅サーバーでやりたかったことの大半….
    もしかしてQNAP NASでできてしまうのでは….

    できれば気付きたくなかったですが、これだけのものをアプリストアからインストールするだけで、しかもブラウザ上のGUIから自在にコントロールできるという簡単さは目から鱗レベルによくできています。

    今回見た画面は飽くまでQTSのデモ版なので、実際にインストールして動かしたりとかまではできないので、実際の動作感までは分かりませんが、”自宅でサーバー動かしたいけど難しい操作は覚えたくない…”という人にとっては夢のようなガジェットかもしれません。

    ここまでくると、本体のお値段が気になってきたので、現時点でのお値段をAmazon.co.jpで調べてみました。


    HDDスロットが2つの、恐らくエントリーモデルと思われる製品。

    約2万3千円という、標準的なNASに比べると結構しますが、下手に新品のPCを買うよりもお得かもしれません。

    自宅サーバー歴5年の自分ですが、ここにきて心変わりの危機に瀕しております。

    めっちゃほしい…

    QNAP

    • この記事いいね! (0)
    著者:杉浦

    javascriptの論理演算子

     javascriptは暗黙的な型変換を行うことによってboolean(真偽値)でない値が格納されている変数をboolean同然に記述することを許しています。javascriptの論理演算子はこの仕組みを利用することで便利な拡張がなされています。javascriptの論理演算子&&、||についての記述の引用が次です。

    Note

    The value produced by a && or || operator is not necessarily of type Boolean. The value produced will always be the value of one of the two operand expressions.

    引用:ECMAScript 2017 Language Specification 12.13 Binary Logical Operators
    意訳すると、”&&や||によって返される値が真偽値である必要はありません。返り値は常に2つの被演算子のうちの片方の値になります。”、となります。
    具体的に&&や||はMDNの論理演算子のページにある次の表の通りに動作します。

    演算子 使用法 説明
    論理 AND(&&) expr1 && expr2 expr1 を false と見ることができる場合は、expr1 を返します。そうでない場合は、expr2 を返します。したがって、真偽値と共に使われた場合、 演算対象の両方が true ならば、&& は、true を返し、そうでなければ、false を返します。
    論理 OR (||) expr1 || expr2 expr1 を true と見ることができる場合は、expr1 を返します。そうでない場合は、expr2 を返します。したがって、真偽値と共に使われた場合、 演算対象のどちらかが true ならば、|| は、true を返し、両方とも false の場合は、false を返します。
    論理 NOT (!) !expr 単一の演算対象が true と見ることができる場合は、false を返します。そうでない場合は、true を返します。

    引用:論理演算子 – JavaScript | MDN
    論理値の真偽が確定した時点の被演算子が返されるわけですね。この論理演算子を用いて真偽値以外の値を得ようとする際に注意するべきなのが論理 NOT (!)です。この論理演算子は被演算子を真偽値として見たときの値(true or false)を返すため、論理式に!が含まれていた場合、被演算子のいずれかが返ってくる保障が薄くなります。
    論理演算子を真偽値以外の目的で使用している例:

    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

    このコードは、window.jQueryが実行可能ならばwindow.jQueryを、window.jQueryが実行できないならばdocument.write(‘<script src=”js/libs/jquery-1.7.2.min.js”><\/script>’)を実行する、というコードになります。

    • この記事いいね! (0)
    著者:杉浦

    javascriptの真偽値

     javascriptは暗黙的な型変換をよくしてくれる言語です。javascriptで真偽値が入りそうな演算を真偽値でない値で実行した場合、真偽値でない値を真偽値に暗黙的に変換します。javascriptである値を引数として真偽値に変換をする関数は次の表に従って変換を行います。

    Table 9: ToBoolean Conversions
    Argument Type

    Result

    Undefined

    Return false.

    Null

    Return false.

    Boolean

    Return argument.

    Number

    If argument is +0, -0, or NaN, return false; otherwise return true.

    String

    If argument is the empty String (its length is zero), return false; otherwise return true.

    Symbol

    Return true.

    Object

    Return true.

    引用:ECMAScript® 2017 Language Specification 7.1.2 ToBoolean
    この表の肝要なところは引数が存在している様な値(なにか適当な実体がある感じ)ならtrue、存在していない様な値(未定義、null、NaNなど)ならfalseを返してくれるところです。このためjavascriptは

    if(hoge !== '' && hoge !== null){console.log('hogeはtrue';)}

    とのようにしなくとも

    if(hoge){console.log('hogeはtrue');}

    とするだけで存在の判定を大体やってくれます。ただ、int型等の数値を同じ様に書くのは注意です。0ならばfalseという変換にひっかかります。C言語やら01の世界やらで0(int)は大概、偽とされており、おそらくこの考えを引き継いでいるためjavascriptでは0ならばfalseに変換されます。

    • この記事いいね! (0)
    著者:杉浦

    マテリアルデザインのさわり

    Design – Material Design
    マテリアル・デザインって何? Androidデザイン責任者にインタヴュー | ギズモード・ジャパン
     マテリアルデザインの思想が理想とするデザインは脳にスッと入ってくるデザインです。
    マテリアルデザインは一貫性のある法則を持つ世界の上でデザインを行うことで、脳にスッと入ってくるデザインを実現しようとします。一貫性のある法則には実世界の一部を再現するような法則が用いられています。ここで一部、とあるのはマテリアルデザインの目的がユーザの理解の促進にあるからです。理解を妨げて、処理を重くするだけの余分な法則を再現する理由はありません。主な法則は、実世界において紙を重ねた時に起きる現象を再現する直感的な法則です。例えば、ページはhogehogeとかかれたカードの集まり(並べてもいいし、重ねてもいい)で構成される。これは実世界の紙を重ねた時の状態を再現する法則です。他には、カード内から画像や文字ははみ出さない、下の要素には上の要素の影が落ちる。これはそれぞれ、紙面からはみ出して宙に浮く画像や文字はない、下の物体には上のカードの影が落ちる、という実世界上の法則の再現です。
     マテリアルデザインの効果の一例が次です。
    ヘッダに影がない

    ヘッダに影がある

     影がついた場合ヘッダが下の記事欄から独立していることがわかるため、スクロールをしてもヘッダが固定されると連想しやすくなります。

    • この記事いいね! (1)
    著者:杉浦

    セレクタによる複数選択から個々の要素を操作する

     ここで扱うセレクタは複数の要素を選択できるjQueryの$()とjavascript備え付けのquerySelectorAllの二つです。$([“属性名=’value'”]),querySelectorAll([“属性名^=’value'”])で条件式に合った要素が返ってきます。このvalueの中で正規表現が使えます。比較演算子は次の表です。

    |= valueか、-valueが属性名な要素を選択
    *= 部分一致。valueを含む文字列が属性名な要素を選択
    ~= スペースで区切られた複数の属性名を持つ要素が主な対象。valueな属性名を含む要素を選択。
    $= 後方一致。末尾にvalueを含む文字列が属性名な要素を選択
    = 完全一致。valueが属性名な要素を選択
    != 否定。valueでない文字列が属性名な要素を選択。属性名がない要素も選択。
    ^= 前方一致。先頭にvalueを含む文字列が属性名な要素を選択

    querySelectorAllの返り値はNodelist型のため配列に変換しないと煩雑です。変換には次のコードが使えます。

    Array.prototype.slice.call(document.querySelectorAll("属性名=value"))

    次のようなArray.from()ならさらに楽です。

    Array.from(document.querySelectorAll("属性名=value"))

    Array.from()はこれを書いている時点でブラウザによる対応が怪しいです。対応表は次になります。Can I useも次の対応表へ案内してくれます。
    ECMAScript 6 compatibility table
    well-known symbolsの行が完全対応なら大丈夫なはずです。Array.fromが使えないなら上のArray.prototype.slice.callです。
     配列を

    arr.forEach(funcion(a){/*処理*/});

    なコードの様に扱うと処理が短く色々書けます。jQueryのイベント付与処理なら$(“#”+a.id).click(function(){/*click時処理*/})の様な具合です。
    次のコードな正規表現で各文字列の差分を取る(最初の属性選択時の共通部分以外を抜き出す)ことでさらに使う幅が広がります。

    a.属性名.replace(/^value/g,”) 前方一致したvalue部分を空にする
    a.属性名.replace(/value$/g,”) 後方一致したvalue部分を空にする
    a.属性名.replace(/value/g,”) 部分一致したvalue部分を空にする

    属性名の命名規則をかっちりしていれば正規表現で楽にコーディングできます。

    • この記事いいね! (0)
    著者:杉浦

    chrome開発者ツールのコンソールでDOM操作を行う

     これはjavascriptを用いた開発で特に役に立つと思います。”javascriptのソースコードでやりたいDOM操作のコーディングを行う→目的のページをリロード→チェック→コーディング再開”なんてことがめんどくさい時に使えます。 GoogleChromeなどの多くのブラウザにはショートカットキーF12で開ける開発者ツールが備わっています。この開発者ツールのコンソールからjQuery付javascriptとほぼ同じ言語でDOMの操作ができます。
     要素を対象にとる

    $(selecter),$$(selecter)

     document.querySelector(),document.queryAllSelector()と同じです。jQueryのセレクタと同じ記法です。どちらも対象が一つのみでも配列扱いをするので操作に注意がいります。要素の展開から属性なりイベントなりの色々が読み取れます。

    *.children,*.firstChild,*.parentNode,...

     ちゃんと説明書を読んだわけでないので断言できませんがjavascriptに入っている要素参照操作が備わっているようです。

    *.innerHTML,*.outerHTML

     連鎖して何かを呼び出せませんが一括操作に有用です。
    DOMを操作する

    *.append(),*.removeChild(),insertBefore(),…

     ちゃんと説明書を読んだわけでないので断言できませんがjavascriptに入っているDOM操作が備わっているようです。
    便利

    * = *,if,while,for

     変数を持つことも分岐、繰り返しを行うこともできます。ほぼ対話的なjavascriptです。

    clear()

     画面をきれいにします。

    コンソール上のDOMの階層要素を右クリック→Expand recursivelyを実行

     DOMの要素を再帰的に展開、要は全部展開します。コンソール上の参照されたDOM要素はElementPanelのDOM要素に近い機能を備えています。

    コンソール上の適当な隙間で右クリック→Save as...

     コンソール上の操作のログを保存します。直接Command Historyを開く命令がみあたらないのでこれで代用です。正直手間な感じはします。

    • この記事いいね! (0)
    村上 著者:村上

    【jQuery】FastClickライブラリを特定の要素のみ無効にする方法【iOS】

    Cordova開発をしているとお世話になるライブラリが、この「FastClick」だと思います。
    これを使うことで、モバイルでアプリを実行したときのクリックの反応速度がかなり改善されます。
    が、ものによっては、この FastClick ライブラリと競合を起こすライブラリもあるようで、今日、まさにその現象に遭遇しました。

     

    競合を起こしたライブラリは、OpenstreetMap を使用した地図を表示できる「MapBox」です。
    地図の表示の全てに影響するわけではなく、地図に表示したマップピンをクリックして、吹き出しを表示するロジックに影響が出ており、iOS でのみ吹き出しが表示できない状態でした。
    クリックの動作をする箇所でのエラーだったので、最初は Click イベントを取得できていないことを疑いましたが、エラーログを見たところ、FastClick との競合が原因でした。

     

    解決方法ですが、こちらのサイトを参考にしました。

    JS/jQueryでFastClick.jsを使ってスマホのclickイベントの300ms遅延をなくす|ITハット
    http://ithat.me/2016/11/06/js-jquery-smartphone-click-event-300ms-delay-fastclick

    サンプルに書くほどでもないのですが…対策方法は、FastClick を無効化したい aタグなどの要素に、needsclick というクラスを追加するだけです。

    <a class="needsclick">FastClickを無効にしたい要素</a>
    

    特定の要素のみに FastClick を適用する方法もありますが、現在開発中のシステムでは、無効化したい要素がここのみだったので、この方法を採用しました。
    ちなみに、特定の要素のみに適用する方法は下記の通りです。

    <div>
        <div class="fastclick">
            <!-- FastClickを適用する要素 -->
        </div>
        <div>
            <!-- FastClickを適用しない要素 -->
        </div>
    </div>
    
    $(function(){
        FastClick.attach($('.fastclick')[0]);
    });
    

    全てに FastClick を適用するときには、下記のように記述します。

    $(function(){
        FastClick.attach(document.body);
    });
    

    対策としては以上です。

     

    ということで、FastClick を一部無効化する方法でした。
    ライブラリの競合はやはり厄介ですね。
    最悪、FastClick を無効化しなければいけないのでは…と思ったので、解決策があって良かったです。

    • この記事いいね! (0)