ReactとJavaScriptの文法 ~ 関数と関数コンポーネント

2018年11月8日2018年11月13日

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の学習も進めていきましょう。今回は関数についてご紹介します。

関数について

JavaScriptにおける関数とは、ある決まった処理をいつでも呼び出せるようにしたもののことを指します。

関数宣言文による関数の定義

[php]
function Hi(name) {
return "Hi, " + name;
}
[/php]

JavaScriptにおける関数はいくつか定義の方法があります。上記はfunctionキーワードを使って、Hi関数を定義しています。Hi関数に仮引数である”name”を入力して、”Hi, （名前）”が表示されることになっています。

[php]
function Hi(name) {
return "Hi, " + name;
}

var h = Hi("echizenya");
console.log(h);
[/php]

実引数を”echizenya”として関数の処理結果を変数hに代入して、デバッグをするとブラウザのコンソール画面に”Hi, echizenya”と表示されます。

関数が実行される順番について

実引数"echizenya"を指定したHi関数の呼び出し
↓
仮引数"name"に実引数の受け渡し
↓
波括弧内の関数定義文が実行
↓
変数hにhi関数の実行結果が代入
↓
コンソール画面に"Hi, echizenya"の表示

例として紹介したJavaScriptのコードでは”Hi, echizenya”と表示されるまでに、上記の順番で処理がされます。

Reactで関数を扱う

ReactではComponentという独自のタグを使ってさまざまな部品（処理）を行います。そのComponentの元になっている考え方がJavaScriptの関数です。

[php]
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById(‘root’)
);
[/php]

上記のコードはReactの公式ドキュメントを引用しました。このコードを実行すると、ブラウザの画面上でh1タグを使って”Hello, Sara”と表示されます。

関数宣言文によるWelcome関数の定義

[php]
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
[/php]

公式ドキュメントのサンプルコードでは、functionキーワードを使って関数宣言文によるWelcome関数が定義されています。仮引数に”props”というプロパティを指定します。Welcome関数を実行すると、h1タグで囲われた”Hello, （名前）”が表示されます。なお{props.name}を囲う波括弧”{}”はJSXの記法です。

Welcome関数の呼び出し

[php]const element = <Welcome name="Sara" />;[/php]

JavaScriptの記法と異なりますが、タグの中で実引数のSaraが入力されたWelcome関数が呼び出されます。Welcome関数の定義な内容にしたがって、”<h1>Hello, Sara</h1>”が、再代入できないローカル変数elementに代入されます。なお宣言子として使われている”const”については、こちらの記事を参考にしてください。