「Next.js」と「React」の公式チュートリアルに入門

42Tokyoの課題を終わらすのに、現在「Next.js」と「React」について学んでいる。

そこで活用しているのが、公式が出しているチュートリアル。

まだぜんぶ終わってはないのだが、良質なチュートリアルだと思うので、少し紹介したい。

Next.jsとは

そもそもNext.jsとは何かというと、フロントエンドで使われるフレームワークだ。

フレームワークとは、開発を効率化するための枠組みとなり、のちほど紹介するReactをベースに開発されている。

Webアプリ開発を効率よくするための機能がおおく含まれているのが特長だ。

のちほどReactの紹介にて、Reactと比較しつつ詳しく述べたい。

Next.jsのチュートリアル

チュートリアル自体は、ハンズオンで手元でコードを写経して、確認しながらすすめることができる。

内容も、HTMLからスタートし、JavaScript、そしてReactのそれぞれの関係が分かるようになっている。

このチュートリアルを通じて、Reactが、フレームワークではなくて、UI（ユーザーインターフェース）ライブラリであるということが理解できる。

チュートリアルは英語版だけとなっている。

Learn | Next.js

Reactとは

ReactはインタラクティブなUIを提供するJavaScriptライブラリ。（JavaScriptについてはのちほど紹介）

ライブラリとは、汎用性の高い関数やソースコードをまとめた場所という意味だ。

「システムを作るためのテンプレート」が集まっているものとも言える。

シングルページアプリケーションやモバイルアプリケーションの開発におけるベースとして使用することができ、ライブラリに用意された各コンポーネント（Webページを構成する材料）は、今風に洗練されている。

そのため、Webページのデザイン経験が少ない人でも、Reactを使えば比較的簡単に、最先端のユーザーインターフェースを作りやすい。

反対に、ライブラリであるがゆえに覚えることが多く、一からアプリケーションを構築するには労力が必要となる。

そこで登場したのが「Next.js」だ。

Next.jsとReactの一番の違いは、サーバー機能の有無。

Next.jsはサーバー機能を持っているが、Reactにはサーバー機能はない。

つまり、Next.jsは単体でWebアプリを動作させることができるが、Reactは別途サーバーを用意する必要がある。

また、Next.jsはルーティング、データフェッチ、レンダリング、統合といった一般的なアプリケーションの要件を備え、開発者にとっても、ユーザーにとっても、よりよい体験を得ることができる。

Reactのチュートリアル

特にReact公式チュートリアルはよくできていると感じた。

実際のコードが紹介されており、学習を進めやすいのはもちろんのこと、つまづきやすいポイントには補足が入っておりわかりやすい。

丁寧にコンポーネントや、props、stateといった基本を1つずつ説明してくれている。

驚いたのが、手元の開発環境がなくても、「CodeSandbox」と呼ばれるブラウザ上で使えるエディターつかってチュートリアルをサクサクとすすめることができること。

今回ぼくはローカル環境でチュートリアルをすすめているが、手元の開発環境の作り方でつまづいてしまうことを想定しているのは、チュートリアルとして非常に優しいと思う。

とくに、チュートリアルで実際につくるものが「三目並べ　(OXゲーム)」であり、身近で面白い。

どちらが勝利したかを判定したり、すべての手を記憶し、何手か前の盤面に戻すことができる機能がある。

Tutorial: Tic-Tac-Toe – React

こちらは日本語への翻訳版もある。

チュートリアル：三目並べ – React

JavaScriptとは

ReactはJavaScriptライブラリなので、JavaScriptについても説明したい。

JavaScriptとは簡単に言うと、Webサイトに動きをつけるプログラミング言語。

「アプリやブラウザで複雑な動作を表示させたい」場合や、「ユーザーに見やすい表示にしたい」というケースによく使われている。

WebサイトやWebアプリに広く使用されている。

Webサイト構築の他、システム開発や人工知能開発にもつかわれ、その汎用性の高さには定評がある。

昔（といっても1995年）に登場した言語ながら、JavaScriptは現代でも多くのエンジニアに利用される言語のひとつ。

ブラウザを動かすための言語としては、もっとも認知度が高い言語といっても過言ではない。

感想

これから、いろいろとお世話になるであろう公式のページ。

そこのチュートリアルはハンズオンで取り組むことができて、たのしい。

ただ、身についたかといわれるとまだまだで、学んだことのど忘れも激しく、毎回復習から始めているありさまだ。

何もソースコードをみずに、チュートリアルのコードを一から自分で作りあげれるようになるまで練習しようと思う。