今日はカレイドです。
前回の記事では本当に初期の初期。これから一生付き合っていくことになるである基本部分についてのJavaScriptをご紹介しました。
【プログラミング】HTML/CSSを学んだら次はJavaScript！最低限の知識を紹介します
今回は何を紹介するかというと、これからJavaScriptのフレームワークを勉強しようと思っている方向けに少し高度なJSの基礎をご紹介しようと思います。
具体的には
- Reactでよく使う map関数などの高度な構文
- 三項演算子 ( 条件 ? A : B )
- 論理演算子 ( && , || の応用。
の３点を今日は理解していただければと思います。
それでは早速行きましょう！
プラスαで知っておくべき一歩上のJavaScript
実際に前回まででほとんど全ての構文の勉強は終わりました。しかし、フレームワークを学ぶときに頻繁に使う構文は知っておいた方が書く分量の削減に繋がる上、ほとんど当たり前のように使われるのでしっかりと押さえておきましょう。
私が使っているReactなどのフレームワークをこの先に勉強するのであれば絶対にみることになる部分なので押さえておきましょう。
1. アロー関数を使いこなせ！ 配列を素早く扱うmap関数
まずは関数上級編です。
前回の記事でも軽く触れましたが最近のJSではあまりfunctionという書き方を見なくなりました。
JQueryなんかはfunction形式でないとうまく動かないみたいですが、よほどバージョンの問題がない限りReactではアロー関数を使うことが多いです。
そしてJavaScriptでは配列をより簡単に、他の人がコードを読んだときにすぐに理解できるような構文が用意されています。
今回はその中でも一番使うmap関数についてご紹介をします。
他にもたくさんの関数があるのですがここにかなり詳しく解説が載っています。全てを紹介すると長くなってしまうのでここではmap関数のみに留めておきます。
map関数を理解できれば他のもすんなり理解できると思うのでまずは一つだけでいいのでどのような仕組みかを理解しましょう。
配列のすべての要素に処理をして "配列を返す" map関数
map関数は配列それぞれの要素に、処理を加えて”配列を返します”。
const numbers = [2, 4, 3, 1, 6];
const newNumbers=numbers.map(number => {
return number * 2
})
// numbers=[2,4,3,1,6]
// newNumbers=[4,8,6,2,12]
中身の辿り方はnumbersという配列の中身を一つずつ取り出しそれを二倍して新しい配列newNumbersに格納していく。
という意味になります。
もう一つ例を
const animals = ["dog", "cat", "bird"];
const newAnimals = animals.map(animal => {
return animal + "man";
});
console.log(newAnimals); // ["dogman", "catman", "birdman"]
このmap関数のいいところは元の配列をいじらずに新しい配列を作成することができるところです。
何が嬉しいの？と思うかもしれませんがこれはReactなどで、もう少し実用的な部分がでてきたときにわかるので頭の片隅においておくだけでOKです。
とりあえずここでは配列を辿って処理を加えて新しい別の配列を返す。ということを覚えていればOKです。
続いては少しReactでのコードを見てみましょう。ざっくり感覚がわかればOKです。
import React from "react";
const App=() =>{
const todoList = [
{
id: 1,
title: "title1",
todo: "action1"
},
{
id: 2,
title: "title2",
todo: "action2"
},
{
id: 3,
title: "title3",
todo: "action3"
},
{
id: 4,
title: "title4",
todo: "action4"
}
];
return (
<div className="App">
{todoList.map(todo => {
return (
<div
id={todo.id}
style={{
border: "1px solid black",
margin: "5px"
}}
>
<p>{todo.title}</p>
<p>{todo.todo}</p>
</div>
);
})}
</div>
);
}
export default App;
ここでは実際のコードをそのまま出してみました。todoListが与えられている配列で、中身はobjectの配列になっています。
このままではまさしく機械にとっては優しいけれど人間には優しくないので人間にとってみやすい形（View）へと変換をしてあげます。
この時に便利なのがmap関数なんですね。
少し難しいかもしれませんがReactではこのreturnの中に記述されているコードが画面上に表示されると思ってください。
そしてHTMLのような表記の中にJavascriptのコードを書きたい時には{}でくくってあげると変換されます。
ちょうどこの部分ですね。
{todoList.map(todo => {
return (
<div
id={todo.id}
style={{
border: "1px solid black",
margin: "5px"
}}
>
<p>{todo.title}</p>
<p>{todo.todo}</p>
</div>
);
})}
先ほど勉強したmap関数を使っています。そしてその内部で新たにどんな表示をしたいかを書いていきます。みなさんがよく勉強しているようなhtmlをほぼそのままかけます。
id={todo.id}
<p>{todo.title}</p>
<p>{todo.todo}</p>
このような部分でまさに取り出したtodoのそれぞれの要素にアクセスしているのがわかりますね。
配列に入っている同じようなオブジェクトをまとめて表示したりするのに非常に便利ですね。例えばTwitterのツイート部分なんてまさにこれで表現できそうじゃないですか？
こうやって世の中のサービスで同じような構造を持つものを探すのもおもしろいですね。
三項演算子( 条件 ? A (true時): B(false時) )
続いては三項演算子です。これはif文のスマートな書き方になります。
const isLoggedIn = true
const condition = isLoggedIn ? '"user is online' : 'user is offline'
例えば次のようにユーザーがログインしているかどうかのフラグ(isLoggedIn)があるとしましょう。次の文で条件がtrueなら最初の"user is online"falseなら"user is offline"が入ることになります。
これをif文で書くと次のような長ったらしい文になります。
const isLoggedIn = true
let condition
if (isLoggedIn) {
condition = 'user is online'
} else {
condition = 'user is offline'
}
とても長いですね。見比べてみるとかなりわかりやすいんじゃないかなと思います。
使い慣れれば三項演算子をみただけで何が起こるか予想できます。
A && B (AかつB以外の用途）
もともとみなさんがこの論理演算子 && を見るのは大抵 AかつBのようにif文の中でだと思います。
ところが、Reactではこの使い方の他にもう少し重要な使い方があります。
それが A (true相当) ならば B のような書き方になります。
JavaScriptを学んですぐに出会うことはないでしょうが、いずれフレームワークを学ぶときに必ず出会います。
import React from "react"; const App = props => { const error = props.error; const todoList = [ { id: 1, title: "title1", todo: "action1" }, { id: 2, title: "title2", todo: "action2" }, { id: 3, title: "title3", todo: "action3" }, { id: 4, title: "title4", todo: "action4" } ]; return ( <div className="App"> {error && <div>{error}</div>} {todoList.map(todo => { return ( <div id={todo.id} style={{ border: "1px solid black", margin: "5px" }} > <p>{todo.title}</p> <p>{todo.todo}</p> </div> ); })} </div> ); }; export default App;const App = props => {
const error=props.error // errorには エラーメッセージ か undefineが入ってる。
{error && <div>{error}</div>}
先ほどのコードの中に３行ほど付け加えました。
Reactでは別のファイルからpropsと呼ばれるオブジェクトを送り込むことができます。いわば、上司しか知らない情報が部下にも伝えることができます。
errorにはもしも何か間違いがあってエラー文を表示したいときにエラーメッセージが入ります。もしくは何も問題がないときには定義されただけで何も入っていません。つまりundefinedが入ります。
つまり時と場合によって入っている中身が異なるというわけですね。
この文がやりたいことは簡単に言えばerrorがあれば表示をしたい。errorがなければ何もしない。ということになりますね。
つまり
if(error){
error文を表示( return <div> {error} </div>)
}else{
何もしない( return )
}
if文で書こうとするとこうなります。Reactでこう書いてから表示することも可能ですが、実は思っているよりめんどくさい手順を踏む必要があります。
{error && <div>{error}</div>}
と比べると明らかにめんどくさそうだなと思ってもらえればOKです。
基本的な使い方のイメージとしてはAが存在すれば Bを実行する！というイメージを持っていただければOKです。
もう一つ例を示しておきましょう
const profile= userProfile
return profile.email && <div> {profile.email} </div>
さて、何をするかイメージをつかめましたか？
私はuserProfileについては何も情報を与えていません。でも感の鋭い人ならああ、きっとオブジェクトなんだろうなと思ってくれるでしょう。
ところが、オブジェクトまではわかっても、中に何が入っているかまではわかりませんね。
なのでただ単に
return <div> {profile.email} </div>
としてしまうと、もしもprofileにemailというプロパティがなかった場合どうなるでしょうか。そうです。実行時にエラーが吐かれます。
なので先ほどのようにprofileにemailはあるよね？とチェックをしてあげればもしなければ右の文は実行されませんから安全に表示できるというわけですね。
ちょっと難しかったと思いますし、実際にReactを勉強して使っていく中で理解が深まる部分なのでいざ出てきたときに改めて見返してみると案外すんなり理解できると思います。
上級編
Reactを勉強しているときによくつまづくのがここです。
実は自分ではprofileにemailがあったと思っていて && 使わなかったのにエラーを吐かれた！という場合大抵非同期でそのデータを取得している場合が多いです。
非同期である場合、サーバーからデータを取ってくるまでの間ほんの僅かですがprofileには値が入らず未定義(undefine)状態になります。
このときにレンダリングをしようとして、まだ値が入っていないのにプロパティにアクセスしようとしてエラーを吐かれることがあります。
非同期処理は && と覚えておきましょう。
A || B （Aがtrueに相当するものであればAを,falseに相当するものであればBを実行）
続いては AまたはBに匹敵するものですね。
これも同様に他の使い方が存在します、
先ほどは存在しなければ何もしないというイメージでしたが、
今回は存在しなければこっちを使うよというイメージですね。
実際には
const username= yourname || "author"
状況としてはusernameをセットしようという状態です。
そこにyournameというすでにある変数が登場していますね。つまり文の意味を先ほどの説明に当てはめるなら
yournameが存在しなければ username="author" という解釈ができます。
逆にyournameが存在すれば username=yourname が成立することになります。
改めてイメージするなら変数の中身が存在しない時のデフォルト値設定みたいなイメージですね。
こちらは && に比べると出現頻度は少ないですが知っておいて損はないので覚えておきましょう。
最後に 配列操作、オブジェクト操作はしっかり身につけよう。
今回でJavascriptからReactへステップアップするための基礎部分を勉強しました。あといくつかあるのですが次回の記事で紹介します。
ここまでくればだいぶ書いてある文を理解できるようになってくると思います。
特にmap関数、 && の使い方はReactを勉強する上で必須になるので必ずマスターしておきましょう。