contentクロージャを使った問題解決JavaScriptTypeScriptVue.jsフロントエンドnuxt.jsはじめにクロージャ(Closure)の概念を初めて知った時の感想は「何に使うんだこれ?」でした。それ以来、色々な言語でクロージャのサンプルを実装したりしながらも、実際にクロージャを活用して綺麗に問題を解決するということはありませんでした。それがつい先日、実務の中でちょうど良い問題をクロージャで解決できました。これが自分なりに少し嬉しかったので、クロージャの簡単な解説を交えながらご紹介したいと思います。クロージャとはクロージャとは、誤解があるかもしれませんが、「自分の外に、自分以外がアクセスできない変数を持った関数」と理解しています。具体的に、簡単なクロージャを作ると下のようになります。関数は無名関数を返しており、この無名関数がまさにクロージャです。いう変数にアクセスしています。関数)しかアクセスできないようになっています。変数を扱うことができるのがクロージャ、と自分なりに理解しています。(厳密には、クロージャは関数でなくても定義可能であったり、あるいはHaskellといった純粋関数型言語にもクロージャの概念が導入できるようです)クロージャを用いた問題解決の具体例:仕事でWebフロントページの開発をしている際に、「全ての項目を選択するボタン」を実装したのですが、そこでクロージャを活用しました。今回はその時の実装を参考に、簡略化したアプリケーションとして再現しました。画面のイメージは図のようになります。最近はまっている筋トレを題材にしました。項目の数が動的に増減する項目が複数カテゴリに分けられているため「全ての項目を選択する」ボタンの数自体も動的に増減させるという仕様を満たす必要がありました。「全ての項目を選択する」ボタンが1つであればどう実装してもシンプルになりそうですが、動的な内容が多かったためクロージャの威力が発揮されたように思います。それぞれ動作が異なります。オブジェクトに持たせるようにしました。クロージャの内部には「チェックが付けられているかどうか」を表す状態を持たせています。処理と状態を合わせた、まさにクロージャとして活用しています。オブジェクトを用意します。関数が呼び出されています。関数は1回呼び出される度に処理を変えるクロージャです。今回は動的な要素が多かったため、これをクロージャなしで実装すると余分な変数やマッチング処理がかなり増えてしまうのではないかなと思います。いうことで、最終的なコードは下のようになりました。サンプルアプリの全コードはこちらに上げてあります。}}</script>おわりに非常にニッチな例でしたが、具体的なクロージャを用いた問題解決の例をご紹介しました。勉強中ですので、ご指摘ご意見などありましたらコメントいただけると幸いです。最後まで目を通していただきありがとうございます。Yoshida@_kazuki_yoshida_東京で働くWebエンジニアです。upLoginユーザーは見つかりませんでした。