脱初心者!JavaScriptプログラムの設計パターンを徹底解説


JavaScriptのよくあるプログラミングパターンが知りたい
初心者が間違いやすい基本的なパターンってなんだろう
なるべく最新のJavaScriptを使うにはどうすればいいの?

基本的なJavaScriptが書けるようになってきたら、より効率の良い安全なプログラムを書きたいと考えている人も少なくないでしょう。

しかしながら、初心者の方がいきなり高度な設計を学習しようとしてもなかなか前に進まないのも事実です。まず最初の取っ掛かりとしては、よく使われている基本的なパターンを学習するのが近道でしょう。

そこで、この記事では初心者でも今日からJavaScriptの基本的なプログラムパターンを理解するための方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

一人でも多くの方がJavaScriptの不安を解消できれば幸いです。

基本構文のパターン

この章では、JavaScriptの基本構文においてよく使われているパターンをおさらいしてみましょう。主に、変数・配列のパターンと関数の書き方について学んでいきます。

変数・配列について

JavaScriptの変数定義は長らくvarが使われていましたが、現在はconst / letのどちらかしか使いません。もっと言えば、基本的にはconstを最優先で利用するようにし、どうしても変数を途中で変更したい時だけletを使うようにします。

簡単にまとめると次のようになります。

  • 【let】再宣言が不可
  • 【const】再宣言・再代入が不可

具体的なコードでも確認しておきましょう!

constは一度定義したら再宣言・再代入ができなくなるので、イメージ的には定数を作るような感覚になるでしょう。誤って変数の値を変更してしまうことを防ぐ意味でも、constを最優先で利用するようにしましょう。

また、const / letはブロックスコープの特徴を持っており、変数をあるブロック内だけで完結できます。

次のサンプル例を見てください。

実行結果

この例では、IF文のブロック内に各種変数を定義しています。実行結果に注目して見ると、varで定義した変数以外はエラーになっていますよね?

つまり、const / letで定義した変数はIF文内だけで利用できるように作られているわけです。これにより、変数が意図しない場所で操作されてしまうのを防ぐことが可能になるわけです。

関数の書き方について

関数定義に使っていたfunctionキーワードですが、今ではアロー関数に置き換えることができます。
(コンストラクタの定義などにはfunctionを使います)

基本的な使い方例として次のサンプルを見てください!

アロー関数は【function】を【=>】に置き換えることができるわけですが、上の例みたいに実行する処理が1行だけの場合は{ }も記述不要になるのでコードがスッキリします。

関数に引数を指定する場合は次のようになります。

非常に簡潔に書けて便利なのですが、すべてのfunctionを置き換えられるわけではありません。もっとも重要なポイントとしてはコンストラクタ定義でしょう。

例えば、次のようにコンストラクタ定義をアロー関数で行うとエラーになります。

functionとアロー関数は【this】の扱い方が異なるのが大きな理由です。基本的に、コンストラクタ以外の関数定義であればアロー関数を優先的に使っていけば良いでしょう。

オブジェクトのパターン

この章では、オブジェクトを作る際によくありがちな基本パターンについて見ていきましょう。主に、コンストラクタ定義と名前空間について学んでいきます。

コンストラクタの作り方

JavaScriptでは独自のコンストラクタを定義する際に、functionを利用して次のように記述します。

主に、プロパティとメソッドを記述するわけですが、この例ではshowName()というメソッドを同時に定義していますね。

しかしながら、コンストラクタはプロパティだけを定義して、メソッドはプロトタイプを利用して定義するというのが基本パターンになります。理由としてはいくつかありますが、無駄なメモリを消費しないというのが大きなポイントでしょう。

例えば、先ほどのコンストラクタを利用して次のようにインスタンスを作成するとします。

インスタンス【taro】を利用してshowName()を実行することができますね。

ところが、もしインスタンスを10個や100個という風にたくさん作るとどうなるでしょうか?その都度、すべてのインスタンスにメソッドの定義がコピーされますよね。

