イイダリョウのブログ。【JS】アロー関数の複数の書き方を試してみた2020-02-09【JS】アロー関数の複数の書き方を試してみたJSES6(ES2015)で追加されたアロー関数。従来の関数よりもコンパクトに書けます。IE非対応とはいえ、もう5年も経っているのでそろそろこちらをメインで行きたい!アロー関数には複数の書き方があります。自分的に直感的ではないと感じた書き方もありましたが、人が書いたコードを読むためにも実際に試してみる。あと、イベントリスナと引数の関係についても勉強になった。クモのようにコツコツと※参考:ネイティブJSやってみたシリーズqiita.comアロー関数のブラウザ対応状況(IE以外AllOK!)アロー関数とはざっくりいうとJSの関数をfunctionの代わりにアロー(矢印)=>が使えるよー、という書き方。ES6(2015)から採用されてもう5年経つ。etcIE11のシェアは全体では10%切っているがデスクトップだけで見るとまだ12%ある。今やマイクロソフト自体も「IEを使わないて」と明言しています。ハフポスト進化を止めたブラウザでありながら、ユーザーが使い続けているがためにサポートし続けなければならないIE。我々が使うのをやめればマイクロソフトもEdgeやらVSCodeやらAzureやらの進化にリソースを避けるわけです。「時はきた!」令和時代はどんどんEcmaっていこうぜい!!アロー関数でクリックイベントでは、アロー関数とはどんな書き方か。最近ではよく見るので自分もなんとなくはわかっているが自分でも正確に書けるようちゃんと調べる。アロー関数の書き方は複数あったので、実際に書いてみた。CodePen.ボタンを押すとアラートが立ち上がるクリックイベントを設定。この中にアロー関数の書き方をいくつか試した。ボタンにそれぞれclass名を付けてある。class="arrow3">アロー関数3</button></div>一つ目の「普通の関数」のclass名.yesnameは実際にはそんな言い方しないけどその下の無名関数に対応した名前にしたwJSのquerySelector()でボタンのclass名を取得。document.querySelector('.arrow3');さあ準備は整った。従来の関数(function宣言)まずは従来の関数の書き方。);}functionで関数宣言*1して、その中に処理を定義する。これまで使い慣れてきた書き方。関数の中の処理はアラートで、innerHTMLで取得したDOMの中のテキストを表示する。関数は定義するだけでは実行されない。実行したい場所から関数を読み込む。//関数を実行オブジェクト.yesnameFunc();このように関数名に引数のカッコを付けて書く。クモのようにコツコツと今回はイベントリスナを使ったクリックイベントなのでこの形になる。先ほどの関数宣言とは書き方は違うが挙動は同じ。()の処理を代入する。無名関数=関数名がない!関数の実行は関数宣言と同じ書き方でOK。nonameFunc();変数名=関数名になる。無名関数はその場限りで(再利用しない)で行われる処理に多用する。イベントリスナの中でもよくこんな風に書く。);今回は他と揃えて外部から関数を呼び出す形で実行する。);こちらも引数のカッコを付けない。MDN最初に「functionの代わりにアロー(矢印)=>が使えるよー」と書いた。}アロー関数は2番目の「無名関数」と同じく変数の値として設定する。この二つはただそのまま書き換えれば良いわけではない。=>、つまり引数のカッコと順番が入れ替わる。arrow1Func();今回はイベントリスナなのでカッコなし。);アロー関数には他にも書き方があるので書いてみる。処理が1行だとブロックを省略できる次、「アロー関数2」のJSコード。}を省略できるようだ。コンパクトになった!関数の実行。arrow2Func();今回はイベントリスナなのでカッコなし。alert(text);textはarrow3Func関数の引数。alert()の中にtextを格納する。なんと!引数が1つだけの時は引数を囲うカッコまで省略できるみたい!(引数が0個または複数個の場合はカッコを省略不可)ただ、個人的にはこの書き方はコンパクトすぎて分かりにくくなっていると感じた。(慣れの問題かな?)テキストエディタでカッコを選択すると閉じカッコも印が付いて直感的なのでいいと思うんだけど...。いう書き方がある事を知っておくことは、自分が書くかどうかは別として、他の人のコードを読むためにも必要かなと。(よりコンパクトに書きたい人もいるはず)ちなみに、引数がある関数については実行させるときの書き方が少し違ったので項を分ける。引数ありの関数をイベントリスナで実行(無名関数でラップ!)引数ありの関数の実行はこんな感じ。arrow3.innerHTML;//関数を実行オブジェクト.arrow3Func(arrow3Text);arrow3Func()の引数の中にアラートで表示したい変数arrow3Textの値を代入する。クモのようにコツコツとダメ元で引数を付けてで書いてみたが、やはり動かなかった。arrow3.innerHTML;//引数を付けると動かない。Qiita引数なしの無名関数でラップしてみる。);addEventListener()の第二引数の部分、arrow3Func(arrow3Text)の外側に無名関数をラップする。これによってarrow3Func(arrow3Text)が引数付きでも「引数なし」と同じ状態になる。無事に動かすことができた!この方法は初めて知った!勉強になった!アロー関数の書き方まとめ最後に従来の関数とアロー関数の定義部分だけをまとめる。CodePen.こちらのボタンに紐づけられています。関数宣言まずは従来の書き方。);}変数に関数を代入。アロー関数(基本)ここからアロー関数。}functionとアロー=>は順番が逆になる。ブロック省略(処理が1行)処理が1行の時はブロックが省略できる。);引数のカッコ省略(引数が1つ)さらに引数が1つだと引数のカッコも省略できる。alert(text);ここまでいくと分かりにくいかも。=>を見落とさないよう注意!(引数付きの関数をイベントリスナで読み込む時には引数無しの無名関数でラップすることも注意)最後にということで大変コンパクトになったアロー関数でした。これまでよりもかなりコンパクトな書き方ができることがわかりました!ただ、個人的にはカッコ系を省略しすぎると直感的ではないように感じました。自分はカッコは付けて行こうかと思っています。(functionの7文字が=>の2文字になるだけでもだいぶ楽!)コンパクトすぎる書き方も慣れれば快適に感じるのかもしれない。冒頭にも書いたようによりコンパクトな書き方をしたい人はこの書き方をしている可能性もあるので、少なくとも知識としては知っている必要がありますね!あとアロー関数は単にコード記述量が短かくなるだけでなく、従来の関数とは挙動が異なる部分もあるみたい。影響が大きそうなのはthisです。これについてはちょっと長くなりそうだったので回を分けたく思います。JSフレームワークReact、はじめました。今回は初回...2019-12-25【JS】TypeScriptをGulpでコンパイルしてみるGulpの続きです。前回はAltCSSのSass(SCSS)をコンパイルしまし...2019-06-30【Tone.js】3コード楽器のコードをリファクタリング(ループとイベントと即時関数)Tone.jsの続きになります。前回作った3コード楽器のコードに重...2018-06-11Three.js入門サイトに私も入門する!!以前ご紹介した「WebGL」の続きになります。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。