シェアフル社のフロントエンドの技術顧問をしている翁華宏（@kahirokunn）と申します。

SIer出身で、数社を経て現在はフリーランスとして活動しています。主にフロントエンド開発に貢献しているほか、イベントへの登壇も行っています。

今回はフロントエンドの中でも、React入門編をお話したいと思います。Reactは現在のフロントエンドの主流となっている技術です。

どのように学ぶべきかといった勉強法のポイントや、躓きやすいポイントなども是非チェックしてみてください。

1. そもそもフロントエンドとは

フロントエンドエンジニアの主な仕事は、ユーザーが触る画面を作る事です。画面の特徴にはいくつか種類があり、それぞれ求められるスキルの幅も異なります。例えばシステム系のシステムのフロントエンドでは、特にJavaScript筋、凝ったアニメーションのデザインには特にCSSでの表現力が要求されます。グラフを頻繁に作成するケースではSVG又はcanvas力があると便利な事が多いです。

2. Reactはフロントエンドのライブラリ

ReactはFacebookが開発したライブラリです。Reactを利用することで、簡単に動きのあるGUIを作成できます。

また、React Nativeを使うと、Reactと同じようなコードを1つ書くだけで、場合によってはWeb、iOS、Android等の幅広いプラットフォームで動くアプリを作成できます。こういった利便性から、フロントエンドを学ぶ上で、Reactに手をだすのは、良い手と言えるでしょう。 Reactは慣れるまでに多少時間がかかりますが、学んでおけばほかのライブラリやフレームワークを使うときも比較的早く馴染めます。ぜひ楽しんで勉強してみてほしいです。

3. Reactをゼロから勉強するには？

Reactを始める前に必要なスキル

Reactを使うには、大前提としてHTMLとCSSとJavaScriptの一定以上のスキルが絶対に必要です。また、jQueryを使っていない純粋なJavaScriptでDOMを操作するといった知識も求められます。Reactを書く際にはJSXという、本来のJavaScriptには無い記法がいくつかあるので、AltJSの仕組みなどを学ぶ必要もあるでしょう。

学習はどのようにスタートすべきか

以前と比べ、最近はReactの学習は容易になりました。日本のコミュニティも活発ですし、日本語の書籍も多数出版されています。また、Reactの公式ドキュメントの日本語訳も出ており、そこにあるチュートリアルもおすすめです。ハンズオン型の教材もUdemyやYouTubeで多数公開されていますから、「とりあえず触って慣れていく」という感覚でスタートしてみましょう。個人的にはとにかく手を動かしてみることが一番早く慣れる方法だと思います。

本当にゼロからのスタートであれば、HTMLやCSS、JavaScriptを学んでちょっとしたWebアプリを使ってみる、あるいは既存のサービスを写経してスキルを身に着けていくのがいいと思います。

HTMLやCSS知識が浅い場合でも、まずはReactを触ってみて、ある程度イメージを掴んでから改めHTMLやCSSを学ぶという方法が合う人もいます。これらの知識がなぜReactの学習に必要なのかの把握ができ、学習効率が上がる可能性があります。

私自身はReactを触ってみても当初はなかなか馴染めなかったのですが、代わりにVue.jsをやってみたら理解が深まった経験があります。理由は私がサーバーサイド出身だったからだと思うので、どういう学び方が良いのかはその人バックボーンにも依存するでしょう。

4. 初心者が陥りやすいReactの躓きポイント3つ

最近、Reactを学び始めたエンジニアと関わっているので、その中で感じる初心者が躓きやすいポイントについて３つご紹介します。

(1) アルゴリズム
以前までプログラムに携わってきた方や、中級・上級のエンジニアでもReactを触ると大体躓くのがアルゴリズムです。 Reactには関数ベースとクラスベースの2通りの書き方があるのですが、関数型だけで書くためにはhooksという機能についての理解が必要になり、ここでミスをすると無限ループに陥りアプリが非常に重くなってしまったりします。変数を使いたい場合は、まずクラスベースで挑戦することをおすすめします。

(2)  JSX
ReactにおけるJSXそのものはシンプルな仕組みなのですが、最初は理解しにくい部分です。私がJSXを教える場合は、JSXが無い状態からレクチャーして、その後JSXがあることでどんな変化が生まれるのかを体験してもらっています。

