Reactの公式ドキュメントでGetting Startedを読むと、このような文章があります。
We recommend going through this JavaScript overview to check your knowledge level. It will take you between 30 minutes and an hour but you will feel more confident learning React.
意訳をすると「Reactを習得したかったら、JavaScriptも並行して学習してね！」と言ったところでしょうか？そういうわけなのでReactの学習を意識しつつ、JavaScriptの学習も進めていきましょう。今回は即時関数についてご紹介します。
即時関数とは
無名関数を定義と同時に実行する関数のことを指します。
[php]
function Hi () {
console.log("Hi!");
}
Hi(); // Hi!
[/php]
通常の関数では、functionで関数を定義した後に実行します。
[php]
(function() {
console.log("Hi!");
})(); // Hi!
[/php]
同じことを即時関数で書くとこのようになります。”(function () {})();”という構文を用いて、コンソール画面に”Hi!”を呼び出しています。
即時関数を用いる理由
functionで関数を定義した関数を使わずに、即時関数を使う理由は定義した変数が他から影響されないようにするためです。JavaScriptで定義した変数が他から影響を受けることを「グローバルスコープが汚染される」と言います。
[php]
var greet = "Hello!";
(function() {
var greet = "Hi!";
console.log(greet);
})(); // Hi!
[/php]
即時関数を使うと変数greetはローカル変数として扱われ、先に宣言しているグローバル変数greetと衝突を防ぐことができます。この例ではコンソール画面には”Hello!”と表示されず、”Hi!”が表示されます。
Reactで即時関数を扱う
[php]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>React Practice</title>
<link rel="stylesheet" href="css/styles.css">
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
(() => {
ReactDOM.render(
<h1>Hello, world!</h1>,,
document.getElementById(‘root’)
);
})();
</script>
</body>
</html>
[/php]
上記のコードをReactをhtmlファイルに記述すると、h1タグで”Hello, world!”が表示されます。ReactのようなJavaScriptライブラリで即時関数を用いる理由は、ライブラリの中で用いられているグローバル関数との衝突を回避するためです。
アロー関数式について
なお上記の即時関数はfunctionを用いた関数ではなく、アロー演算子を用いたアロー関数式を用いています。アロー関数式の詳細については上記のページを参考にしてください。
