【JavaScript】#２横スクロールアクションゲームの作り方 基礎入門
この記事では、JavaScriptの基本構文、変数、関数、オブジェクト、配列、条件分岐について詳しく解説していきます。
また、これらの基本構文を実際にコーディングしながら解説しますので、JavaScriptの基本を学んですぐに実践できるようになります JavaScriptを学びたいと考えている方は、ぜひご一読ください。
JavaScript基礎入門
JavaScriptは、インタラクティブなウェブサイトを作成するために使用される一般的なプログラミング言語です。
JavaScriptはインタプリタ言語であり、ユーザーが書いたコードをソフトウェアが解釈し、コンピュータが実行できる低レベルのコマンドに変換することを意味します。
一般的に、JavaScriptのコードはテキストエディタで書かれ、ユーザーのウェブブラウザで直接解釈されます。
JavaScriptは、複雑なプログラムを作成するために使用することができる強力かつシンプルな言語です。
構文、変数、関数
JavaScriptの構文は、他の一般的なプログラミング言語の基本的な構文に準じているため、比較的容易に習得することができます。
変数は、操作や変更が可能なデータを格納することができるため、どのプログラミング言語においても重要な要素です。
変数
変数には、オブジェクト、数値、文字列、その他の種類のデータを格納することができます。
変数の種類
プリミティブ変数：
プリミティブ変数は、JavaScriptの変数の中で最もシンプルなタイプです。
特定の構造を持たず、数値、文字列、ブール値などの単純な値を格納するために使用されます。
// 数値
const a = 10;
const c = 10;
console.log(a + c); // 20// 文字列
const a = '太郎さん';
console.log(a); // 太郎さん// ブール値
const a = 2;
console.log(a < 4); // 4以下なのでtrue
console.log(a === 0); // 0ではないのでfalseグローバル変数：
グローバル変数は、コード内のどこからでもアクセスできるため、最も目につきやすいタイプの変数です。
このため、グローバル変数は、異なる関数やモジュール間で情報を共有するのに便利な反面、慎重に扱わないと誤用や予測不能な結果を招く可能性があります。
このため、一般的には、グローバル変数の使用をできるだけ制限することがベストプラクティスです。
変数はvarというキーワードで宣言され、値を割り当てる必要があります。
関数
最後に、関数はJavaScriptの重要な要素であり、必要なときに簡単にコードを実行することができます。
関数には、変数と他の関数の両方を含めることができ、常に何かを返さなければなりません。
関数変数：
関数変数とは、コードの他の部分から参照できる実行可能なコードの一部です。
関数を使用すると、プログラムの他の場所から簡単に参照できる再利用可能なコードの塊を記述する方法を提供することで、コードをモジュール化し、コードの再利用を促進することができます。
const f = function() {
console.log('hello');
}
f(); // "hello"
オブジェクト、配列、条件式
オブジェクトと配列は、簡単にアクセスして操作できる情報を格納することができるJavaScriptの重要な部分です。
オブジェクト
オブジェクトは辞書のようなもので、簡単にアクセスできる名前付きの情報を格納することができます。
オブジェクト変数：
オブジェクト変数は、プリミティブ変数よりも複雑で、データの集まりやオブジェクトを格納するために使用されます。
このタイプの変数では、複数の値を1つの名前で保存し、オブジェクト記法でアクセスすることができます。
const o = { property1: '文字列', property2: '文字列２', property3: 3, }; console.log(o); // { property1: '文字列', property2: '文字列２', property3: 3, }
console.log(o.property2); // "文字列２"
console.log(o.property1); // "文字列"
console.log(o.property3); // 3また、オブジェクトは他のオブジェクトや関数を格納することができ、非常に汎用性の高い変数です。
配列
配列は情報のリストであり、簡単にループさせることができ、データの参照や反復に使用することができます。
配列変数：
オブジェクト変数と同様に、配列変数もデータの集合を格納します。
ただし、オブジェクトとは異なり、配列は同じデータ型のものしか格納できず、配列記法でアクセスする必要があります。
配列は、似たような項目を大量に格納する場合に最もよく使われます。
const array = ['文字列', '文字列２', '文字列３'];
console.log(array[0]); // "文字列"
console.log(array[3]); // undefined
console.log(array.length); // 3条件式
条件式は、コードの実行方法を効率的に制御するために使用されます。
If文、else文、switch文はこの重要な構成要素であり、コードの実行方法を制御することができます。
論理演算子：
論理演算子は、2つの値を比較し、文が真か偽かを判断するために使用されます。
最も一般的な3つの論理演算子は、AND、OR、NOTです。
// AND
console.log(true && true); // true
console.log(true && false); // false
console.log(false && false); // false// OR
console.log(true || true); // true
console.log(true || false); // true
console.log(false || false); // false// NOT
console.log(!(true || true)); // false
console.log(!(true || false)); // false
console.log(!(false || false)); // true比較演算子：
比較演算子は、2つの値を比較し、ブール値を返します。
比較演算子の例としては、===（等しい）、!==（等しくない）、>（大きい）、<（小さい）、>=（以上）、<=（小さい）などがあります。
条件付き文：
条件付き文は、与えられた条件に基づいて動作を実行するために使用されます。
最も一般的な条件文はif-else文で、条件が満たされれば文を実行し、そうでなければ別の文を実行することになります。
// if-else文
const a = 2;
const b = 3;
if (a < b) {
console.log('正解'); // if()内がtrueになるのでここが実行される。
} else {
console.log('不正解');
}三項演算子：
三項演算子は、if-else文を記述するための略記法です。
三項演算子は、条件の後に"？"（クエスチョンマーク）を付けた構文で記述します。
例えば、三項演算子は次のようになります。
// if-else文
const a = 2;
const b = 3;
(a < b) ? console.log('正解') : console.log('不正解'); // ”正解”Switch文：
Switch文は、複数の条件を一度にチェックするもう一つの方法です。
それぞれのケースを個別にチェックし、マッチしたケースに関連するコードを実行します。
どのケースも一致しない場合は、デフォルトのケースコードが実行されます。
条件が2つ以上の場合に使用します。
const a = '条件１';
switch(a) {
case '条件１':
console.log('条件１です');
break;
case '条件2':
console.log('条件２です');
break;
default:
console.log('どの条件にも当てはまりません');
}
JavaScriptの基本を実践する
JavaScriptの基本を理解したら、さらに一歩進んでコードを書き始めることが重要です。
そうすることで、複雑なアプリケーションの開発を開始するのに不可欠な実践的な経験を積むことができます。
コードを書くことは、言語とその動作を理解するための素晴らしい方法です。
JavaScriptの基本を練習することで、言語を理解し、より大きなアプリケーションを開発できるようになります。
結論
構文、変数、関数、オブジェクト、配列、条件式を理解し練習することで、JavaScriptでより複雑なアプリケーションを書き始めることができるようになります。
コードを効果的に書けるようになることは素晴らしいスキルであり、経験豊富なプログラマーになるために必要なステップです。
迷わずJavaScriptのコードを書き始め、すぐに経験豊富なプログラマーになりましょう！
次はいよいよゲームプログラミング開始です。
この記事が気に入ったらサポートをしてみませんか？