2019年9月28日こんにちはカレイドです。みなさんはReactというJavaScriptフレームワークをご存知でしょうか。カレイドカレイドも勉強当初はReactなんて言葉聞いたことなかったなーReactとはJavaScriptのフレームワークで最近流行りが加速しつつあります。JavaScriptは知っているけれどReactは知らないっていう人もいるんじゃないでしょうか。今回はReactではどんなことが起こっているかを簡単に理解してもらいつつ、よくみるProgressBarを題材にコードを紹介していこうと思います。僕はCSSのプロじゃないですが練習すればこの位は弄りながら出来るようになります。2019Reactはこれを応用してWebサービス、Webアプリを作ることもできる、可能性に満ち溢れたものです。初学者がよくHTML/CSSを学んだ後によくReactに手を出してみたけど難しくてわからないという声をよく聞くので今日は実際にみなさんにコードをみてもらいながら簡単な解説をしていこうと思います。この講座ではある程度変数などの知識を知っていることが望ましいので不安な方は【プログラミング】HTML/CSSを学んだら次はJavaScript!最低限の知識を紹介しますJavaScriptからReactへ。filter関数、分割代入、スプレッド演算子】この辺の記事を読んでもらえるといいんじゃないかなと思います。こんなに簡単に動的に動かせるんだ!っていうのがわかってもらえたら嬉しいです。一応CSSで知っておくべきFlexBoxについても書いていますのでHTML/CSSちょっと勉強したよって人もチャレンジしてみるといいんじゃないかなと思います。Barはこちらカレイドの簡単な自己紹介です。就職までに会社に依存せずに自分で稼げる力を身に付けたいと思っている。2019/2月からプログラミング,ブログの勉強を開始2019/6月オリジナルアプリManehabiのリリース。ブログ収益のみで10万円達成こんな方におすすめHTML/CSSを学びFlexBoxを学んでいる方、同様にパーツを配置するか実践ベースで学びたいかた。?さて、簡単にですがReactの説明をしておこうと思います。Reactがない時代、Webアプリを読み込んで別のページへ行こうとする場合を考えましょう。イメージ通り今見ている紙芝居から別の紙芝居へと移動をすることになります。複数のHTMLファイルを行き来します。一枚の紙芝居のなかで少しだけ変化があったとしましょう。それを表現するためにはご存知の通り少しだけ変えた別の紙芝居を用意する必要があります。いうのを差分というのですが、この小さい差分を得るためにHTMLファイルを丸ごと差し替えるのは少し効率が悪いですよね。そこでSPAと呼ばれる技術があります。Application)と言われ一枚の紙芝居のアプリケーションをイメージしていただければOKです。カレイドえっ1枚の紙芝居で全ての紙芝居を表現するってことですか???その通りです。HTMLの力だけではこれを実現することができません。そこでJavaScriptの出番です。JavaScriptはよくHTML/CSSに動きをつけるものと言われていますが事実、HTMLの上に置かれた各々のパーツを自由に操る能力を持っています。残念ながら生のJSを勉強したことがある人はわかるかもしれませんが、めちゃくちゃ大変です。これならHTMLでページを複数作った方がいいと思えるほど楽なのです。それを解決したJavaScriptフレームワークこそがReactなのです。表示したいHTMLそれをどう動かしたかのロジックを書きます。CSSをどこに書くかはまだまだ意見や、プロジェクトによりけりですが、CSSファイルを直接書く。JSの中にそのまま書くこともできます。いうわけで、中身に入る前に一瞬だけ基本的なJSを見ておきましょう。わからない人も呪文だと思えばOKです。Barはこちらこちらのコードを参考に進めていきます。簡単なイメージとしては一つのファイルでlogicとviewの両方をデザインしていきます。id="root"></div>まずはHTMLファイルの記述ですが、おなじみのdivタグにidのrootが付与されています。このdivタグをJS側から操作します。JSの中身まずは先に一番下へいくと以下の記述があると思います。/>と呼ばれるコンポーネント(パーツ)をレンダリング(表示)することを意味します。わからねーよって方もいると思うので図で見てみましょう。/>は今からその中身を見ていきます。どのように自分が画面上に表示するかをこれから記述していきます。/>の中身を見ていきましょう。Appの中身は何かと言うと実は関数なんですね。詳しく言えばJSXと呼ばれるものをreturnする関数です。JSXとは何かわからない人もいると思いますが、ここではJavaScriptの世界でHTMLのような記述をしたものという風に捉えておけばよいでしょう。JavaScriptなので当然動的な処理も組み込むことができます。/>をレンダリング(お絵かきだと思ってください)する際にこの関数の中身を上から下へ処理して最後のreturnで最後の結果をまとめて一つのパーツ(JSXを返します)ここでの中身を図にするとこんな感じですね。}でくくってあげればその内部でJavaScript表記ができます。JavaScriptからReactへ。filter関数、分割代入、スプレッド演算子】でも解説しているので参考までに。setNow(e.target.value)}は新しい部分になると思います。Reactを勉強する上で知っておいてもらいたい二つの物を紹介したいと思います。onChangeの中にあるsetNow()の説明に必要になるものです。下の階層へ続けるようにどんどんピラミッドのように下へ階層を続けることができます。その際に下の階層へこの情報は使うから伝達しておきたいなーなんてものがあります。ピラミッドの上層から下層への情報伝達。そのデータを保持しておくオブジェクトがpropsになります。propsの役割propsは上の階層から下の階層への情報伝達を行ってくれます。ここで大事なのは読み取り(Read)はできます。書き変え(write)はできません。propsはどの階層までもデータを持っていくことが当然できます。10階層上の社長から新入社員まで情報を伝達することも出来ます。勘違いとしてあるのがそのデータを一番下で書き換えたら本来は全ての階層でデータを書き換えることが本来の挙動ですが、それは書き換えの権限が今はないようにそのままでは変更は不可能です。上司からデータをもらって例え間違いを発見したとしてもそのデータを直接書き換える権限は持っていないと思ってもらえればOKです。下位の階層から値を書き換えて、上位の値も全て書き換えてしまうことは出来ないのでしょうか。厳密には上位で作っておいた関数を下位の階層で発火させるのです。そのためにstateと呼ばれる存在が必要になります。存在について説明をします。カレイド値を保持したり書き換えるのは普通の変数でもできない?はい。なんのために存在するかというと、単に値を書き換えるだけでは内部では書き換えたことを知っていてもViewにはその書き換えは反映されません。再レンダリングをかける必要があります。propsでも説明したように下の階層でも変更権限をもたせたい場合、この書き換えと再レンダリングを発火させるsetState()を含む関数を下の階層へ送り込むことで下の階層から発火させて、変更自体は一番上の階層で起こっているような状況を作り出す必要があります。stateには書き換えが起こったら再レンダリングを起こしたいもの、もう少し先勉強するともっとグローバルにデータを持っておきたい物にはstateを利用してデータの格納を行っていきます。今回は簡単なstateだけ見て次回のアプリで複雑なstateを見る予定です。setNow]=React.useState()がstateの中身になります。順番に見ていきましょう。React.useState()React.useState()を使うと返り値として二つの値が配列として帰ってきます。いうのは前回の記事で説明しました。1つわかれば他もわかりますので安心してくださいね。setText]=React.useState("")まず、useState()関数で引数を取ることができます。その引数はいわゆる初期値と言われるものですね。今回はtextに""(空文字)が格納されることになります。2番目にsetTextという名前をつけています。このtextはProgressBarでお見せしたようにNowLoding...に相当する部分です。ユーザーの入力に対してその都度画面のレンダリングが変更されていることが、codepen上で確認できると思います。ユーザの入力に対して変更を適用させるのがsetText()と呼ばれる関数になります。setText()は関数であり、引数に変更内容を入れることで値を更新して再レンダリングを行います。理解することが難しいと思いますのでもう一度おさらいです。""が初期値)React.useState("")は配列を返し、一つ目には値を格納する変数、二つ目には値を更新するための関数を返す。text="hogehoge"じゃだめなの?という質問に対してはcodepen場で試してみるとわかるように結論からいうとダメ。now,setNowになります。通常第二引数にはsetHogeのように前にsetをつけるのが慣習です。これでようやくonChange()の説明ができますね。onChangeの役割inputのプロパティにはonChangeというプロパティが存在します。onClickなどonがつくものは基本的には〜〜したときに発火をします。setNow(e.target.value)}onChangeはinputの中身を書き換えた時に発火するものです。いう引数に代入しています。myEventでもなんでもOKです。e.target.valueとして今の値をsetNowに渡すことで値を更新して再レンダリングを行なっています。このe.target.valueはよく使うので丸暗記で大丈夫ですね。説明が長くなりましたがこの辺りの理解が難しい部分だと思いますので実際に手を動かしてみて試すのが1番の近道だと思います。/>の部分でもう一つのpropsが活躍をすることになります。中身それではいよいよ最後の大元であるProgressBarについてみていこうと思います。内部をみてみるとpropsという引数を受け取っていることがわかると思います。props;propsの中に先ほど送り込んだnow,length,textというプロパティが含まれていることがわかると思います。先ほど説明したようにReactでは下位のコンポーネントへと情報を送り込むことができます。propsはオブジェクトであり、この場合だとProgressBarの内部でnow,length,textというプロパティでその内部でもともとAppの内部で使っていたnow,length,textという変数を送り込みます。barがついている方はProgressBarの中での変数名です。appがついている方はApp側で定義されている変数名ということになります。}=propsというように取り出せます。中身のロジックを読み解く今回のテーマの一つでもあるようにProgressBarそのままを表示してくれる大元のコンポです。Reactでは自分が定義したコンポーネントには大文字から始める制約がついています。/>は小文字から始まるのでもともとHTMLでもあるinputと全く同じです。/>なんて書いてあればそれはどこかに別に定義されたコンポーネントということになりますね!importされている部分を辿ればそのコンポへといけるはずです。100);ここで全体の進行状況を計算して、percentに格納します。各スタイルはclassNameというところにそのまま当てるだけです。HTMLで定義されるclassと区別するために別の名前がついていると理解していただければOKです。Loading..."}</p>)}ここでしょう。いうのはじっくり分解して理解するに限ります。全体を区切ってみると三項演算子がキーになっているとわかります。B}のような構造であるとわかります。内容を解釈すればpercentが100であればAをそうでなければBを実行することになります。Loading...'}</p>がきます。Loadingが表示されるという解釈ができるんでしたね。この辺の内容は過去記事で紹介しているので要チェックです。JavaScriptからReactへ。</div>の部分では特殊な書き方をしていますが、バッククォーツで挟み込むことで複数の変数を入れることができます。}の中にかけばOKです。次回は複雑なstateを見てみよういかがでしたでしょうか。実際に見ているprogressBarの中身を見てみて、難しそうだなと思うか意外と自分でも理解できそうと思うか結構分かれると思いますが、大事なのはどんな機能も崩して考えると小さなロジックから生まれているというところです。一個一個丁寧にその機能を見ると今回説明したようなpropsとstateなどをしっかり使いこなして一つの機能が出来上がっています。どんな言語を学ぶにしてもその言語で使う必須スキルの用途を使いこなせることが大事なんだなーと改めて思います。最新記事カレイド1994年生まれ。埼玉出身→20卒で最短で外資ITへ内定し来年4月入社予定です。4ヶ月本気でプログラミングを独学し、オリジナルアプリManehabiをリリース。独学プログラミングの進めや、自分の就活時代の攻略法や学びについてまとめています。コメントをキャンセルメールアドレスが公開されることはありません。プログラミングをUdemyで学ぶUdemyのPython系の講座がセールでこれでもかというぐらいお得なのでまとめてみた。こんにちはカレイドです。今回はオンライン動画でプログラミングを学習できるサイトUdemyについて紹介します。...プログラミング【Progate】HTML/CSSを勉強して自分なりに必須のコマンドをまとめてみたこんにちはカレイドです。最近は就職に向けてwebデザインの勉強を本格的に進めています。そこで現在はprogateというプログラミング勉強サイトを使ってコツコツと勉強を進めています。filter関数、分割代入、スプレッド演算子】NEXT【ブログ運営】8月の収益報告とやったこと、目標。【Udemy】50講座以上取った筆者がおすすめ英語字幕講座と勉強法を解説してみる.評判のいいPyQに登録して実際に体験してみたのでレビューしてみる。2020年1月6日カレイド1994年生まれ。埼玉出身→20卒で最短で外資ITへ内定し来年4月入社予定です。4ヶ月本気でプログラミングを独学し、オリジナルアプリManehabiをリリース。独学プログラミングの進めや、自分の就活時代の攻略法や学びについてまとめています。