(3)  webpack
Reactを使うにはReactそのものとJSXという2つの要素を学ぶことが必須なのですが、さらにwebpackという要素が出てくることで挫折してしまう人が非常に多いです。 最近はCreate React AppというCLIツールがあるので、手順に従って操作すればwebpack等に関する環境整備が自動でされます。特に初心者の方はこのツールを使い、まずはReactとJSXだけに注目して学習を進められるようにするといいでしょう。

Reactを触ってみる

ハンズオン：動かしてみよう

◼︎環境構築
nodeの用意 8.10以上のnodeのバージョンを入れてください。 現在のnodeのバージョンは$ node -vで確認できます。

◼︎React環境の用意
create-react-appというのを使ってReact + TypeScriptの開発環境を用意します。 terminalで以下のコマンドを順番に叩いてください。

$ npx create-react-app my-first-app --template typescript
$ cd my-first-app
$ npm start

これだけでかっこいいReactの画面が出てきましたね。

画面に「Edit src/App.tsx and save to reload.」と書かれているので、「src/App.tsx」を好きなエディタを使って編集しましょう。 私は、以下の画面にしました。

◼︎ミニゲームを作成してみよう
今回のミニゲームは、コピーアンドペーストしやすいように以下にコードがあります。 良かったら、一応、こちらのチュートリアルリンクもご確認ください。

では「src/App.tsx」早速以下のように編集してみましょう。

import React, { useState } from 'react';
import './App.css';

function App() {
const [count, setCount] = useState(0)
if (count === 3) {
return (
<div>

<img src="https://3.bp.blogspot.com/-R5ZeHGZD0fM/WHG2J2c1t5I/AAAAAAABA_c/l72QBLocVXI9_Zu2pQgV1OKfe0FK-zPYgCLcB/s800/hengao.png" alt="変顔" />
<div>さーーん</div>
</div>
);
}
return (
<div><button> setCount(count + 1)}&gt;{"押せ！".repeat(count + 1)}</button>
{count &gt; 0 &amp;&amp;
<div>{count}</div>
}

</div>
);
}

export default App;

これで構造と動きは定義できたので、次はcssでスタイルを当ててみましょう。

では「src/App.css」に以下を追加してください。

.jokeText {
top: 40%;
position: absolute;
display: inline-block;
color: #ACB6E5;
background: -webkit-linear-gradient(0deg, #ACB6E5, #86FDE8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: jokeTextAnimation 2s linear infinite;
}

img {
animation: boundAnimation 1s ease-in infinite;
}

@keyframes jokeTextAnimation {
0% {
left: 50%;
transform: rotate(0deg);
font-size: 10px;
}
50% {
left: 25%;
transform: rotate(360deg);
font-size: 150px;
}
100% {
left: 50%;
transform: rotate(720deg);
font-size: 10px;
}
}

@keyframes boundAnimation {
from {
transform: scale(1);
}
25% {
transform: scale(1.15);
}
50% {
transform: scale(0.95);
}
75% {
transform: scale(1.05);
}
to {
transform: scale(1);
}
}

以上で簡単なミニゲームの作成は完了です。 こちらの画像が出てきたでしょうか！？

最後に：フロントエンドの魅力

フロントエンドエンジニアはユーザーが直接触る画面を作るのが主な仕事なので、ユーザーの手に一番近いコードを書いてると言えます。私自身元々はバックエンドエンジニアだったのですが、少しコードを変えるだけで画面が変わるのが楽しく、フロントエンド業界に足を踏み入れました。

実際に自分が組んだ画面を様々なデバイスを持った、数万、数十万、ときには数百万以上の方々に体験してもらえるというのも大きな魅力です。

今後フロントエンドに携わりたい、Reactを学びたいと思っている人たちにも、同じ楽しさを味わってもらえたらと思っています。

本記事でReactを教えてくれた方 シェアフル社で技術顧問をしている翁華宏さん技術顧問としてどのような働き方をしているか？シェアフル社のCIO松尾さんと技術顧問3名の対談記事はこちらをご覧ください。