Gizanbeak

この記事では、TypeScriptの即時関数について紹介します。
即時関数は聞き慣れないかもしれませんが、実はとても便利な技術なんですよ。

即時関数とは？書き方🖋

まずは、即時関数の基本から紹介します。

即時関数とは 定義された直後に実行される関数 のことを言います。
通常の関数とは違って名前を持たず、すぐに実行される特性があります。

具体的には以下のように書けます。

(function() {
  console.log("これは即時関数です！");
})();

このコードでは関数が定義された直後に、コンソールにメッセージが出力されます。

私も最初は「なんでこんな書き方があるんだろう？」と思いました。

引数を持つ即時関数の使い方

次に即時関数に引数を渡す方法を紹介します。

引数を渡すことで、外部からのデータを関数内で利用することができます。
さっそくコードを見てみましょう。

(function(name: string) {
  console.log(`こんにちは、${name}さん！`);
})("Gizanbeak");

上記のコードを実行すると「こんにちは、Gizanbeakさん！」というメッセージが表示されます。

簡単ですよね！😉
引数を渡すことでさらに柔軟に即時関数を活用することができます。

アロー関数と合わせて使う✨

TypeScriptやES6ではアロー関数という書き方が使えますね。

このアロー関数を即時関数と組み合わせることで、さらにスタイリッシュなコードを書くことができます。

(() => {
  console.log("アロー関数と即時関数の組み合わせ！");
})();

シンプルで美しいですよね。
私もこの組み合わせはよく使います。🌟

【実践】TypeScriptのアロー関数でコードを短くシンプルに！

TypeScriptアロー関数の基本から応用までわかりやすく解説！短くシンプルなコードで効率アップ！

gizanbeak.com

即時関数のメリット

ここまで読んでいただいた方の中には「なぜ即時関数を使うの？」と思った方もいるかと思います。
そこで、即時関数のメリットについてお伝えします。

• 変数のスコープを制限：即時関数内で定義された変数はその関数の中でのみ有効です
• コードの衝突を避ける：他のスクリプトやライブラリと変数名が重複することを避けることができます
• 初期化時の処理をまとめ：ページのロード時などに一度だけ実行したい処理をまとめて書くことができます

即時関数を使用することで上記のようなメリットがあるため、覚えておくと便利です！

まとめ

いかがでしたか？
即時関数は一見複雑に見えるかもしれませんが、理解すれば非常に強力なツールとして活用できます。

即時関数の使い方、メリットを理解してぜひ活用してみてくださいね！🚀