Reactの公式チュートリアルを見てみました
Reactの公式チュートリアルを見てみました
2022年1月31日
React の公式チュートリアルを見てみました
Web 開発のショートカットとして、フロントエンドのフレームワークのチュートリアルをやってみると言う学習方法を紹介しました。この記事では実際に React のチュートリアルを見てみました。
React のチュートリアル
リアクトの公式サイトにチュートリアルが紹介されています。
このチュートリアルは、「tic-tac-toe」と言うゲームです。日本だと「🟡 ❌」という感じで、縦・ 横・斜めのいずれかで三つ揃えるゲームです。
これを順番に従って作っていくと、簡単な React のアプリが作れる様になっています。 まずは、React を使うための設定から始まって、React を使ったコードの書き方を解説しています。
リアクトの公式サイトにチュートリアルが紹介されています。
このチュートリアルは、「tic-tac-toe」と言うゲームです。日本だと「🟡 ❌」という感じで、縦・ 横・斜めのいずれかで三つ揃えるゲームです。
これを順番に従って作っていくと、簡単な React のアプリが作れる様になっています。 まずは、React を使うための設定から始まって、React を使ったコードの書き方を解説しています。
React の簡単な仕組み
最初に、簡単に React とは何かを書いておくと、「Web ブラウザ上で動くアプリを簡単に作るための仕組み」です。
HTML と CSS は Web ページを書くための言語です。一方で Javascript は Web ブラウザで動かすプログラムを書くためのプログラミング言語です。もちろん、Javascript を使って、 Web ブラウザの表示も作る事ができますが、HTML で直接書くよりわかりにくいコードになってしまいます。
そこで、HTML の記述を Javascript の中に組み込む様な形で使えるようにしたのが React がやっている事です。HTML に似た記述で「JSX」と呼ばれています。
JSX は HTML に非常に似た記述方法なので、HTML を学んだ上で学習した方が良いというのが通常の学習方法です。しかし、逆に考えると最初から JSX をするのと、HTML から学習するのと余り変わらないという事です。これがこの方法のポイントです。
本来の Javascript のプログラムとは若干違いますが、基本的な書き方は同じです。 このチュートリアルでは、Javascript の「クラス（class）」をベースにした書き方が紹介されています。このクラスが、Web ページの表示に使われる「部品」に相当する物です。このクラスの中に、「render()」というメソッド（method）の中には、この HTML をベースとした記述、JSX を書く事ができます。
この部品を寄せ集め他のが React アプリという事です！
最初に、簡単に React とは何かを書いておくと、「Web ブラウザ上で動くアプリを簡単に作るための仕組み」です。
HTML と CSS は Web ページを書くための言語です。一方で Javascript は Web ブラウザで動かすプログラムを書くためのプログラミング言語です。もちろん、Javascript を使って、 Web ブラウザの表示も作る事ができますが、HTML で直接書くよりわかりにくいコードになってしまいます。
そこで、HTML の記述を Javascript の中に組み込む様な形で使えるようにしたのが React がやっている事です。HTML に似た記述で「JSX」と呼ばれています。
JSX は HTML に非常に似た記述方法なので、HTML を学んだ上で学習した方が良いというのが通常の学習方法です。しかし、逆に考えると最初から JSX をするのと、HTML から学習するのと余り変わらないという事です。これがこの方法のポイントです。
本来の Javascript のプログラムとは若干違いますが、基本的な書き方は同じです。 このチュートリアルでは、Javascript の「クラス（class）」をベースにした書き方が紹介されています。このクラスが、Web ページの表示に使われる「部品」に相当する物です。このクラスの中に、「render()」というメソッド（method）の中には、この HTML をベースとした記述、JSX を書く事ができます。
この部品を寄せ集め他のが React アプリという事です！
訳がわかりませんよね？
ここで色々な言葉が出てきました！ 「JSX」、「クラス」、「メソッド」など色々な聞いたことのない言葉が出てきています。 当然初めて学習する場合には、全く訳がわからないと思います。
これが、この方法を普通の人は使わない理由です。
でも、まずは「わからない事を受け入れてください」、つまり、わからなくても良いのです！
最初は、コードを写すだけで十分です。とにかく、チュートリアルの説明通りにコードを書いて「動かす」事を優先します。「わからない」を受け入れると、まずは真似をすることに集中できます。
最初のステップは、「動かせれば」満点です。
次のステップは、動いても動かなくても、知らない言葉を調べてください。 本でも、インターネットでもいいです。そうして、まずは少し知識を増やしてください。
チュートリアルには開発ツールの使い方なども説明されています。
部品の間でどの様にデータをやり取りするかも説明されています。言葉と一緒にそうした解説をとりあえずは読んでみてください。
このチュートリアルは、HTML(JSX)と Javascript が中心でほとんど CSS には触れていません。
簡単なプログラムの機能の実現には、CSS はなくてもとりあえずは作れるという事です。
ここで大切なのは、真似で良いので、「何とか動かす」事です。
ここで色々な言葉が出てきました！ 「JSX」、「クラス」、「メソッド」など色々な聞いたことのない言葉が出てきています。 当然初めて学習する場合には、全く訳がわからないと思います。
これが、この方法を普通の人は使わない理由です。
でも、まずは「わからない事を受け入れてください」、つまり、わからなくても良いのです！
最初は、コードを写すだけで十分です。とにかく、チュートリアルの説明通りにコードを書いて「動かす」事を優先します。「わからない」を受け入れると、まずは真似をすることに集中できます。
最初のステップは、「動かせれば」満点です。
次のステップは、動いても動かなくても、知らない言葉を調べてください。 本でも、インターネットでもいいです。そうして、まずは少し知識を増やしてください。
チュートリアルには開発ツールの使い方なども説明されています。
部品の間でどの様にデータをやり取りするかも説明されています。言葉と一緒にそうした解説をとりあえずは読んでみてください。
このチュートリアルは、HTML(JSX)と Javascript が中心でほとんど CSS には触れていません。
簡単なプログラムの機能の実現には、CSS はなくてもとりあえずは作れるという事です。
ここで大切なのは、真似で良いので、「何とか動かす」事です。
動かない場合はどうするか？
真似をして写せば良いと言っても、最初は動かない場合も多くなります。 そんな時はどうするか？
殆どの人が間違いを探そうとすると思いますが、「わからない」を前提で作っているので間違いを探すのは簡単ではありません。そこで間違いを探さない方法を使います。
それは、「最初からやり直す」です。
やる事は１回目と同じです。頑張って「正確」に写します。そして、わからない言葉をまた本やインターネットで調べます。とりあえず最後までやってみます。うまくいかなかったらまた最初からやります。
５回やっても動かない場合は、誰かわかる人に「聞いて」ください。助けを求めます。 ５回繰り返してうまくいかない場合は、このチュートリアルの説明では動くように作れないという事です。 これは、チュートリアルの説明が悪いわけでも、あなた自身が悪いわけでもありません。単に、あなたの今の状態に合った説明がされていないという事です。つまり、書いてある事以外に必要な事があるという事です。これは、書かなくてもわかる人と、書かないとわからない人がいるという事です。料理のレシピと同じで、使う人によってどこまで詳しく書くかが変わってくるからです。
５回やって動かない場合は、何か抜けているという事ですが、それを初心者が自分で見つけるのは難しいのでわかる人に聞くという事です。わかる人が周りにいなくても、今はインターネット上で聞く場もありますし、似たような問題を抱えている人もたくさんいるので、似た様な質問をしている人もいるはずです。
それでも、解決しない場合は、別のチュートリアルを探してください。簡単な物があると思います。 最初は、YouTube のような動画で説明している物の方が、間を映像でカバーできる分わかりやすいかもしれません。
これを繰り返すと、あるアプリを作るのに必要な流れがだんだんわかってきます。 その部分を集中的に学習することで、本当に必要な HTML や Javascript の基本がわかってきます。
真似をして写せば良いと言っても、最初は動かない場合も多くなります。 そんな時はどうするか？
殆どの人が間違いを探そうとすると思いますが、「わからない」を前提で作っているので間違いを探すのは簡単ではありません。そこで間違いを探さない方法を使います。
それは、「最初からやり直す」です。
やる事は１回目と同じです。頑張って「正確」に写します。そして、わからない言葉をまた本やインターネットで調べます。とりあえず最後までやってみます。うまくいかなかったらまた最初からやります。
５回やっても動かない場合は、誰かわかる人に「聞いて」ください。助けを求めます。 ５回繰り返してうまくいかない場合は、このチュートリアルの説明では動くように作れないという事です。 これは、チュートリアルの説明が悪いわけでも、あなた自身が悪いわけでもありません。単に、あなたの今の状態に合った説明がされていないという事です。つまり、書いてある事以外に必要な事があるという事です。これは、書かなくてもわかる人と、書かないとわからない人がいるという事です。料理のレシピと同じで、使う人によってどこまで詳しく書くかが変わってくるからです。
５回やって動かない場合は、何か抜けているという事ですが、それを初心者が自分で見つけるのは難しいのでわかる人に聞くという事です。わかる人が周りにいなくても、今はインターネット上で聞く場もありますし、似たような問題を抱えている人もたくさんいるので、似た様な質問をしている人もいるはずです。
それでも、解決しない場合は、別のチュートリアルを探してください。簡単な物があると思います。 最初は、YouTube のような動画で説明している物の方が、間を映像でカバーできる分わかりやすいかもしれません。
これを繰り返すと、あるアプリを作るのに必要な流れがだんだんわかってきます。 その部分を集中的に学習することで、本当に必要な HTML や Javascript の基本がわかってきます。
まとめ
この記事では、Web 開発の効率的な学習法の具体例として、React の公式サイトのチュートリアルをベースに進め方のコツを紹介してみました。技術的な詳細はチュートリアルで解説されているのでここでは触れませんが、「わからないのを受け入れて」「徹底的に真似をする」というのが基本です。動かない場合でも、間違い探しをするのではなく、最初から同じことをやるというのがコツです。その過程でわからない言葉やコードについては、本やインターネットで調べて、知識を増やします。
実際にアプリで使われているコードの書き方なので、実践的で、少しコードを変えると応用も可能です。 動いたら、コードを少し変えてみてどうなるかを見ながら体験すると理解は深まります。この例では、ボタンを正方形にしていますが、これを長方形にしてみるとか、色を変えてみるというのを調べながらやるとより効果的です。
この記事では、Web 開発の効率的な学習法の具体例として、React の公式サイトのチュートリアルをベースに進め方のコツを紹介してみました。技術的な詳細はチュートリアルで解説されているのでここでは触れませんが、「わからないのを受け入れて」「徹底的に真似をする」というのが基本です。動かない場合でも、間違い探しをするのではなく、最初から同じことをやるというのがコツです。その過程でわからない言葉やコードについては、本やインターネットで調べて、知識を増やします。
実際にアプリで使われているコードの書き方なので、実践的で、少しコードを変えると応用も可能です。 動いたら、コードを少し変えてみてどうなるかを見ながら体験すると理解は深まります。この例では、ボタンを正方形にしていますが、これを長方形にしてみるとか、色を変えてみるというのを調べながらやるとより効果的です。
コメント
コメントを投稿