MENU
未経験から実務レベルのWeb制作スキルを学ぶ基礎講座 見てみる
  1. ホーム
  2. Web制作
  3. 【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す！①

【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す！①

広告
Web制作

つるぴよ
つるぴよ
Twitteで JavaScriptを教えてくれる「もりけん塾」に入塾しました！

9月1日から1ヶ月限定で森田賢二さんに教えていただくことになりました！

現在は入塾を希望する方は、まずは森田さんのフロントエンドエンジニア（@terrace_tech）の塾生募集ツイートにリプをして、ご縁があれば入塾という流れのようです。

この記事では JavaScript学習のためのロードマップに沿って学んだことをアウトプットしていこうと思います！

＼この記事はこんな人にオススメ／

✅未経験からエンジニアになりたいけど何を勉強したらいいかわからない
✅自分の周囲にプログラミングを学習している人がいない
✅ JavaScriptを使えるようになってサイトを作りたい
✅Progateやドットインストールはやったけど次何をしたらいいかわからない
目次

 JavaScriptをマスターしてフロントエンドエンジニアになる！

まずは JavaScriptをマスターするために学習のロードマップを教えていただきました！

 JavaScript学習のロードマップ

書き出すとこんな流れです。

①マンガ JavaScriptを読む
②改訂新版 JavaScript本格入門を読む
③Webページで使われている部品を JavaScriptで作る
④APIリクエストで得たデータでコンテンツを作る
⑤ライブラリを導入する
⑥自作アプリをプロジェクト管理して作る
⑦React or TypeScriptでリプレイスする

まずはマンガ JavaScriptを読むから始めることにします！

マンガ JavaScriptとは？

正式には「マンガで分かる JavaScriptプログラミング講座」というサイトです！
こちらから読めます。

複雑で初学者には理解しにくいプログラミングの世界をマンガ形式でわかりやすく教えてくれます。
詳しい解説もあるのでそちらも読みつつ進めていきます！

まずは簡単にプログラムを書いてみる

JavaScriptを書くときは「index.html」の中に<script>タグを書きます！

「alert」というダイアログを表示する簡単なプログラムを書くとしたら以下のように書きます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script>
        alert("test");
        </script>
    </head>
    <body>
    </body>
</html>

出力結果はこんな感じに

コメントはこまめに入れよう

プログラムの中ではコメントをよく使います。

//コメントです
<h2>こんにちは</h2>

/コメントです/

上のように書いた場合「コメントです」と書いた部分はWeb上には表示されません。

コードを書いているとすごく長くなってしまうので、後で見返した時に「これはどこの部分のコードだったかな？」とわからなくなってしまったりします。

そこでこまめにコメントを残しておくとわかりやすくなるというメリットがあります！

書き方は２種類！
①// →//の右側が無視されます
②/〜/→〜に書いた部分が無視されます

いろいろな進数

【１０進数】１０の数字ごとに桁が上がる。人間が使う数字。
【　２進数】２つの数字ごとに桁が上がる。コンピュータが使う数字。

２進数を使って書くと桁が多くなりすぎて扱いづらいので【１６進数】を使う。

数値変数と計算

つるぴよ
つるぴよ
【変数】箱のようなもの。数値や文字列を入れることができるよ。

下記のように書きます。

var a = 3;

分解して解説すると以下の通りです。
①「var 」　これから変数を書きます、という宣言。「variable（変数）」という意味
②「a」　変数の名前
③「＝」　変数に、右辺の値を代入するという意味。通常の=とは違う使い方なので、注意。
④「３」　変数に入れる値
⑤ 「;  」　この式はここで終わりという意味

 

＼変数を使うメリット／
✅複雑な計算をわかりやすく書くことができる
✅変数の値を変えることで同じ計算式を再利用することができる

変数のルール

変数の値には使えるものと使えないものがあります。

使えるもの
✅半角の英数字、「_」（アンダーバー）使えないもの
✅最初の１文字目に数字
✅ JavaScriptの文法に利用される言葉

 JavaScriptの計算に使える

算術演算子の一覧です

演算子 意味 使い方 説明
＋ 足し算 a = 1+2 変数「a」に、「１＋２」の結果である「３」を代入
ー 引き算 a = 1 -2 変数「a」に、「１−２」の結果である「−１」を代入
* 掛け算 a = 1*2 変数「a」に、「１*2」の結果である「２」を代入
/ 割り算 a =5 /2 変数「a」に、「５/２」の結果である「２.5」を代入
％ 剰余 a =5 %2 変数「a」に、「５%２」のあまりである「１」を代入
その他の計算
式 n 使い方 説明
Math.ceil(n) 小数点以下を繰り上げ a = Math.ceil(1.55); 変数「a」に「2」を代入
Math.floor(n) 小数点以下を繰り下げ a = Math.floor(1.55); 変数「a」に「１」を代入
Math.round(n) 小数点以下を四捨五入 a = Math.round(1.55); 変数「a」に「2」を代入
Math.abs(n) 絶対値 a = Math.abs(-10); 変数「a」に「10」を代入
Math.max(n,m) nとmの大きい方 a = Math.max(1,10); 変数「a」に「10」を代入
Math.min(n,m) nとmの小さい方 a = Math.min(1,10); 変数「a」に「1」を代入
Math.pow(n,m) nのm乗 a = Math.pow(2,3); 変数「a」に「8」を代入
Math.sqrt(n) nの平方根 a = Math.sqrt(4); 変数「a」に「2」を代入
Math.rondom() ランダム a = Math.rondom(); 変数「a」に、0以上、１未満の乱数を代入

 

つるぴよ
つるぴよ
Math.floorとMath.rondomを使ったよくある組み合わせ例はこんな感じだよ
a = Math.floor(Math.rondom*100); //変数aに整数０〜９９の乱数を代入

分解して解説すると
①Math.rondom()→「０＜＝x＜１」になる実数x（０〜０.９９９９‥）
②Math .rondom()*100→「０＜＝x＜１」になる実数x（０〜０.９９９９‥）を１００倍にする
０〜９９.９９９９‥となる
③Math.floor→小数点以下切り捨てにより「０〜９９」になる

計算式を短く書こう

JavaScriptでは計算式を短く書くことができます。

通常の計算式 短縮バージョン
a = a+5; a +=5;
a = a-5; a -=5;
a = a*5; a *=5;
a = a/5; a /=5;

1を足したり引いたりする式はさらに短縮してかけます

通常の計算式 短縮バージョン
a = a+1; a ++;
a = a-1; a–;

 

マンガ JavaScript第４話までのまとめ

今回は JavaScript学習のロードマップの１つめの「マンガJavaScript」の第４話までの内容を忘備録としてまとめました！

もりけん塾を運営している森田賢二さんのブログはこちらから👇

武骨日記

Twitterフロントエンジニア（@terrace_tech）のフォローは👇

フォローはこちら

Web制作

関連記事

目次