そうではなく、コンストラクタはプロパティの定義だけにして、メソッドの定義はプロトタイプにすれば良いのです。すると、インスタンスをいくつ作成してもコピーされるのはプロパティだけになります。

具体的なコード例を見てみましょう!

この例では、コンストラクタにプロパティの定義だけを記述しています。その代わりに、UserプロトタイプにshowName()メソッドを定義していますね。

プロトタイプはUserインスタンスすべてにおいて共有できるので、インスタンスを作ってもいちいちメソッドがコピーされることはありません。

クラスの作り方

実は、最近のJavaScriptはクラス構文に対応しているので、前章で解説したプロトタイプなどをあまり意識せずにコンストラクタを作ることも可能です。

基本的な作り方は次のとおりです。

見て分かるように、プロパティとメソッドを1つの塊として記述するわけです。この時にプロトタイプなどを意識する必要はありません。

具体的なソースコード例を見てみましょう!

実行結果

この例では、2つのプロパティと1つのメソッドを定義していますね。

クラスによるインスタンスの作成方法はこれまでと同様なので心配しないでください。

また、クラス構文を利用すると継承も次のように簡単に行えます。

extendsを使って継承したいコンストラクタ名を指定するだけです。この例では、showAge()メソッドしか定義されていないManクラスにUserクラスを継承しています。

実際にインスタンスを作成して実行してみましょう。

実行結果

ManクラスでshowName()メソッドは定義していませんでしたが、見事に実行されていることからUserクラスを正常に継承できていることが分かります。

Babelの基本パターン

この章では、Babelを使った基本的なトランスパイル手法について見ていきましょう。主に、Babelの概要と実際の使い方について学んでいきます。

最新の構文が使えるBabelについて

JavaScriptで効率の良いプログラムを書こうと考えると、どうしても最新のJavaScript仕様を使う必要がでてきます。

ただし、すべてのブラウザが最新のJavaScriptに対応していないうえ、どの構文が使えるのかバラバラです。そこで、登場するのがBabelです。

【Babel】

Babelを利用すると、最新の仕様で書かれたプログラムを古いJavaScriptに変換してくれるのです。

これにより、ブラウザの対応を待たなくても今すぐ効率の良いJavaScriptを利用してプログラミングができるというわけです。

Babelの概要図

Babelを利用するにはNode.jsの開発環境が必要になるので、まだ準備ができていないという方は次の記事を参考にながら準備するのが良いでしょう。

【Node.js入門】各OS別のインストール方法まとめ(Windows,Mac,Linux…)
更新日 : 2019年7月19日

Babelのインストールはnpmを利用して簡単に導入できます。

基本的なトランスパイルについて

Babelを利用して古いJavaScriptへトランスパイル(変換)するには、まず最初に専用の設定ファイルを用意する必要があります。

ファイル名を【babel.config.json】として、次のように記述します。

トランスパイルするプリセットの設定を行うのですが、基本的には【@babel/env】を指定しておけば良いでしょう。

次に、package.jsonファイルの【scripts】プロパティに次のような記述を追加します。

このように記述することで、Babelを使ったトランスパイルを【npm run babel】というコマンドで実行できるようになります。

それでは、新しい関数の書き方であるアロー関数を書いてみましょう。

これをBabelでトランスパイルします。

すると、libディレクトリ内にトランスパイルされたファイルが生成されているので、中身を見てみいましょう。

このように、アロー関数はfunctionキーワードに置き換わっていますね。ついでに、constがvarに変わっている点にも注目です。

つまり、古いJavaScriptの仕様に変換されているので、ほとんどのブラウザに対応することができるわけです。

まとめ

今回は、JavaScriptのプログラム設計の基本について学習をしました。

最後に、もう一度ポイントをおさらいしておきましょう!

  • 変数・配列・関数の基本パターンを覚えると効率がよくなる
  • 従来からのコンストラクタを使うか新しいクラス構文を使おう
  • Babelによるトランスパイルで最新の仕様を活用しよう

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説