こんにちはカレイドです。
HTML/CSSをProgateで学んで次は何をしようかなって思う人がたくさんいるんじゃないでしょうか。
そんな中で次に学ぶべきおすすめ言語としてJavaScriptがあるのですが、これの触り部分を知っておくだけでもいろんな記事が読みやすくなると思ったので今回記事を書くことにしました。
特に今回紹介する部分はどの言語に進むとしても最初に学ぶ部分なので言語によらず役立つこと間違いなしです。
そして、ところどころに仕掛けをしているので是非、初心者の方は最後まで読んでみてください。
JavaScriptとは？
JavaScriptはプログラミング言語のひとつです。主にWebサイトやWebアプリを開発するために使われています。
私のサイトでよく登場するプログラミング言語は HTML, CSS, JavaScript React,ReactNative,Node.jsあたりが挙げられますがそのうちなんと
React,ReactNative,Node.jsは実はJavaScriptからできています（正確にはフレームワークの一種）。
つまり、JavaScriptで知っておくべきことを知っておくだけで、だいぶ記事が読みやすくなります。
特に最近JavaScriptはかなり注目を浴びている言語なのです。
そして、私が初めて作ったManehabiもJavaScriptをメインに作られています。
というわけでこれからプログラミング言語を勉強したい！
HTML/CSSは勉強したけれどもう一歩踏み込みたいという方向けに今回は記事を書いていきます。
ちなみに筆者がProgateを学んだ後に使った講座はこちらになります。
【5ヶ月でエンジニア】Udemyおすすめ講座を紹介【まとめ記事】
環境構築なしでJavaScriptを触ってみる。
通常プログラミングをするためにはその言語特有の環境構築をしないといけないのですが、その環境構築でつまずく人がとても多いのです。
なので感覚を知る程度であればさらっとすぐに使える環境を利用してしまいましょう。
初心者の方はぜひとも実際に手を動かしてみてください。
そしてどのように動いているかを確認してとりあえず感覚を掴んでください。
次のセクションから実際にコードをみながら説明をしていくので、是非とも手を動かしながらやっていきましょう。
❶グーグルの検証から試してみる。
右クリックをすると一覧の中に ”検証”と呼ばれるものがあると思います。
それを選択してもらうと不思議な画面が出てきますね。
おそらくHTML/CSSを使ったことがあればお世話になったことがきっとあるはずです。
そこの右上にconsoleと呼ばれるものがあるのでそれをクリックしていただければ準備完了です。
打ち込める場所があるのでそこから打ち込んでみてください。
❷直接JavaScriptが叩けるサイトを試してみる。
https://stephengrider.github.io/JSPlaygrounds/
こちらのサイトではJavaScriptをそのまま叩いて結果ごと反映してくれるのでちょっと触ってみたいときはおすすめです。
それでは早速JavaScriptの解説へ移りましょう。
変数
変数はどの言語をこれから扱うにしても最初に遭遇するモンスターです。
まず、変数とはなんでしょうか言葉の意味通り”変わる数”ですね。
状況に応じて変化することができます。変わる数と言っていますが実は数字だけではなく、文字を扱うこともできます
そのほかにもたくさん種類があるのですが、最低限
- number（数値 1とか1000とか0.6とかです）
- string（文字列 ”kaleido" とか”12”とか "" または'' で囲んだものが文字列です。）
- boolean（trueやfalseなどの真偽値 ）
- undefined（値が未定義の状態を指す）
- null（値が存在しない状態を指す）
このぐらいは知っておくといいと思います。
それでは早速、実例を見ていきましょう。
まず、変数を使う変数名の前には
let もしくは const
のどちらかを前につけてこれから変数を使うよ！っていう合図をコンピューターに知らせる必要があります。
これを”宣言”という風に呼んでいます
そしてコード内で // がついている後ろはコメント文となり実際の実行結果には影響しない部分となります。
// はコメント文です
let hensuu="JavaScript基礎"
hensuu="書き換えました" //let は書き換え可能です。
letはあとで値が変わってもOKですがconstは残念ながらあとで値を変えることはできません。
え！じゃあ変数の意味ないじゃんって思う方もいるかもしれません。確かに変えられないですが、実はこれ以降変える予定のない変数も出てきたりするのも現実です。
コードは自分だけが見るものではありません。プロジェクト等であとで他人がみたときにconstをみれば、これはのちに変わることがないんだなと一目見て判断することができますよね！
実際の文を打ち込んでいるので是非試してみてください。
Javascriptではキャメルケースと呼ばれる変数命名法をよく使います。使い方は単語同士の先頭を大文字にして繋いでいきます。
ただし最初は小文字から始まります。これからたくさん例が出てくるのでなんとなく感覚を掴みましょう。
ableはできる、changeは変化で、変化できるという意味の変数名です。
let ableChange=600
ableChange=11111100 //改めて書き換えることができます。
const author="kaleido" // 変数名はなるべくわかりやすくつけてあげましょう
const numberPrice=1200 //number型(数字型)
const stringPrice="1200" // これはnumber型ではないですね。数字を文字列として見ています。
const fruit="banana" // 文字列型(string型)
const isMonday=false // ブール型(boolean型） true もしくはfalse
例えばboolean型なんていうのは 変数の先頭にisをよくつけます。isMonday?で 月曜ですか？のような形になるので、”はい”か”いいえ”で答えが返ってきますよね。
string型は ”” ダブルクォーテーションで囲う .もしくは ' ' シングルクォーテーションで囲うことよって表現しています。
undefine と null について
最後にundefineとnullについて軽く見ておこうと思います。
詳しい記事はこの辺にまとめてあるのでぜひこちらを見ていただきたいのですが
[JavaScript] null とか undefined とか 0 とか 空文字('') とか false とかの判定について
ここで知っておいてもらいたいのはどちらも意味としてはtrue, false判定にかけるとfalse判定になります。
じゃあnullとundefineは何が違うのと思うかもしれません。ここではnullは自分で意図的にいれた時のみ入るものと覚えておけばいいでしょう。
const a
a // undefine
const b=null
b // null
最初に変数を定義しただけではundefineとなっています。
今ご紹介したのは基本型（プリミティブ型）とよばれるものです。
配列型 (Array型）
次に説明するのは複合型と呼ばれるものになります。
意味的には、今ご紹介したプリミティブ型のものを複数まとめたものというイメージを持ってもらえればオッケーです。
２パターンありますがしっかり一つづつ概要を掴んでいきましょう。
まずは配列型から
配列は[] の中にカンマ区切りで値を代入していきます。
// 配列型
const a=["a",3,true]
const fruits=["apple","grape","peach"] // 複数形の書き方は英語と同じだよ！
最初のconst a は本当にまとまりがないですね。あまりこういう使い方はしません。
次のfruitsのように複数形になるものはしっかりと複数形にしてあげます。
複数のfruitを同じ一つのfruitsという配列にまとめることによって扱いやすくしています。
fruits[0] // "apple" 各要素にはこのように0から数えて何番目かを指定するとそこに埋まっている値を取り出せるよ！
fruits[1] // "grape"
fruits[2] // "peach"
fruits[-1] // "peach" -1は要素がいくつあったとしても常に一番最後を示すよ！要素が何個あるかわからないときは便利だね！
各値にはそれぞれ[]の中に0から数えて何番目かを指定することによって値を取り出すことができます。
オブジェクト型
次はオブジェクト型です。一番の違いは値を取り出すためのkeyが数字ではなく自分で作り出すことができる点です。
ただし、配列型は入れた順番が大事になるのに対して、オブジェクト型には順番という概念がないのでそこは注意しましょう。
// オブジェクト型 {}を使って表現するよ。
//左側にはkey(要素へアクセスするためのもの。配列でいう数字のこと)右側にはvalue(要素へアクセスした時に得られる値のこと)各値はカンマを使って区切っているよ！
const fruitPrices={
apple:300,
grape:400,
peach:500,
}
fruitPrices.apple // 300 値にアクセスするには変数名.keyのようにするよ！
fruitPrices["apple"] // 300 配列と同じようにkeyを文字列としてアクセスすることもできる！
const price =fruitPrices.grape+fruitPrices.peach // 900 それぞれの要素の足し算なんてものにも使えるね！
ここでは apple, grape, peachは全てキー（key）です。
それぞれに対応する 300, 400, 500（number型）が値（value)になります。
オブジェクト型は通称辞書型とも言われています。
自分で何かをキーにして登録することであとでそのキーを使って情報を取り出すことができるからですね。
今回ならばフルーツの名前をキーにしてその価格を取り出していますね。
Function（関数型)
いよいよ基本編からちょっぴりランクアップです。数学が苦手だった人は特に毛嫌いするFunction(関数)です。
Funtionは日本語では関数という意味ですね。まずはイメージが大切なので簡単な箱をイメージしてください。
そこへアイテムを入れると中で何をしているかはわからないけれど、調理したものが出てくる仕組みです。
電子レンジがいい例です。箱にアイテムを入れると、原理は知らないけれど温まって出てくるという結果だけを私たちは知って使っていますよね。まさに関数の一例です。
重要なのは何をしてくれるかの結果と何を教えてあげればいいか この二つです。つまりあなたは手順を知る必要はないのです。
それでは早速実例を見てみましょう。
ここではfunctionというキーワードを前に置いてその後ろにその名前を書くことでこれから関数を書くことを宣言しています。
// 何か二つの値段を入れるとそれを足し算して、値を戻してくれる関数です。
function addPrice(firstPrice,secondPrice){
return firstPrice+secondPrice
}
作り方は function 作った関数の名前(指定された引数)。
引数とは私たちがその関数を使うときに必要なものです。 よく”この関数は引数にpriceを取る” なんて言ったりするので覚えておきましょう。
ここではaddPriceが作った関数の名前、firstPriceとsecondPriceが教えてあげる必要のある情報です。
そしてその中では教えてもらった二つの値を計算してそれをreturn(返す）していますね。
関数は中身を実行してくれますが、中でおきた結果をそのままでは外の世界に持ち出すことはできません。
計算結果を戻したい時には必ず return を使ってあげます。
もちろん関数を作る人は中身を記述する必要があります。しかし、使うだけの人は中身を知らずに関数を利用することができるのです、
もちろん引数をとらないものもあります
使うときにはこのように、必要な引数を括弧の中に渡してあげれば結果が帰ってきます。
const funcPrice=addPrice(fruitPrices.grape,fruitPrices.peach) //900
さて、先ほど関数のいいところは他の人が作ったものも結果だけを知っていれば使うことができると言いました。 早速使ってみましょう。
少し前にやった配列型というのは自分の要素が何個あるか調べる関数を持っています。
私が知っているのは要素が何個あるかを調べてくれる関数を配列が持っていること、そしてそれを呼び出す名前はlengthということだけです。
const fruitsLength=fruits.length//3 先ほど作ったfruitsという配列は3つの要素を持っていました。
このようにして、関数の ”名前”と何が起こるかの”結果”を 知っていれば他の人が作ってくれた便利な関数を借りることができてしまうのです。
ひとまずは関数って便利じゃん！って思ってくれればそれでOKです！
おまけ Arrow Function（矢印型関数）
実はもう一つ書き方があって、最近はこちら側がよく使われるので覚えておきましょう。
アローファンクション (Arrow Function) はまるで矢印みたいな記号を組み合わせているからこう呼ばれています 。
矢印の先にやりたい動作が入ってきます。ここではfuncPriceという変数にaddPriceという関数を代入するよー！っていう意味になります。
const addPrice=(firstPrice,secondPrice)=>{
return firstPrice+secondPrice
}
つまり、関数の名前は addPrice やっている内容は先ほどと全く同じです！
どちらを使うかは好み次第ですが、私が仕事で使っているReactでは主にこちらのArrow Functionを使うことが多いですね！
For文 繰り返し処理
いよいよ大きなロジック部分へ入ってきました。 あと二つほどご紹介したら終わりなのでざっくりと概要だけでも掴みましょう。
プログラミングで絶対につまづく場所は ロジック です。例えば私はさっき、関数は 名前と結果だけ知っていれば使えると言いましたが
その中身の処理は今から説明する、For文やIf文を駆使して作られています。
自分のやりたい処理をそのまま行なっている関数が全て用意されていれば構わないのですが、そうもいかないのがこの世の中です。
となると、自分でそのロジックを作らなければなりません。
それをひとまとめにしたものを関数と呼ぶことが多いのですね。
まずはFor文からいきましょう。 配列の中に入っている値段を全部合計して計算してほしい！と思ったとします。
そのときに素直に要素全部一個ずつアクセスして順番に足していけばいいじゃん！と思った人大正解です！
それをFor文という簡単な文で楽にロジックを作ることができます。
const arrayPrice=[100,200,300]
let totalPrice=0
for (let i=0; i< arrayPrice.length;i++){
totalPrice+=arrayPrice[i] // allPrice = allPrice+arrayPrice[i] と同じです。同じものに足し算をするときは省略できます。 四則演算どれでも使えます（+,-,*,/）
}
ここで行なっているのはiというnumberを保存しておける変数を用意します。
そしてそのiにはarrayPrice.length（先ほどやった配列の長さを返してくれる関数です）の長さより小さい間{}の中をループさせます。ただし１ループごとに i++というところでiの値を１ずつ増やしていきます。
そして中の実行部分でtotalPriceという変数にそのときのi番目の値をどんどん足し算していっています。
一つずつ読み解いて行くとやっていることはそんな複雑ではないと思います。
とにかく For文がやっていることは 自分が指定したい回数分同じ処理を繰り返すことができるという部分です。
よく使う代替構文にforEachがありますのでこれもご紹介しておきます。
先ほど出てきたarrow functionを使って書いています。
配列の中から要素を一つづつとってpriceという変数に代入してその中で実行したい処理を書きます。
すごいイメージしやすい書き方だと思います。
arrayPrice.forEach(price=>{
totalPrice+=price}
)
もう一度おさらいですが、For文は同じ処理を回数を指定して行いたいときに便利なものです。
If文 もし〜ならば〜
if文はある条件で動作を切り替えるものです。 要するに動作の分岐点です。
おそらく中学校のときに もし 〜 なら 〜 みたいな文を習ったと思いますが。まさしくそれです。
=== は等しい時を意味します。
const animal="dog"
if(animal==="dog"){
// ここには animalが"dog"の時の処理が入ります
console.log("wanwan")
}else if(animal==="cat"){
// ここには animalが"cat"の時の処理が入ります
console.log("nyao-n")
}else{
// ここには animalがそれ以外のの時の処理が入ります
console.log("")
}
このように私たちが最初から使っている変数の値に応じて行いたい処理を変化させることができるのです！
ちなみに本来console.logは環境設定をした後に使うもので、画面に値を表示してくれるコマンドになります。
ここでは animal という変数が dog なのか catなのか それ以外なのかで処理が変化していますね。
先ほど学んだfor文を使うとこんなこともできるわけです。
const animals =["dog","kaleido","cat"]
animals.forEach(animal=>{
if(animal==="dog"){
console.log("animalには dog が入っていました")}
else if(animal==="cat"){
console.log("animalには cat が入っていました")}
else{
console.log("animalは cat でも dog でもありませんでした。")}
})
最初の配列から取り出される値はdogですのでif文の一つ目のメッセージが帰ってきます。
二つ目は"kaleido" なので3つ目が帰ってきます。
最後はcat なので二つ目が帰ってきます。
こんな風にして、ロジックは作られているわけですね。
ぜひ、lengthという関数がどのように作られているか考えてみてはいかがでしょうか。
このどうやればこの処理を実装できるか考えることがまさにロジックの作成になります。
業務では常にこの機能を実装したい！というところから始まって、じゃあそれをどのようにして実装するかのロジック部分が入ってきます。
こればっかりはすぐにできるようにならないので毎日コツコツ積み重ねることが大事です。
Readable Code （読めるコード）
ところで、私が最初に定義した hensuuってあったの覚えてますか？ もし覚えていたら何が入っていたか思い出してみてください。
多分難しいと思います。
思い出せた人はなかなか記憶力がすごい、ですが、ほとんどの人は覚えられないです。
まず第一に hensuuなんて抽象的すぎて覚えられない。しかもletなので変更されています。
ところがもう一つ最初に定義したauthorは簡単です。何が入っているか覚えていますか？
正解は "kaleido" が入っています。
constで定義された上にauthorというわかりやすい変数なので覚えやすいですね。
中身まで覚えられなくても、著者が入っているということはなんとなく変数名から読み取ることができます。
これが リーダブルコード Readable Code 読めるコードと言われています。
みなさんは今私が書いたコードを知らず知らずのうちに読んでくれていました。
実際の現場でも先輩が同じようにみなさんのコードを読みます。というより読んで理解しようとしてくれています。
これが最後に伝えたい わかりやすい 変数名と const とletをしっかりと使い分けるということです。
コードを読むのは自分だけではありません。他人が読んでも理解できるコードづくりを目指しましょう！
まとめ
今回は HTML/CSSを学び終わってちょっと JavaScriptもかじってみたいという人向けに本当にさわりの部分だけ解説してみました。
興味を持ったら是非自分で触ってみると面白いかもしれませんね。！
