プログラミング ワタリビト

30Daysトライアル2nd　Day1　Javascriptの基礎を学ぶ

30daysトライアル2ndday1

 

解決します

Javascriptってなに？

課題の要点を簡潔に知りたい

 

こんにちは、ワタリビト（@wataribito）です。

9月から始まった30daysトライアルも第1期が終了して、今日から内容が複雑になった「2nd」がはじまりました。

また自身のメモ用に学習記録を残しておきます。

＊学ぶボリュームが多いので記事も長めです＊

 

公式ページはこちら

 

ここからは企業で活躍できるコーダーと同等のスキルを身につけていきます。

それだけに内容の濃密さと難しさが跳ね上がるんですが、プログラミングで稼いでいきたいなら、この程度ではまだまだくじけるわけにはいきませんよね(*´з`)

 

というわけでさっそく学習内容のまとめに入ります。

 

読みたい場所へジャンプ

Javascriptを学ぶ

 

Javascript（省略してjs）はHTMLで書いた要素に動きをつける役割を持ちます。

ボタンやリンクにカーソルを合わせた時にふわっと色が変わったり動いたりするのはjsのおかげです。

 

世に出ているほとんどのサイトでjsが使われていて、Web制作にしてもコーディングのみにしても必修の言語といえますね。

 

30daysトライアルでは1期に続いてProgateとドットインストールを使いながらjsを学びます。

もう解約した…という人はもう一度有料の会員登録をしましょうねW

 

Day1で学ぶことのまとめ

 

Day１で学ぶことはこのような感じです。

 

Day1で学ぶこと

・文字列の出力

・数式の計算と出力

・変数と定数

・条件分岐

 

特に下の２つは、簡単な構成でもしっかり飲み込むのに時間がかかると思います。

理解は必須の内容なので、しっかりと脳みそで咀嚼して腑に落ちるまで復習するべきかな。

 

文字列の出力・数式の計算と出力

 

要点のまとめ

・文字列、数式の出力はconsole.log(“”);

・数式の計算はカッコの中に計算式を書く

・計算式の場合は’””をつけない！

・文字列を連結するときは単語ごとに””で囲う

 


jsではHTMLでdivやpタグのように、文章を書いてページに表示されられます。

その際に決まり文句としてこのような記述をします。

 

「console.log(‘ここに文章’);」

 

このカッコの中身だけがページに表示させられます。

HTMLとおなじ見た目になるんですが、jsで文章を書いても意味がないですね。

それではなぜjsで文章が書けるのか、というと「計算式や文字の組み合わせなどのアプリケーションで必要になるからです。」

（いまは詳しく知らなくても大丈夫）

 

 

上記で文章と計算式の記述は’’（または””）があるかないかで変わると書きましたが、実際の表示はこうなります。

 

記述例

console.log(‘3’ + ‘5’) →　３５　と表示される

console.log(3 + 5)→　　 ８　　　と表示される

 

他にも、＋の部分をーや＊、％にすると、引き算、割り算、あまりの数値を計算できます。

 




変数と定数とは

 

次はややこしい変数と定数についてです。

しっかり理解できるまで時間がかかりそうだけど、これもあいまいなままではままならない部分なのでわかるまで繰り返したいところ。

 

変数とは

 

よく「箱」「入れ物」と例えられています。

たしかに変数はおおきな箱という認識で良いと思います。

変数という箱に名前をつけて、そこに代入する値（言葉や計算式など）を指定することで使用されます。

 

let name ＝ “abc”;

 

このように記述をするんですが、これらには赤線の単語ごとに意味があります。

 

let　・この文章は変数であるという定義につかわれます。

name  ・ここに変数（箱）の名前を入れます（好きな名前でOK）

＝　・この場合の＝は算数の＝ではなく、右を左に代入するとなります

“abc”  ・代入する値（言葉や計算式など）

;  ・セミコロンは分の最後に必ずいれること

 

この式だと、nameという変数にabcという値（文章）を代入しているという意味になります。

なので、console.log(name);と記述すると、画面にはabcと表示されることになります。

 

このあたりはややこしいんですが、これを覚えると「答えが複数あるもの」などのアプリケーションが作れるようになるんですね。

 

例えば、ノベルゲームなどの選択肢で分岐するしくみなど。

 

変数を使うメリットとは

 

ややこしい変数ですが、これを使うことでメリットがたくさん生まれます。

 

・同じ値を繰り返し使う

・簡単に改良・変更しやすい

 

このような感じで、分岐や選択肢がいくつかあるモノでは強力なメリットになるんですね。

 

変数を使う上でのルール

 

変数を使うにはいくつか簡単なルールがあります。

 

・英単語をつかう

・2語以上の場合は2番目以降の単語の頭文字を大文字にする（addSourceなど）

 

<strong>禁止事項</strong>

・頭文字を数字にしない

・ローマ字にしない（eigoとか。EnglishならOK）

・日本語はだめ（ひらがな、カタカナ、漢字）

 

ーメモー

ちなみに、変数名はあとから上書きできる。

コードは上から下に実行されるから、古いコードは新しいコードで上書きされる。

 

let name=”abc”;

name=”def”;

このように書くと変数名はdefに更新される。

 

同じように計算式も上書きができる。

let name=7;

name=name+3;

console.log(name);で10と表示される。

 

定数について

 

変数と定数の違いは、あとから上書きができるかどうかです。

定数はその名のとおりで上書きができません。

 

ちなみに、変数では最初にletをつけましたが、定数ではconstをつけます。

 

上書きできないのはあとあと不便そうですが、コードを書く量が増えるほど、不意のミスなどで定義した内容が変わってしまうのを防げます。

 

文字列（数式）の連結について

 

いままでは連結するのに＋を使っていましたが、ほかにも方法があります。

console.log(`ぼくの名前は ${name} です`);

このように“で全体を囲んで、変数（定数）を${}の中に記述、それを（）の中に放りこめばOK

 

いままでのように＋を使ってもいいし、この記述でも意味は同じになります。



条件分岐について

 

ゲームのエンディング分岐のように「もし友情度より愛情度のほうが恋人エンドへ」という感じでJSでは条件を設定してそれを満たしているか動画で進む方向を変えることができます。

 

 

条件分岐の種類

 

条件分岐には次のような種類が存在します。

 

・if文

・else文、if else文

・switch文

・真偽値

 

if文の意味とコードの書き方

 

if文はその意味の通り「もしも」という可能性が存在する場合に書かれる文です。

実際の記述では「もしも●●が△△より□□だったら」という場合に判定させて結果によって処理の行く先を分けます。

 

const number=10;

if（number ＞ 10）｛

console.log(“10より大きいです”);

｝

この記述の意味は「number（定数名）が10より大きかったらコンソールに10より大きいです」と表示させます。

 

真偽値について

 

真偽値とはaとbを比べた結果でその後の処理を分岐させるための記述で、比較演算子という記号が使われる。

比較演算子には以下の6つの種類がある。

 

 

30daysトライアル2ndday1

少しでもおもしろいと思ったらシェアお願いします?

RECOMMENDこちらの記事も人気です。