2018/04/05更新

[フロントエンド] React.jsでDOM要素にアクセスする（refの利用）

こんにちは、@yoheiMuneです。
Reactなどの仮想DOMを扱うライブラリでは、直接HTML要素にアクセスする機会は少ないですが、でも時々はアクセスしたい場合があります。React流にどのようにDOMにアクセスするのか、ブログに書きたいと思います。

対象のReactバージョン

このブログでは、React.jsのv16.3.0をベースに記載しています。フロントエンドは進化が早いので、適宜読み替えてください。

何がしたいのか

Webアプリを作っていると、DOM要素にアクセスして値を取得したいという場合があります。例えば以下のようなinputがあるとします。

<input type="text" name="name"/>

このDOMにアクセスしたい場合、（Reactではない普通のJSでは）以下のようにアクセスします。

let input = document.querySelector('input')
let value = input.value

これは普通のWebの実装ですが、Reactでは流儀違反です（正しく値は取得できますが、直接DOMにアクセスはしない）。Reactではどのようにするべきか、を説明したいと思います。

refを用いてDOMにアクセスする

React.jsではrefという要素を用いて、DOMにアクセスできます。
以下のように実装します。

<input
    type="email"
    ref={ input => { this.emailInput = input }}
    placeholder="E-mail address"/>

refには関数を指定します。その関数の引数には、DOMへの参照が渡され、それを利用してDOMへアクセスします。ここではemailのinput要素を受け取り、this.emailInputに代入しています。

そして、そのinputから値を取得したい場合には、以下のように実装します。

// <input type="email"/> から値を取得
let emailAddress = this.emailInput.value

このようにReactでは、refを用いることで、DOMにアクセスすることが可能です。

コードの全体像

コードの全体像はこちらです。理解の手助けになれば幸いです。

import React, { Component } from 'react'

class MyComponent extends Component {

    onClick() {
        // DOM要素から値を抽出する.
        let emailAddress = this.emailInput.value
        console.log(emailAddress)
    }

    render() {
        return (
            <div>
                <input
                    type="email"
                    ref={ input => { this.emailInput = input }}
                    placeholder="E-mail address"/>
                <div
                    onClick={this.onLogin}>
                        Login
                </div>
            </div>
        );
    }
}

参考1：refは非推奨

Reactの以前のバージョンでは、refではなく、refsでDOM要素へのアクセスを記載していました。

<!-- 現在は非推奨 -->
<input type="text" refs="name"/>

これ執筆時点（2018年4月）はドキュメント上で非推奨ですが、近い将来プログラム的にも非推奨（その後に廃止）になるようです。
理由としては、いくつかの問題があり、例えばReactの内部実装が複雑になったり、速度が少し遅くなったりすることが問題のようです。

参考2：input要素の値を取得する方法

今回はrefの説明でしたが、onChangeを用いる実装の方がよりReactらしい実装かなと思います。以下の公式ドキュメント（Forms - React）を参照ください。

最後に

Reactの実装でつまづくポイントはいっぱいありますが、今回のようなTipsを覚えておくと実装が効率的にできていいですよね。今後も色々と書きたいと思います。

最後になりますが本ブログでは、フロントエンド、Swift、PHP、Node.js、Linux、Python、Java、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！