技術顧問として活躍するフロントエンドのプロが語る、フロントエンドを学ぶ魅力とReact入門

シェアフル社のフロントエンドの技術顧問をしている翁華宏(@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を学び始めたエンジニアと関わっているので、その中で感じる初心者が躓きやすいポイントについて3つご紹介します。

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

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

③ 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 className="App">
       <img src="https://3.bp.blogspot.com/-R5ZeHGZD0fM/WHG2J2c1t5I/AAAAAAABA_c/l72QBLocVXI9_Zu2pQgV1OKfe0FK-zPYgCLcB/s800/hengao.png" alt="変顔" />
       <div className="jokeText">さーーん</div>
     </div>
   );
 }
 return (
   <div className="App">
     <button onClick={() => setCount(count + 1)}>{"押せ!".repeat(count + 1)}</button>
     {count > 0 && <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名の対談記事はこちらをご覧ください。

この記事を書いた人
FLEXY編集部
FLEXY編集部
ハイスキルIT人材への案件紹介サービス
FLEXYメディアは、テックメディアとしてテクノロジーの推進に役立つコンテンツを提供しています。FLEXYメディアを運営するのは、ITに関連するプロシェアリングサービスを提供するFLEXY。経営課題をITで解決するためのCTOや技術顧問のご紹介、ハイスペックエンジニアやクリエイターと企業をマッチングしています。【FLEXYのサービス詳細】求人を募集している法人様向け/お仕事をしたいご登録希望の個人様向け

週1日~/リモートの案件に興味はありませんか?

週1日~/リモートの関わり方で、「開発案件」や「企業のIT化や設計のアドバザリーなどの技術顧問案件」を受けてみませんか?副業をしたい、独立して個人で仕事を受けたエンジニア・デザイナー・PM・技術顧問の皆様のお仕事探し支援サービスがあります。

FLEXYでご案内できる業務委託案件

業務委託契約・開発案件(JavaScriptメイン)

テーマ FLEXY登録画面から案件詳細の確認と直接応募が可能です
勤務日数 2-3日/週
報酬 4万円/日
必要スキル JavaScript・React
勤務地 東京都内/リモート含む
リモート

外部CTO、技術顧問

テーマ 技術アドバイザリーとして知見と経験を生かす
勤務日数 1日/週
報酬 10万円/日
必要スキル エンジニア組織立ち上げや統括のご経験、コードレビュー経験、技術的なアドバイスが出来る方
勤務地 東京
リモート 相談可

業務委託契約・インフラエンジニア

テーマ FLEXY登録画面から案件詳細の確認と直接応募が可能です
勤務日数 2-3日/週
報酬 5万円/日
必要スキル それぞれの案件により異なります
勤務地 東京
リモート 相談可

業務委託・フロントエンドエンジニア

テーマ FLEXY登録画面から案件詳細の確認と直接応募が可能です
勤務日数 週1日〜
報酬 5万/日
必要スキル それぞれの案件により異なります
勤務地 東京
リモート リモートと常駐のMIXなど

人材紹介のCTO案件(非公開求人)

テーマ CTO、技術顧問案件はFLEXYに登録後、案件をコンサルタントからご紹介します
勤務日数 業務委託から人材紹介への移行
報酬 年収800万以上
必要スキル CTOとして活躍可能な方、エンジニア組織のマネージメント経験
勤務地 東京
リモート 最初は業務委託契約で週3日などご要望に合わせます

業務委託契約・サーバサイドエンジニア

テーマ FLEXY登録画面から案件詳細の確認と直接応募が可能です
勤務日数 週2-3日
報酬 案件により異なります
必要スキル 案件により異なります
勤務地 東京都内
リモート 相談可能
個人登録

お仕事をお探しの方(無料登録)
法人の方(IT課題の相談)