JavaScript Primerを読んだ

はじめに

今回JavaScriptの学習するにあたりJavaScript Primerという教材を読みました。
本記事はJavaScript Primerを読んでの感想になります。

よかったところ

• 基本文法の使い方が一通り学べてボリューム的にも十分な量なため辞書的な使い方もできると思います。
• 文法の推奨される使い方や非推奨な使い方の解説もされているため実践的です。
• JavaScriptは毎年のように新しいバージョンがリリースされますが、それに合わせて書籍もアップグレードしてくれるため最新の情報を解説してくれます。
• 古いバージョンの書き方の解説もあるため既存のシステムで古い書き方のものを見る際にも役に立ちます。

学んだこと

• JavaScriptにおける基本的な文法の使い方。
• 非同期処理
  • メインスレッドがJavaScriptの処理で占有されると処理の間スクロールができなくなるなど、ユーザーにとって不便になる。それを防ぐためにある処理を行っている間にまた別の処理を行うことを非同期処理と呼び、これによってUXの低下を防ぐ役割があります。
  • Promise
    • ES2015で導入された非同期処理の状態や結果を表現するビルトインオブジェクトです。
    • new演算子でインスタンスを作成して利用する。引数にはresolveとrejectの二つの引数を取り、それぞれ非同期処理が成功した時と失敗した時によばれる関数を表しています。thenメソッドでそれぞれの関数を登録します。

      const promise = new Promise((resolve, reject) => {
          // 非同期の処理が成功したときはresolve()を呼ぶ
          // 非同期の処理が失敗したときにはreject()を呼ぶ
      });
      
      const onFulfilled = () => {
      console.log("resolveされたときに呼ばれる");
      };
      
      const onRejected = () => {
      console.log("rejectされたときに呼ばれる");
      };
      
      // `then`メソッドで成功時と失敗時に呼ばれるコールバック関数を登録
      promise.then(onFulfilled, onRejected);
      

    • catchメソッドでPromise内の例外処理の登録ができます。登録していた場合は引数で指定していたrejectメソッドと一緒に呼び出されます。

      function throwPromise() {
        return new Promise((resolve, reject) => {
            // Promiseコンストラクタの中で例外は自動的にキャッチされrejectを呼ぶ
            throw new Error("例外が発生");
            // 例外が発生すると、これ以降のコンストラクタの処理は実行されません
        });
      }
      
      throwPromise().catch(error => {
        console.log(error.message); // => "例外が発生"
      });
      

    • Promiseインスタンスには、内部的に次の3つの状態が存在します。
      • Fullfilled:resolve（成功）したときの状態。このときonFulfilledが呼ばれる。
      • Rejected：resolve（成功）したときの状態。このときonFulfilledが呼ばれる。
      • Pending：FulfilledまたはRejectedではない状態。また、new Promiseでインスタンスを作成したときの初期状態
    • Promiseチェーン
      • 非同期処理が行われたら次の非同期処理を行いたい場合など、複数の非同期処理を行いたい場合の書き方です。
      • thenメソッドでPromiseチェーンをを行えます。非同期処理が失敗（reject）しない限り、順番にthenメソッドの処理が実行されます。

      // Promiseインスタンスでメソッドチェーン
      Promise.resolve()
          // thenメソッドは新しい`Promise`インスタンスを返す
          .then(() => {
              console.log(1);
          })
          .then(() => {
              console.log(2);
          });
          ```
      

  • Async Function
    • Async Functionは通常の関数とは異なり、必ずPromiseインスタンスを返す関数を定義する構文でPromiseの処理をより簡潔に書くことができます。
    • Async Functionは次のように関数の前にasyncをつけることで定義できます。

      async function doAsync() {
          return "値";
      }
      // doAsync関数はPromiseを返す
      doAsync().then(value => {
          console.log(value); // => "値"
      });
      

    • await式
      • await式はAsync Function内で使われる処理です。await式では右辺のPromiseインスタンスがFulfilledまたはRejectedになるまでその場で非同期処理の完了を待ちます。

      // async functionは必ずPromiseを返す
      async function doAsync() {
          // 非同期処理
      }
      async function asyncMain() {
          // doAsyncの非同期処理が完了するまでまつ
          await doAsync();
          // 次の行はdoAsyncの非同期処理が完了されるまで実行されない
          console.log("この行は非同期処理が完了後に実行される");
      }
      

難しかったこと

文字列を扱う箇所でUnicodeなどの概念が登場するのですが、特にIT未経験者の方々はどういうことかわからないと思います。プログラムを書くうえであまり気にするところではないかもしれないですが、これからエンジニアを目指していこうと考えている方は基本情報技術者試験の教材でまずこれらのIT関連の予備知識を学習してみることをお勧めします。

さいごに

JavaScriptに限った話ではないではないですが言語を新しく学習するのはなかなか大変なものと今回の学習を通して改めて思いました。ありがたいことにJavaScript Primerは無料でこれほど大ボリュームで良質の教材となっており、これからJavaScriptを学習しようと思っている人は読まないという選択肢はありえないんじゃないかとさえ思いました。興味を持った方々はぜひ一読してみることをお勧めいたします。