JavaScriptの世界で重要な概念である「プロトタイプチェーン」と「継承」について、初心者の方にもわかりやすく解説していきます。実践的なコード例を交えながら、基礎から応用まで段階的に学んでいきましょう。
プロトタイプとは何か JavaScriptは「プロトタイプベース」のプログラミング言語です。これは、オブジェクトが他のオブジェクトから機能を引き継ぐことができる仕組みを持っているということです。
プロトタイプは、簡単に言えば「設計図」のようなものです。新しく作られるオブジェクトに、どのようなメソッド（機能）を持たせるかを決めることができます。
プロトタイプチェーンの基本 プロトタイプチェーンは、オブジェクトのプロパティやメソッドを探す時の「検索経路」のようなものです。以下の簡単な例で見てみましょう：
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log(`こんにちは、${this.name}です！`);
};
const alice = new Person('アリス');
alice.greet(); // 出力: こんにちは、アリスです！このコードでは、Personというオブジェクトの設計図（コンストラクタ関数）を作成し、そのprototypeにgreetというメソッドを追加しています。
継承の基本的な実装方法 JavaScriptでの継承には、いくつかの方法があります。まずは基本的な実装方法から見ていきましょう。
プロトタイプを使った継承 function Animal(name) {
this.name = name;
}
Animal.prototype.makeSound = function() {
console.log('何かの音を出します');
};
function Dog(name) {
Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
console.log(`${this.name}がワンワン！と鳴きました`);
};
const pochi = new Dog('ポチ');
pochi.makeSound(); // 何かの音を出します
pochi.bark(); // ポチがワンワン！と鳴きましたこの例では、Animalという基本クラスからDogというクラスを作成しています。これは実際の開発でよく使われるパターンで、共通の機能を持つ基本クラスから、より具体的な機能を持つクラスを作成する際に使用されます。
クラス構文を使った最新の継承方法 ES2015（ES6）以降では、より直感的なclass構文を使って継承を実装できるようになりました。
クラス構文の基本 class Animal {
constructor(name) {
this.name = name;
}
makeSound() {
console.log(`${this.name}が何かの音を出します`);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
bark() {
console.log(`${this.breed}の${this.name}がワンワン！と鳴きました`);
}
}
const pochi = new Dog('ポチ', '柴犬');
pochi.makeSound();
pochi.bark();これは現代のJavaScriptでよく見かける書き方です。特にReactやVueなどのフレームワークを使う際によく使用されます。
プロトタイプチェーンの実践的な使い方 メソッドの追加と上書き class Vehicle {
constructor(type) {
this.type = type;
this.isRunning = false;
}
start() {
this.isRunning = true;
console.log(`${this.type}が動き始めました`);
}
stop() {
this.isRunning = false;
console.log(`${this.type}が停止しました`);
}
}
class Car extends Vehicle {
constructor(brand, model) {
super('自動車');
this.brand = brand;
this.model = model;
}
// メソッドのオーバーライド
start() {
super.start(); // 親クラスのメソッドも実行
console.log(`${this.brand} ${this.model}のエンジンが始動しました`);
}
// 新しいメソッドの追加
honk() {
console.log('ビビビッ！');
}
}
const myCar = new Car('トヨタ', 'プリウス');
myCar.start();
myCar.honk();
myCar.stop();プロトタイプチェーンの実用的なパターン 共通機能の実装 実際の開発では、複数のクラスで共通の機能を持たせたい場合があります。以下は、ログ機能を持つミックスインの例です：
const LoggerMixin = {
log(message) {
console.log(`[${new Date().toISOString()}] ${message}`);
},
error(message) {
console.error(`[ERROR] ${message}`);
}
};
class UserService {
constructor() {
Object.assign(this, LoggerMixin);
}
createUser(username) {
this.log(`新しいユーザー ${username} を作成します`);
// ユーザー作成のロジック
}
}
const userService = new UserService();
userService.createUser('山田太郎');プロトタイプチェーンの応用と実践的な使い方 プライベートプロパティとカプセル化 最新のJavaScriptでは、プライベートプロパティを使ってデータを保護することができます。これは実際の開発でよく使用される重要な機能です。
class BankAccount {
#balance = 0; // プライベートプロパティ
constructor(accountHolder) {
this.accountHolder = accountHolder;
}
deposit(amount) {
if (amount > 0) {
this.#balance += amount;
console.log(`${amount}円を入金しました。残高: ${this.#balance}円`);
}
}
getBalance() {
return this.#balance;
}
}
const account = new BankAccount('山田太郎');
account.deposit(10000);
console.log(account.getBalance());
// account.#balance にはアクセスできない実践的な継承パターン イベント処理の実装例 Webアプリケーションでよく使用されるイベント処理の実装例を見てみましょう：
class EventEmitter {
constructor() {
this.events = {};
}
on(eventName, callback) {
if (!this.events[eventName]) {
this.events[eventName] = [];
}
this.events[eventName].push(callback);
}
emit(eventName, data) {
if (this.events[eventName]) {
this.events[eventName].forEach(callback => callback(data));
}
}
}
class ChatRoom extends EventEmitter {
constructor() {
super();
this.messages = [];
}
sendMessage(user, text) {
const message = {
user,
text,
timestamp: new Date()
};
this.messages.push(message);
this.emit('newMessage', message);
}
}
const chatRoom = new ChatRoom();
chatRoom.on('newMessage', message => {
console.log(`${message.user}: ${message.text}`);
});
chatRoom.sendMessage('田中さん', 'こんにちは！');プロトタイプチェーンのパフォーマンスと注意点 メモリ効率の最適化 プロトタイプチェーンを使用すると、メモリ使用量を効率化できます。以下は実践的な例です：
// 非効率な方法
class BadEmployee {
constructor(name) {
this.name = name;
// メソッドがインスタンスごとに作成される
this.greet = function() {
console.log(`こんにちは、${this.name}です`);
};
}
}
// 効率的な方法
class GoodEmployee {
constructor(name) {
this.name = name;
}
// プロトタイプメソッドは全インスタンスで共有される
greet() {
console.log(`こんにちは、${this.name}です`);
}
}継承の深さに関する注意点 継承チェーンを深くしすぎると、パフォーマンスに影響を与える可能性があります。一般的には3階層程度に抑えることが推奨されます。
まとめ JavaScriptのプロトタイプチェーンと継承は、オブジェクト指向プログラミングの基礎となる重要な概念です。クラス構文を使用することで、より直感的にコードを書くことができますが、その背後ではプロトタイプチェーンが動作していることを理解しておくことが重要です。
実際の開発では、これらの機能を使って：
コードの再利用性を高める
関連する機能をまとめる
メンテナンス性の高いコードを書く
といったことが可能になります。初心者の方は、まずは基本的な継承の使い方から始めて、徐々に応用的な使い方に挑戦していくことをお勧めします。
これらの概念をしっかりと理解することで、より効率的で保守性の高いJavaScriptプログラミングが可能になります。
この記事では、sliceメソッドの使い方について解説しています。文字列や配列など基本的な使い方から応用的な使い方まで幅広く解説しています。また、sliceメソッドと同様の動作をするメソッドについてもいくつか紹介しました。それぞれの特徴をしっかり理解しましょう。
JavaScriptのsliceメソッドとは JavaScriptのsliceメソッドとは、配列または文字列の一部を切り出して新しい配列、文字列を作成するメソッドです。JavaScriptをプログラミングしていると、配列や文字列の一部のみ抜き出したい場面が度々登場します。
文字列型でのsliceメソッドの基本的な構文と書き方 長い文章を複数に分けて処理したり、文字列の一部だけを切り取って使いたいということがあります。sliceメソッドを使うと、文字列の特定の位置を指定し、抽出することができます。
sliceで文字列を切り抜く方法 sliceで文字列を切り抜く場合は、「文字列.slice(切り抜き開始位置)」と指定します。開始位置は、文字列の一番左の文字を0番目として切り抜き開始の番号を指定します。
var sample = 'あいうえおかきくけこ';
var result = sample.slice(5);
console.log(result); //かきくけこまた、sliceメソッドの引数にマイナスの整数を指定した場合は右からの位置を示すことになります。この時、-1を指定すると一番右の文字を取得することになります。
var sample = 'あいうえおかきくけこ';
var result = sample.slice(-6);
console.log(result); //おかきくけこ右から数えて6番目の「お」から右の文字列が取得できてるのがわかります。
また、整数ではない数を指定すると小数点以下が省かれます。
var sample = 'あいうえおかきくけこ';
var result = sample.slice(3.4);
var result2 = sample.slice(-3.4);
console.log(result); //えおかきくけこ
console.log(result2); //くけこsliceメソッドで文字列の任意の範囲を切り抜く方法 sliceメソッドは、切り抜きの終了位置も指定することができます。「文字列.slice(開始位置, 終了位置)」と指定します。
var sample = 'あいうえおかきくけこ';
var result = sample.slice(2, 9);
var result2 = sample.slice(2, 20);
console.log(result); //うえおかきくけ
console.log(result); //うえおかきくけこ開始位置の文字は切り抜き対象に含まれていますが、終了位置の文字（上記の例の「こ」）は切り抜き対象に含まれていないことがわかります。
また、開始位置よりも小さな数を終了位置に指定すると空文字列が返されます。（条件を満たす文字列が存在しないため）また、開始位置、終了位置の両方にマイナスの整数を指定することもでき、右からの文字番号を表します。また、整数以外の数字は小数点以下が省かれます。
var sample = 'あいうえおかきくけこ';
var result = sample.slice(-6, 8); //右から6番目の文字から左から8番目直前の文字
var result2 = sample.slice(-6, -2); //右から6番目の文字から右から2番目の文字
var result3 = sample.slice(4, -2); //左から4番目の文字から右から2番目の文字
console.log(result); //おかきく
console.log(result2); //おかきく
console.log(result3); //おかきく配列型でのsliceメソッドの基本的な構文と使い方 sliceメソッドは文字列だけでなく、配列にも使うことができます。配列の一部を分けて、新しい配列を作るなどのことができます。
sliceで配列要素を切り抜く方法 JavaScriptにおける配列型のsliceメソッドの使い方は、基本的には文字列の場合と同じです。「配列.slice(開始位置)」または「配列.slice(開始位置, 終了位置)」の形で指定します。開始位置、終了位置は配列のインデックス番号を指定します。
var sample = ['ポテト', 'ナゲット', 'コーラ', 'ハンバーガー'];
var result = sample.slice(2);
var result2 = sample.slice(2, 3);
console.log(result); //[ 'コーラ', 'ハンバーガー' ]
console.log(result2); //[ 'コーラ' ]また文字列型の場合と同様に、マイナスの整数を指定すると右からの要素番号指定になります。
var sample = ['ポテト', 'ナゲット', 'コーラ', 'ハンバーガー'];
var result = sample.slice(-2);
var result2 = sample.slice(-3, -1);
console.log(result); //[ 'コーラ', 'ハンバーガー' ]
console.log(result2); //[ 'ナゲット', 'コーラ' ]なお、終了位置に配列の要素数以上の数字を渡すと開始位置から末尾要素までの配列が返されること、整数以外の数字を渡すと小数点以下が省かれるのも文字列型の場合と同様です。
応用的なsliceメソッドの使い方 次に、応用的なsliceメソッドの使い方を見ていきます。
callで他のデータ型を切り抜く方法 JavaScriptには、一見配列型に見えるのですが、配列型に適用できるメソッドが使えない型というものが存在します。document.getElementByTagNameというメソッドを利用するのですが、その戻り値の型はHTMLCollectionという型になります。見た目は配列型に見えるのですが、この型では配列型に利用できるメソッドが利用できません。
callメソッドは、呼び出したいメソッドを持つオブジェクト.prototype.呼び出したいメソッド.call(対象のオブジェクト, 呼び出したいメソッドに渡す引数)と指定します。collection変数に対して、sliceを適用させたい場合は、
Array.prototype.slice.call(collection, 2, 4)というように指定します。
var collection = document. getElementsByTagName('li');
var result = Array.protorype.slice.call(collection, 2, 4);
console.log(result);mapによる繰り返し処理例 JavaScriptにはメソッドチェーンという考え方があります。これは、メソッドを繋げて複数の処理を一行で記述することができ、プログラムがスマートになります。
var list = ['id list', 'id=1', 'id=4', 'id=7', 'id=11'];
var result = list.slice(1).map(item => item.slice(3));
console.log(result); //[ '1', '4', '7', '11' ]このコードの処理の流れを説明します。まず、list.slice(1)でlistの0番目の要素を削除した配列が返されます。itemには配列の各要素が渡され、その各要素の文字列に対してsliceメソッドで文字列の切り出しを行っています。
このように、sliceメソッドで新しく作成した配列に対して別のメソッドを適用する場面は、JavaScriptプログラムにおいてたくさんあります。
sliceに似た処理ができるJavaScriptのメソッド 最後に、sliceメソッドと似た処理ができるJavaScriptのメソッドを紹介します。
substringメソッド JavaScriptのsubstringメソッドは、文字列型に対するsliceメソッドと同じ用途で利用できるメソッドです。文字列.substring(開始位置, 終了位置)で指定します。
var sample = 'あいうえおかきくけこ';substrメソッド JavaScriptのsubstrメソッドも、文字列を抜き出すためのメソッドです。しかし、sliceメソッドやsubstringメソッドと引数の指定の仕方が異なります。文字列.substr(開始位置, 切り取る長さ)といった形で指定します。
var sample = 'あいうえおかきくけこ';また、開始位置に負の整数を指定することもできます。その場合は、「文字列の長さ + 指定した負の整数」が開始位置となります。第二引数に負の数や0を指定した場合は空文字列が返されます。
var sample = 'あいうえおかきくけこ';
var result = sample.substr(-4);
var result2 = sample.substr(-4, 2);
var result3 = sample.substr(2, -1);
console.log(result); //きくけこ
console.log(result2); //きく
console.log(result3); //spliceメソッド JavaScriptのspliceメソッドは、配列から要素を抜き出し新しい配列を作成するメソッドです。配列.splice(開始位置, 抜き出す要素の数)と指定します。
var sample = ['ポテト', 'ナゲット', 'コーラ', 'ハンバーガー'];また、開始位置に負の整数を指定することもできます。その場合は、「配列の長さ + 指定した負の整数」が開始位置となります。第二引数に負の数や0を指定した場合は空配列が返されます。
var sample = ['ポテト', 'ナゲット', 'コーラ', 'ハンバーガー'];また注意点として、このメソッドは破壊的メソッドであることが挙げられます。破壊的メソッドとは、メソッドを作用させる対象のオブジェクト自体を変化させてしまうメソッドの事を言います。
var sample = ['ポテト', 'ナゲット', 'コーラ', 'ハンバーガー'];resultとresult2は同じ値になっていますが、それぞれのメソッドを作用させたsampleの値が異なっていることがわかります。sliceメソッドは元の配列を変化させませんが、spliceはもとの配列を変化させてしまいます。
まとめ 今回は、JavaScriptのsliceメソッドの使い方について解説しました。基本的な使い方から、callメソッドやmapメソッドを利用した応用的な使い方まで解説しましたので、それぞれの使い方をしっかり理解して実践で使えるようになりましょう。
変数はプログラミング基礎の1つですが、わかりにくいコンセプトでもあります。本記事ではそもそも変数とは何か、JavaScriptではどうやって使うのかということを解説しています。変数・定数を作るためのvar、let、constの3つの関数についても紹介します。
JavaScriptの変数とは
Free stock photos of things – Kaboompics
変数はどんなもの？ 変数はデータの値を格納する「箱」のことです。
変数は全てのプログラムに共通する 変数はJavascriptに限らず、あらゆるプログラム言語に共通する機能です。
変数の命名規則
Name Nameplate Badges · Free vector graphic on Pixabay
変数には必ず名前をつける 変数には必ず名前をつける必要があります。
JavaScriptの変数名のルール① Unicode文字と「_」「$」だけしか使えない JavaScriptの変数名は、Unicode文字とアンダースコア「_」とドル「$」の2種類の記号だけしか使えません。 userNameuser_Name$userName
JavaScriptの変数名のルール② 大文字と小文字は違う文字と認識される JavaScriptでは大文字と小文字が違う文字として区別されます。 nameName
JavaScriptの変数名のルール③ 1文字目は小文字にする JavaScriptでは、変数名の1文字目を慣例的に小文字にします。 UserName → 〇userName //先頭1文字目を小文字にする
JavaScriptの変数名のルール④ 1文字目に数字は使えない Javascriptでは、変数名の1文字目に1～9の数字は使えません。 1userName → 〇userName1
JavaScriptの変数名のルール⑤ 予約語は使えない 変数名にJavaScriptの予約語は使えません。 varforifcaseelsenew
JavaScriptの予約語一覧 (MDN)
JavaScriptではvarで変数を宣言する
Jorge Jesus · Photography
JavaScriptでは「var」+(変数名) +セミコロン「;」と記述して変数を宣言します var userName;
JavaScriptで複数の変数をまとめて宣言する Javascriptでは複数の変数をまとめて宣言できます。変数名はカンマ「,」で区切って並べます。 var userID, userName, userAddress;var userID,
varを使って変数を定義する Varで変数を宣言する時、イコール「=」を使って変数を定義する事ができます。 var num = 1;
データの型とは 変数に格納するデータの種類は「型」と呼ばれます。主に「数字型」「文字列型」「論理型」があります。
JavaScriptでは変数の型は変更時に自動判別される
Choice Select Decide · Free photo on Pixabay
JavaScriptでは変数の値を変更する時に「型」が自動判別されます。特に数字型と文字列型が判別されるポイントは、「’」「”」で囲むかどうかです var num = 1;var str = '1';var name = '山田太郎';
論理型は周囲を記号で囲まない 論理型は数字と同じく周囲を記号で囲みません。 var bool = true;var bool = false;var a = 'true';
JavaScript変数を定義しないとどうなるか JavaScriptでは、変数を宣言した段階で初期値としてundefinedという値がセットされます。
オブジェクト型 変数に格納できるデータで、数字型、文字列型、論理型とundefinedとnull以外のデータは「オブジェクト型」と呼ばれています。
代表的な型 型 説明 データ値 数字型 整数と小数 1、2、3… 文字列型 文字列 “山田”、’鈴木’… 論理型 True or false true、false undefined 未定義 undefined null 空白 null オブジェクト型 上記以外すべて
変数のスコープとは
東郷長官愛用のカールツァイス双眼鏡 Admiral TOGO’s Carl Zeiss binoculars – 横須賀市、記念艦 三笠の写真 – トリップアドバイザー
変数が使える範囲をスコープといいます。スコープは「グローバル変数」と「ローカル変数」の2種類があり、変数を宣言する場所で範囲が決まります。
変数の巻き上げとは
Puzzle Share Question Mark · Free image on Pixabay
JavaScript特有のクセとして、変数の巻き上げがあります。変数の巻き上げは、変数を宣言する前に、変数が参照できてしまう現象です。
JavaScriptで変数の中身を確認する方法 変数の中身を見るためには、console.logという方法(メソッド)という方法があります。 var name = '山田'console.log(name)
変数の巻き上げでは、undefinedが確認される 変数の巻き上げでは、変数が定義されておらず、未定義を意味するundefinedが確認できます。 console.log(name)var name = '山田'
JavaScriptで変数巻き上げを回避するには 変数の巻き上げを回避するためには、先に変数を定義してしまうことです。
JavaScriptでvar以外で変数を宣言する方法
100+ Pc Pictures | Download Free Images on Unsplash
JavaScriptには、var以外にも宣言を行う方法があります。「let」と「const」の2つです。
letを使ったローカル変数宣言 letは新しく追加された変数の宣言方法で、ローカル変数を宣言する時に使用します。宣言の方法は簡単です。下記のようにvarの変わりにletと記述するだけです。 let num = 1let num = 1let num = 1
constを使った定数の宣言 Constは値を入れ替える事ができない定数を宣言する方法です。宣言の方法は簡単で、下記のようにvarの変わりにconstと記述するだけです。 const char = 'JP'これより後の行でcharの中身を上書きしようとしても、エラーになります。
まずはJavaScriptをはじめてみよう！
Cafe Cup Pc · Free photo on Pixabay
JavaScriptは、Web業界標準の強力なプログラム言語です
