トラック
/
JavaScript
JavaScript
/
演習
/
ルシアンの絶品ラザニア
ルシアンの絶品ラザニア

ルシアンの絶品ラザニア

学習演習

はじめに

JavaScriptは動的言語で、オブジェクト指向、命令型、宣言型(たとえば関数型プログラミング)といったスタイルをサポートしています。

変数

JavaScriptで名前に値を割り当てるには、主にいくつかの方法があります。変数を使う方法と、定数を使う方法です。 Exercismでは、変数は常にcamelCaseで書き、定数はSCREAMING_SNAKE_CASEで書きます。 従うべき公式のガイドがあるわけではなく、企業や組織によってスタイルガイドはそれぞれ異なります。 変数の書き方は、好きなようにしてかまいません。 演習で用意されているとおりに書くことの利点は、ウェブインターフェースやほとんどのIDEで変数と定数が区別してハイライトされることです。

JavaScriptでは、const、let、varのキーワードを使って変数を定義できます。

letやvarを使うと、その変数の有効期間中に別の値を参照させることができます。 たとえばmyFirstVariableは、代入演算子=を使って何度も定義し直すことができます。

let myFirstVariable = 1;
myFirstVariable = 'Some string';
myFirstVariable = new SomeComplexClass();

letやvarとは対照的に、constで定義した変数に代入できるのは一度だけです。 JavaScriptでは、これを使って定数を定義します。

const MY_FIRST_CONSTANT = 10;

// Can not be re-assigned.
MY_FIRST_CONSTANT = 20;
// => TypeError: Assignment to constant variable.
Note

💡 後のコンセプト演習では、定数の代入、定数の束縛、定数の値、この3つの違いについて掘り下げて説明します。

関数宣言

JavaScriptでは、機能のまとまりは関数にカプセル化されます。互いに関連する関数は、通常、同じファイルにまとめます。 関数には仮引数があり(そのため引数を受け取ることができます)、returnキーワードを使って値を返すことができます。 関数は()の構文で呼び出します。

function add(num1, num2) {
  return num1 + num2;
}

add(1, 3);
// => 4

この例では、関数名はaddです。 2つの仮引数num1とnum2を持っています。 そして、式num1 + num2の結果を値として返します。

次に、関数addを2つの引数1と3で呼び出します。 関数の結果、つまり戻り値は4です。

Note

💡 JavaScriptには、関数を宣言する方法がたくさんあります。 functionキーワードを使うやり方とは見た目の違うものもあります。 このトラックでは、それらを少しずつ紹介していく予定ですが、すでに知っている場合はどれを使ってもかまいません。 ほとんどの場合、どちらを使ったからといって良し悪しがあるわけではありません。

他のファイルから使えるようにする

functionや定数、変数を他のファイルから使えるようにするには、exportキーワードを使ってエクスポートする必要があります。 そうすると、別のファイルからimportキーワードを使ってこれらをインポートできます。 これはモジュールシステムとも呼ばれます。

よい例が、すべてのテストの仕組みです。 各演習には、少なくとも1つのファイルがあります。たとえばlasagna.jsで、これに実装が含まれています。 実装はそのファイルからexportされ、別のファイルからインポートできるようになります。 さらに、テストが書かれた別のファイルが少なくとも1つあります。たとえばlasagna.spec.jsです。 このファイルは、実装をテストするために、公開されている(つまりexportされた)ものをimportします。

// file.js
export const MY_VALUE = 10;

export function add(num1, num2) {
  return num1 + num2;
}

// file.spec.js
import { MY_VALUE, add } from './file';

add(MY_VALUE, 5);
// => 15

説明

ルシアンの恋人が帰宅途中なのに、彼は記念日のディナーをまだ作っていません!

この演習では、ルシアンがお気に入りの料理本のレシピで絶品ラザニアを作るのを手伝うコードを書いていきます。

ラザニアの調理にかかる時間に関係する4つのタスクがあります。

1. オーブンに入れておくべき時間(分)を定義しましょう

ラザニアをオーブンに入れておくべき時間(分)を表すEXPECTED_MINUTES_IN_OVEN定数を定義しましょう。この定数はエクスポートする必要があります。料理本によると、オーブンに入れておくべき時間(分)は40です。

2. オーブンでの残り時間(分)を計算しましょう

ラザニアをオーブンに入れていた実際の時間(分)を_入力_として受け取り、前のタスクの**オーブンに入れておくべき時間(分)**をもとに、ラザニアをあと何分オーブンに入れておく必要があるかを_返す_remainingMinutesInOven関数を実装しましょう。

remainingMinutesInOven(30);
// => 10

3. 準備時間(分)を計算しましょう

ラザニアに追加した層の数を_入力_として受け取り、各層の準備に2分かかると仮定して、ラザニアの準備に何分かかったかを_返す_preparationTimeInMinutes関数を実装しましょう。

preparationTimeInMinutes(2);
// => 4

4. 合計の作業時間(分)を計算しましょう

2つの入力_を受け取るtotalTimeInMinutes関数を実装しましょう。numberOfLayersは、ラザニアに追加した層の数です。actualMinutesInOvenは、ラザニアをオーブンに入れておいた時間(分)です。この関数は、ラザニアの調理に合計で何分取り組んだかを_返します。これは、準備時間(分)と、その時点でラザニアがオーブンに入っていた時間(分)の合計です。

totalTimeInMinutes(3, 20);
// => 26
GitHubで編集する リンクは新しいウィンドウまたはタブで開きます
JavaScript Exercism

ルシアンの絶品ラザニアを始める準備はできましたか?

Exercismに登録すれば、37個のコンセプト159個の演習、そして本物の人間によるメンタリングとともに、JavaScriptを学んでマスターできます。すべて無料です。