JavaScriptからReactへ。>プログラミングJavaScriptからReactへ。前回の記事では本当に初期の初期。これから一生付き合っていくことになるである基本部分についてのJavaScriptをご紹介しました。【プログラミング】HTML/CSSを学んだら次はJavaScript!最低限の知識を紹介します今回は何を紹介するかというと、これからJavaScriptのフレームワークを勉強しようと思っている方向けに少し高度なJSの基礎をご紹介しようと思います。3点を今日は理解していただければと思います。それでは早速行きましょう!プラスαで知っておくべき一歩上のJavaScript実際に前回まででほとんど全ての構文の勉強は終わりました。フレームワークを学ぶときに頻繁に使う構文は知っておいた方が書く分量の削減に繋がる上、ほとんど当たり前のように使われるのでしっかりと押さえておきましょう。私が使っているReactなどのフレームワークをこの先に勉強するのであれば絶対にみることになる部分なので押さえておきましょう。配列を素早く扱うmap関数まずは関数上級編です。前回の記事でも軽く触れましたが最近のJSではあまりfunctionという書き方を見なくなりました。JQueryなんかはfunction形式でないとうまく動かないみたいですが、よほどバージョンの問題がない限りReactではアロー関数を使うことが多いです。JavaScriptでは配列をより簡単に、他の人がコードを読んだときにすぐに理解できるような構文が用意されています。今回はその中でも一番使うmap関数についてご紹介をします。他にもたくさんの関数があるのですがここにかなり詳しく解説が載っています。全てを紹介すると長くなってしまうのでここではmap関数のみに留めておきます。使う高度な構文map関数を理解できれば他のもすんなり理解できると思うのでまずは一つだけでいいのでどのような仕組みかを理解しましょう。map関数map関数は配列それぞれの要素に、処理を加えて”配列を返します”。newNumbers=[4,8,6,2,12]中身の辿り方はnumbersという配列の中身を一つずつ取り出しそれを二倍して新しい配列newNumbersに格納していく。"birdman"]このmap関数のいいところは元の配列をいじらずに新しい配列を作成することができるところです。何が嬉しいの?と思うかもしれませんがこれはReactなどで、もう少し実用的な部分がでてきたときにわかるので頭の片隅においておくだけでOKです。ここでは配列を辿って処理を加えて新しい別の配列を返す。いうことを覚えていればOKです。続いては少しReactでのコードを見てみましょう。感覚がわかればOKです。App;ここでは実際のコードをそのまま出してみました。todoListが与えられている配列で、中身はobjectの配列になっています。このままではまさしく機械にとっては優しいけれど人間には優しくないので人間にとってみやすい形(View)へと変換をしてあげます。この時に便利なのがmap関数なんですね。難しいかもしれませんがReactではこのreturnの中に記述されているコードが画面上に表示されると思ってください。HTMLのような表記の中にJavascriptのコードを書きたい時には{}でくくってあげると変換されます。})}先ほど勉強したmap関数を使っています。その内部で新たにどんな表示をしたいかを書いていきます。みなさんがよく勉強しているようなhtmlをほぼそのままかけます。id={todo.id}<p>{todo.title}</p><p>{todo.todo}</p>このような部分でまさに取り出したtodoのそれぞれの要素にアクセスしているのがわかりますね。配列に入っている同じようなオブジェクトをまとめて表示したりするのに非常に便利ですね。Twitterのツイート部分なんてまさにこれで表現できそうじゃないですか?こうやって世の中のサービスで同じような構造を持つものを探すのもおもしろいですね。)続いては三項演算子です。これはif文のスマートな書き方になります。offline'例えば次のようにユーザーがログインしているかどうかのフラグ(isLoggedIn)があるとしましょう。offline"が入ることになります。これをif文で書くと次のような長ったらしい文になります。見比べてみるとかなりわかりやすいんじゃないかなと思います。使い慣れれば三項演算子をみただけで何が起こるか予想できます。AかつBのようにif文の中でだと思います。ところが、Reactではこの使い方の他にもう少し重要な使い方があります。ような書き方になります。JavaScriptを学んですぐに出会うことはないでしょうが、いずれフレームワークを学ぶときに必ず出会います。undefineが入ってる。<div>{error}</div>}先ほどのコードの中に3行ほど付け加えました。Reactでは別のファイルからpropsと呼ばれるオブジェクトを送り込むことができます。上司しか知らない情報が部下にも伝えることができます。errorにはもしも何か間違いがあってエラー文を表示したいときにエラーメッセージが入ります。何も問題がないときには定義されただけで何も入っていません。undefinedが入ります。時と場合によって入っている中身が異なるというわけですね。この文がやりたいことは簡単に言えばerrorがあれば表示をしたい。errorがなければ何もしない。いうことになりますね。)}if文で書こうとするとこうなります。Reactでこう書いてから表示することも可能ですが、実は思っているよりめんどくさい手順を踏む必要があります。<div>{error}</div>}と比べると明らかにめんどくさそうだなと思ってもらえればOKです。Bを実行する!というイメージを持っていただければOKです。</div>さて、何をするかイメージをつかめましたか?私はuserProfileについては何も情報を与えていません。感の鋭い人ならああ、きっとオブジェクトなんだろうなと思ってくれるでしょう。ところが、オブジェクトまではわかっても、中に何が入っているかまではわかりませんね。</div>としてしまうと、もしもprofileにemailというプロパティがなかった場合どうなるでしょうか。実行時にエラーが吐かれます。先ほどのようにprofileにemailはあるよね?とチェックをしてあげればもしなければ右の文は実行されませんから安全に表示できるというわけですね。難しかったと思いますし、実際にReactを勉強して使っていく中で理解が深まる部分なのでいざ出てきたときに改めて見返してみると案外すんなり理解できると思います。上級編Reactを勉強しているときによくつまづくのがここです。使わなかったのにエラーを吐かれた!という場合大抵非同期でそのデータを取得している場合が多いです。非同期である場合、サーバーからデータを取ってくるまでの間ほんの僅かですがprofileには値が入らず未定義(undefine)状態になります。このときにレンダリングをしようとして、まだ値が入っていないのにプロパティにアクセスしようとしてエラーを吐かれることがあります。AまたはBに匹敵するものですね。今回は存在しなければこっちを使うよというイメージですね。"author"状況としてはusernameをセットしようという状態です。そこにyournameというすでにある変数が登場していますね。成立することになります。イメージするなら変数の中身が存在しない時のデフォルト値設定みたいなイメージですね。比べると出現頻度は少ないですが知っておいて損はないので覚えておきましょう。配列操作、オブジェクト操作はしっかり身につけよう。今回でJavascriptからReactへステップアップするための基礎部分を勉強しました。あといくつかあるのですが次回の記事で紹介します。ここまでくればだいぶ書いてある文を理解できるようになってくると思います。使い方はReactを勉強する上で必須になるので必ずマスターしておきましょう。最新記事カレイド1994年生まれ。埼玉出身→20卒で最短で外資ITへ内定し来年4月入社予定です。4ヶ月本気でプログラミングを独学し、オリジナルアプリManehabiをリリース。独学プログラミングの進めや、自分の就活時代の攻略法や学びについてまとめています。コメントをキャンセルメールアドレスが公開されることはありません。プログラミングをUdemyで学ぶ【Udemy】セールを活用して、デメリットのないプログラミング勉強法こんにちはカレイドです。一言でいうなら次世代のオンラインプログラミング学習サイトです。プログラミングをUdemyで学ぶ【Udemy】セールを利用して実践的なアプリを構築できるおすすめ講座【中級編】こんにちはカレイドです。【Udemy】50講座以上取った筆者がおすすめ英語字幕講座と勉強法を解説してみる.評判のいいPyQに登録して実際に体験してみたのでレビューしてみる。2020年1月6日カレイド1994年生まれ。埼玉出身→20卒で最短で外資ITへ内定し来年4月入社予定です。4ヶ月本気でプログラミングを独学し、オリジナルアプリManehabiをリリース。独学プログラミングの進めや、自分の就活時代の攻略法や学びについてまとめています。