【Javascript】超初心者向け勉強の進め方

JavaScript IT
2023.01.04

はじめに

Javascriptについての基礎知識を勉強した後、次になにを勉強したらいいの！？ということで悩んでいたことがありました。

教育機関やサービスを受ければ簡単に手に入る「スモールステップ」を踏んだ学習を自ら模索しなきゃいけないのが独学の難しいところですよね。

今回は、段階的にステップアップするための学習材料をご紹介します。

ステップ１：基礎知識を学ぶ

例

  • データ型
  • 演算子
  • 変数（宣言のためのキーワード）
  • 基本構文
    • 条件分岐
    • ループ処理

おすすめ教材

スラスラ読める JavaScriptふりがなプログラミング - インプレスブックス
プログラムが「読めない」を解決する入門書
book.impress.co.jp

ステップ２：自分で考えて使ってみる

おすすめ教材

  • この本はサンプルが丁度良い。実際に仕事で使うイメージがわくような内容になっている。個人的にもよかったし、周りの勉強仲間やネットでの評判も上々の一冊。
  • 正解を見る前に、自分で「どうしたら実現できるか」を考えたり、ネットで調べたりしてからサンプルコードを見ると良い勉強になる。
確かな力が身につくJavaScript「超」入門 第2版 | SBクリエイティブ
３万部突破のベストセラーが充実のアップデート！ JavaScriptをこれから始める人にも、前に挫折したことの
www.sbcr.jp

ステップ３：Javascriptでなにができるかを知る

おすすめ教材

  • 目的別に様々な関数などが紹介されているので、「こんなこともできるんだ！」というイメージを広げることができる。
  • そもそも初心者には「なにができるのか」「どんな関数があるのか」という知識が圧倒的に少ないことで、ネットで必要な情報を集めることに苦労するが、その助けになってくれる本。
JavaScript コードレシピ集
JavaScriptによるWeb開発のための，究極のレシピ集が登場。制作の現場で使われる定番テクニックからプロ技まで余すところなく集めました。基本文法／文字や数値の取り扱い／データの取り扱い／ブラウザーの操作／ユーザーアクション／HTML要素の操作／アニメーション／画像，音声，動画／スマートフォンのセンサーなど，目的別...
gihyo.jp

すごい教材

  • 本腰いれて「Javascriptでなにができるか」を知るための本。
  • 全然優しくない（文字ばかりでつらい）。
  • ただ情報量は凄まじいので、一読の価値はある。
JavaScript 第7版
JavaScriptは最も多くのソフトウェア開発者に使用されているプログラミング言語です。JavaScriptを包括的に解説する本書は、第6版から大幅に加筆および更新し、全面改訂しました。 はじめにJavaScript言語仕様の基本的な構文と機能について豊富なサンプルコードを使って学習します。そしてJavaScrip...
www.oreilly.co.jp
ハンズオンJavaScript
JavaScriptの入門書。対象読者は、完全なプログラミング初心者からプログラミングの初級者です。また、中級以上の方のクライアントサイドJavaScriptの知識の更新にも利用できます。本書ではChrome DevToolsのコンソールにコマンドを入力してその動作を確認しながら、JavaScriptの基本や多種多様な...
www.oreilly.co.jp

ステップ４：自分でいちからコードを書いてみる

＜レベル1＞

時計を表示するプログラム

  • 現在の時刻を表示し、一秒ごとに最新の時刻に更新する
    • 調べること
      • 現在時刻を取得する関数
      • 一定時間毎に処理を行う関数
  • サンプルコード
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サンプル</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div>
      ただいまの時刻：
      <span id="T1"></span>
    </div>

    <script>
      window.onload = function() {
        setInterval(function() {
          var dd = new Date();
          document.getElementById("T1").innerHTML = dd.toLocaleString();
        }, 1000);
      }
    </script>
  </body>
</html>

サイコロを振るプログラム

  • ボタンをクリックすると、ランダムに１〜６のいずれかの数字が表示されるプログラムを書いてみる
    • 調べること
      • クリック時にイベントを実行する方法
      • 乱数を作成するための関数
  • サンプルコード
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HELLO JS</title>
    <link rel="stylesheet" href="dice.css">
  </head>
  <body>
    <h1>JavaScript　サイコロ</h1>
    <button id="button">サイコロを振る</button>
    <h2 id="placeholder"></h2>

    <script>
      button.onclick = function() {
        console.log('ボタン押された');
        const randomNumber = Math.random();
        console.log(randomNumber);
        const randomNumberSecond = randomNumber * 6;
        console.log(randomNumberSecond);
        const thisNumber =  Math.floor(randomNumberSecond);
        console.log(thisNumber);
        const output = thisNumber +1;
        console.log(output);
        document.getElementById("placeholder").innerHTML = output; //値の出力
      };
    </script>

  </body>
</html>
参考サイト
トレノキャンプ
TRAINOCAMPは、体験を重視する教材を使い、即戦力となるITスキルを学習するeラーニングサービスです。プログラミング、データサイエンス、ITリテラシーなど初心者から現役エンジニア、これからIT業界を志す人まで幅広く対応しています。
camp.trainocate.co.jp

＜レベル２＞

メモ帳アプリ

  • 進め方（実際の開発でも、考えることは同じです！）
    • 必要な機能を考える
      • 箇条書きで書きだしてみると◎
    • その機能をどう実装するか考える
参考サイト
JavaScriptでメモ帳アプリを作成する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン
初心者向けにJavaScriptでメモ帳アプリを作成する方法について現役エンジニアが解説しています。HTML5で追加されたsessionStorageやlocalStorageのAPIを利用して作成してみます。メソッドには、getItem、setItem、removeItem、clearがあります。
magazine.techacademy.jp

＜レベル３＞

三目並べ（〇×ゲーム）を作ってみる

  • こんな感じのやつ
  • ルール
    • 先に一列並べた人が勝ち
  • ヒント
    • マスはどうやって作成する？
    • 同じマークが一列に揃っているか判定するためにはどうする？
      • それぞれのマスをどう判別する？
参考サイト
HTMLとCSSとJavaScriptを使って三目並べ（〇×ゲーム）を作ってみる
このページではソースコードの一部分を簡単な解説をしています。完成品で遊ぶにはコチラから完成品のソースコードはgithubにあります三目並べゲーム概要先手・後手をプレイヤーが選びコンピューターと対戦できます。相手より先に三つ同じ色を縦・横・斜
bubudoufu.com

終わりに

私は最初にステップ3の「Javascriptでなにができるか」を知ろうとして、難しい関数を眺めては唸っていました…（無駄な時間だった）

あとは、ステップ４も「なんか作りたいけど今の自分のレベル感にあった課題がわからん！！」ってなったので、こんな順番でトライしていたらよかったのかなあと思いながら書きました。

参考サイトは掲載していますが、似たようなお題でコードを書いてくださっている方は他にもいるので、ネットで検索してみるといろんな書き方をしているのを見れておもしろいですよ。

コメント

タイトルとURLをコピーしました