浅野直樹の学習日記

ここしばらくは日常的な仕事に加え、新しく立ち上げようとしているウェブサービスの制作に勤しんでいます。今年の司法試験予備試験は受ける余裕がなさそうです。

考えることが多くて混乱してきたので、自分の頭を整理するためにWebサイト制作の個人史を書こうと思い立ちました。

１．HTML

中学や高校では申し訳程度にパソコンに触ったことがあるだけでした。友人の中に一人だけ自分のホームページを持っていた人がいたくらいです。それを高校の図書館のパソコンから見たことをおぼえています。

初めてパソコンにしっかりと触れ、HTMLを知ったのは、大学に入学した2001年のことでした。大学の教養科目の中にそのような授業があったのです。ハイパーリンクを貼ることくらいはできるようになりました。

２．レンタルサーバ（FTPアップロード）

大学の授業で作ったWebサイトは半年で消されてしまったので、今度は自分でレンタルサーバにアップロードしようとしました。

まだまだ回線速度が遅く、文字と画像だけのサイトを開くだけでもそれなりに時間がかかった時代です。無料のレンタルサーバを探すだけでも苦労しました。

そしてFTPでファイルをサーバにアップロードするということだけでも何が何やらわからない状態でした。解説サイトを見ながらFFFTPというソフトをダウンロードして…という世界です。

htmlファイルをレンタルサーバにFTPでアップロードするというところまではできるようになりました。

３．レンタルCGI

次に作りたくなるのは掲示板のような動きのあるサイトです。いろいろなサイトでの解説を手がかりに、レンタルCGIに挑戦しました。

当時はプログラミングを全く知らず、どういう原理なのかもわからないまま、レンタルCGIで掲示板を設置しました。

Apacheの設定とパーミッションに苦労させられた記憶があります。

当時は私と同じようなことをしていた人もそれなりにいたのでしょう。まったく同じデザインの掲示板をあちこちで見かけたものです。

４．Perlで自作CGI（前編）

ここで数年時代がとんで2010年頃の話です。

今も続いている京都アカデメイアという団体を立ち上げてそのホームページを作ることになりました。

最初はデザイン色の強い人からDreamweaverを使えばいいよと言われて、実際にしばらく触ってみました。よくわからないままにとにかくdivタグを入れまくっていました。当時はWebサイト制作にシステム面とデザイン面があるということを意識していませんでした。

これではダメだと思い至り、動的なサイトを作るにはCGIを使うということは知っていたので、『10日でおぼえるCGI』のようなタイトルの本を読んだりしましたが、なかなか全体像をつかめずにいました。PerlとCGIの区別もついていなかったのです。

５．Perlで自作CGI（後編）

F先生にウェブプログラミングを教えてもらったのが転機となりました。

Perlはプログラミング言語でCGIはサーバ上でプログラムが動く仕組みのことだといった初歩から、MVCという概念、そしてしっかり学ぶにはオライリーの本を読めばよいといったその業界での常識のようなものも教えてもらいました。

まずは開発環境の構築からです。それまでは当たり前のようにWindowsを使っていましたが、LinuxのUbuntuに乗り換えました。最初はターミナルからちょっとしたコマンドを打つのにいちいち抵抗を感じていましたが、慣れれば快適です。これだけでも一生の財産です。

データベースにはMySQLを使いました。数学や論理が好きなので、正規化などのSQLの世界観にはすぐに馴染めました。馴染みすぎて他人がExcelなどで同じデータを複数箇所に入力していると我慢できなくなったほどです。

サーバサイドプログラミング言語はPerlです。当時なら当然の選択でしょう。オライリー本と格闘しました。アルパカ本のオブジェクト指向あたりからかなり理解が怪しくなりましたが。

具体的には、CGI::Applicationをベースにして、Template::Toolkitなどを使いました。

クライエントサイドプログラミング言語はJavaScript一択ですよね。それは当時も今も変わらないと思います。初めてjQueryを触ったときにはこれほど複雑な動きを簡単に実現できるなんてと感動しました。

HTMLとCSSを分離するということもこの頃から意識するようになりました。

そうして完成したのが京都アカデメイアのサイトです。

６．WordPress

本ブログも含めていろいろなところでWordPressを活用させてもらっています。

簡単に導入できるのが最大の理由です。私はデザインやSEOが全くできないということも、それらに対応してくれているWordPressを利用する大きな理由です。

WordPressはPerlではなくPHPで開発されていますが、ちょっとしたカスタマイズなら見様見真似で何とかなりますし、これまでに身につけたFTPやSQLの知識のおかげでエラーや引っ越しの際にも対応ができました。

７．Webサイト制作以外への転用（SQL、TeX、VBA、Python）

ここで少し脱線してWebサイト制作以外のことも書かせてもらいます。

MySQLで得たSQLの経験は団体の事務や会計を担当する際に活かすことができました。LibreOfficeのBase（Microsoft Accessに相当）で名簿や会計帳簿を一元的に管理するようにしています。データを一箇所で管理しているので修正漏れがありませんし、決算のための集計もクリック一つでできます（Excelのピボットテーブルはややこしくて嫌です）。

塾講師という仕事のためにはTeXが重宝しております。emathも利用して以下のようなきれいな表示ができるのでありがたいです。

個人的にはLinux（Lubuntu）でLibreOfficeを使っているのですが、世の中ではまだまだMicrosoft OfficeのWordやExcelが使われています。そのため、必要性に迫られてExcelでVBAを作ったこともあります。

ごく最近のこととして、Pythonにも少し手を出してみました。Automate the Boring Stuff with Pythonが非常におすすめです。リンク先から全文が読めます。冊子体の日本語訳も存在しています。これならWindows環境下でもVBAを使わずにあらゆることがPythonでできそうです。

それまでにプログラミングの経験があったので、これらに挑戦するのにあまり抵抗がありませんでした。

８．PSGI/Plack

話をWebサイト制作に戻しまして、ここからが本題です。2019年現在でどのようにしてWebサイトを作るのかという問題です。

まず、サーバサイドプログラミング言語がPerlでよいのか悩みました。それでPythonにも手を出してみたというわけです。

PythonとPerlとでは、行儀作法や利用できるモジュール群に違いはあるものの、Webサイトを制作する上で本質的な違いはないのではないかというのが、Pythonの入門をかじった段階での感想です。

PHPでできることはPerlでもできるでしょうし、その他の言語でなければならないという理由が見つからなかったので、Perlを使い続けることに決めました。

PSGI/Plackの存在を知ったことも、Perlを使い続ける方向に傾いた大きな要因です。素のCGIでは速度が遅いことが問題だと感じていました。mod_perlやFastCGIは名前だけ聞いたことがあり使ったことはないという段階から、それらをすっ飛ばしてPSGI/Plackに進みました。

GitHub – miyagawa/plack-handbookを最重要資料として、他のサイトも参考にしながら悪戦苦闘しているところです。

PSGI/Plackについて調べているときに役立ったPerl Hackers Hub：連載｜gihyo.jp … 技術評論社を過去に遡って読み返しました。そして環境管理にplenv、テンプレートにXslate、WebサーバにApacheではなくNginxを使うことに決めました。

CGI::ApplicationはPSGIに対応しており、XslateにはTemplate Toolkit風のTTerseという記法があるので、移行が比較的スムーズに進みました。とはいえ、文字コードで悩むのはお約束として、sessionやredirectでも大いに悩み、XslateのTTerseではTemplate Toolkitとは異なって裸のINCLUDEが認められていないことに気づかずハマるなど、結構な苦労はありました。

何よりわからなかったのがサーバ関係です。通常のレンタルサーバでPSGIを動かそうと丸一日以上がんばって実験的に動かすことができた挙句に、PSGIを常態として動かすには少なくともVPS環境が必要であると気づきました。

ソーシャルログインにも初めて挑戦しました。公式元からはPerlのためのAPIが提供されておらず、ほぼ自作しました（自作といってももちろんLWP::UserAgentなどのモジュールは利用しています）。Google, Yahoo, Facebook, Twitter, LINEの5種類でどうにか成功に漕ぎつけました。

セキュリティ面にも不安があるのですが、安全なウェブサイトの作り方：IPA 独立行政法人 情報処理推進機構に目を通しつつ、クレジットカード番号や住所・氏名などのデータをそもそも収集しない、こまめにバックアップを取る、といった大枠での対応を考えています。

９．まとめ

こうして振り返ってみると、2000年前後、2010年前後、2020年前後とおよそ10年ごとにWebサイト制作に集中的に取り組んできました。2000年前後にはHTMLとレンタルCGI、2010年前後にはMVCで自作CGI、2020年前後にはPSGI/Plackと、それぞれの時点で普及している技術に追いついてきたつもりです。最先端からはそれぞれ10年ほど遅れているかもしれません。

ここまでこの記事を書いて少しは頭の整理ができたので、そろそろ地道な作業に戻ります。

『初めてのJavaScript（第3版 ）』非公式練習問題 – 浅野直樹の学習日記で作った『初めてのJavaScript（第3版 ）』非公式練習問題の解答例です。自分で学習しながら作ったものなので不備があるかもしれません。

 

２章

練習問題

ex02-08-1のjsファイルを次のように書き加えます。

$(document).ready(function() {
  'use strict';
  paper.install(window);
  paper.setup(document.getElementById('mainCanvas'));

  let tool = new Tool();

  tool.onMouseDown = function(event) {
    let c = Shape.Circle(event.point.x, event.point.y, 80);
    c.fillColor = 'blue';
    let text = new PointText(event.point.x, event.point.y);
    text.justification = 'center';
    text.fillColor = 'yellow';
    text.fontSize = 20;
    text.content = 'hello world';

  };
});

 

３章

練習問題１

次のようなjsファイルを作ります。

const date = new Date();
let message1 = "今日は" + date.getFullYear() + "年" + (date.getMonth()+1) + "月" + date.getDate() + "日です。\n"
date.setDate(date.getDate()+20);
let message2 = "20日後は" + date.getFullYear() + "年" + (date.getMonth()+1) + "月" + date.getDate() + "日です。\n"
console.log(message1, message2);

 

練習問題２

次のようなjsファイルを作ります。

const b4 = [
  { 名前: "ルビー", 硬度: 9 },
  { 名前: "ダイヤ", 硬度: 10 },
  { 名前: "トパーズ", 硬度: 8 },
];
b4[99] = { 名前: "象牙", 硬度: 2.5 };
let message = b4[b4.length - 1].名前 +"の硬度は" + b4[b4.length - 1].硬度 +"です。";
console.log(message);

 

４章

練習問題

次のように、challengeという変数を新たに作り、whileにとどまる条件を変えて、手持ち資金が0になれば再挑戦するようにします。

'use strict';
function rand(m, n) {
  return m + Math.floor((n - m + 1)*Math.random());
}

function randFace() {
  return ["crown", "anchor", "heart", "spade", "club", "diamond"]
  [rand(0, 5)];
}

let funds = 50;
let round = 0;
let challenge = 1;

while(funds < 100) { 
  round++;
  console.log(`第${round}ラウンド: `);
  console.log(`  手持ち資金: ${funds}`);
  let bets = { crown: 0, anchor: 0, heart: 0,
               spade: 0, club: 0, diamond: 0 };
  let totalBet = rand(1, funds);
  if(totalBet === 7) {
    totalBet = funds;
    bets.heart = totalBet;
  } else { 
    let remaining = totalBet;
    do {
      let bet = rand(1, remaining);
      let face = randFace();
      bets[face] = bets[face] + bet;
      remaining = remaining - bet;
    } while(remaining > 0)
  }
  funds = funds - totalBet;
  console.log(`  賭け金: ${totalBet}（` +
         Object.keys(bets).map(face => `${face}: ${bets[face]}`).join(', ') +
         "）");

  const hand = [];
  for(let roll = 0; roll < 3; roll++) {
    hand.push(randFace());
  }
  console.log(`  出目: ${hand.join(', ')}`);

  let winnings = 0;
  for(let die=0; die < hand.length; die++) { let face = hand[die]; if(bets[face] > 0) winnings = winnings + bets[face];
  }
  funds = funds + winnings;
  console.log(`  払戻金: ${winnings}`);
  if (funds <= 0) {
    funds = 50;
    round = 0;
    challenge++;
  }
}

console.log(`  残金: ${funds}`);

console.log(challenge + "回目の挑戦で意気揚々と船に戻りました。");

 

５章

練習問題

例えば以下のようにします。

const nums = [ 3, 5, 15, 7, 5 ];
let n, i=0, j=0;
while(i<nums.length && (n = nums[i++]) % 2 ) {
  console.log(`奇数を発見：${n}`);
  j++;
}
if (i !== j) {
  console.log(`偶数を発見：${n}`);
}
console.log(`未チェックの数字の個数：${nums.length-i}`);

 

６章

練習問題

例えば次のようなjsファイルを作ります。

const asano = { 名前: "浅野" };

function update(birthYear, occupation, address) {
   this.誕生年 = birthYear;
   this.職業 = occupation;
   this.居住地 = address;
}

console.log(asano);

update.call(asano, 1982, "塾講師", "京都府");
update.apply(asano, [1982, "塾講師", "京都府"]); // この行のapplyか上の行のcallのどちらか１つでよい。
console.log(asano);

const updateAsano1982 = update.bind(asano, 1982);
updateAsano1982("プログラマー", "東京都");
console.log(asano);

 

７章

練習問題

オブジェクトのプロパティを書き換えた場合にはスコープから外れても値が元に戻りません（6.3を参照）。

function update(birthYear, occupation, address) {
   this.誕生年 = birthYear;
   this.職業 = occupation;
   this.居住地 = address;
}

{ /* 外側のブロックの始まり */
  let asano = { 名前: "浅野", 誕生年: 1982, 職業: "塾講師", 居住地: "京都府"};
  console.log(asano); 
  { /* 内側のブロックの始まり */
    update.call(asano, 1982, "塾講師", "東京都");
    console.log(asano);
  } /* 内側のブロックの終わり */
  console.log(asano);
} /* 外側のブロックの終わり */
console.log(typeof asano);

 

８章

練習問題１

以下のようにします。

let arr = [{ name: "Suzanne" }, { name: "Jim" },
	     { name: "Trevor" }, { name: "Amanda" }];
arr.sort((a, b) => a.name > b.name);  // nameでソート
arr.sort((a, b) => a.name.length > b.name.length); //文字数でソート
console.log(arr);

 

練習問題２

以下のようにします。

function 記号表現に変換する(カード) {
  const マーク名_絵文字
	  = { 'ハート': '♡', 'クローバー': '♧', 'ダイア': '♢', 'スペード': '♤' };
  const 数字からAJQK = { 1: 'A', 11: 'J', 12: 'Q', 13: 'K' };
  for(let i=2; i<=10; i++) 数字からAJQK[i] = i;
  return マーク名_絵文字[カード.マーク]+数字からAJQK[カード.数字];
}


const カードの束 = [];
for(let マーク of ['ハート', 'クローバー', 'ダイア', 'スペード']) // 全カードを生成
   for(let 数字=1; 数字<=13; 数字++) カードの束.push({ マーク, 数字}); 

let 選択されたカード_記号表現 
    = カードの束.filter(カード => カード.マーク === 'スペード' && (カード.数字 >= 10 || カード.数字 === 1)).map(記号表現に変換する);
console.log(選択されたカード_記号表現);

練習問題３

次のようにします。

const words = ["Beachball", "Rodeo", "Angel",
	       "Aardvark", "Xylophone", "November", "Chocolate",
	       "Papaya", "Uniform", "Joker", "Clover", "Bali"];
const longWords = words.filter(word => word.length > 6);
let result = longWords.join(' ');
console.log(result);

const 単語リスト
	= ["ビーチボール", "ルービックキューブ", "ブタペスト", "トロッコ",
	   "コンゴ", "ゴースト", "トーラス", "スマート", "トンガ",
	   "ガラパゴス", "ストリート", "トーマス", "ストレッチ",
	   "チベット", "トキ", "キツツキ", "キリン"];
const 長い単語 = 単語リスト.filter(単語 => 単語.length >= 5);
let 結果 = 長い単語.join(' ');
console.log(結果);

 

９章

練習問題

例えば以下のようにします。

class Vehicle { 
  constructor() {
    this.passengers = [];
    console.log("Vehicleが生成された");
  }
  addPassenger(p) { 
    this.passengers.push(p);
    console.log(`${p}が${this.constructor.name}に乗り込み、今${this.passengers.length}人乗っています。`);
  }
}

class Car extends Vehicle { 
  constructor() {
    super();
    this.capacity = 5; 
    console.log("Carが生成された");
  }
  addPassenger(p) {
    Vehicle.prototype.addPassenger.call(this, p);
    if (this.capacity - this.passengers.length < 0) {
      console.log('定員オーバーです');
      return;
    }
    console.log(`あと${this.capacity - this.passengers.length}人です`);
  }
}

const v = new Vehicle();
v.addPassenger("太郎");
v.addPassenger("花子");

const c = new Car();
c.addPassenger("景子");
c.addPassenger("ミドリ");
c.addPassenger("一郎");
c.addPassenger("二郎");
c.addPassenger("三郎");
c.addPassenger("四郎");
c.addPassenger("五郎");

 

１０章

練習問題

次のようにします。

const u1 = { name: '和洋' };
const u2 = { name: '花子' };
const u3 = { name: '涼子' };
const u4 = { name: '哲人' };

const userRoles = new Map();

const rolesU1 = new Set();
rolesU1.add("ユーザー");
userRoles.set(u1, rolesU1);

const rolesU2 = new Set();
rolesU2.add("管理者");
userRoles.set(u2, rolesU2);

const rolesU3 = new Set();
rolesU3.add("ユーザー");
rolesU3.add("管理者");
userRoles.set(u3, rolesU3);

const rolesU4 = new Set();
userRoles.set(u4, rolesU4);

for (let [u, r] of userRoles.entries()) {
  let allRoles = [];
  for (let value of r.values()) {
    allRoles.push(value);
  }
  console.log(`${u.name}: ${allRoles}`);
}

１１章

練習問題

次のようにします。

const email = "jane@doe.com;

function validateEmail(email) {
  return email.match(/@/) ? 
    email :
    new Error(`無効なメールアドレスです：${email}`);
}

try {
  const validatedEmail = validateEmail(email);
  console.log(validatedEmail);
  if(validatedEmail instanceof Error) {
    console.error(validatedEmail.message);
  } else {
   console.log(`正しい形式のアドレス：${validatedEmail}`);
  }
} catch(err) {
  console.error(`エラー：${err.message}`);
} finally {
  console.log("この行はいつも実行される");
}

 

１２章

練習問題

次のようにします。

function* interrogate() { 
  const name = yield "お名前は？";
  if (!name) {
    return "お名前がないので終了します。";
  }
  const color = yield "お好きな色は何ですか？";
  return `${name}さんの好きな色は${color}だそうですよ。`;
}
const it = interrogate();
console.log(it.next());
console.log(it.next('')); 
console.log(it.next('緑'));
console.log(it.next()); 

 

１３章

練習問題１

これは色がとばされます。

setInterval(function() { 
   document.querySelector('.rainbow')
      .style['background-color'] = getNextRainbowColor();
}, 500); 

setInterval(function() { 
   getNextRainbowColor();
}, 800); 

const getNextRainbowColor = (function() {
  const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
  let colorIndex = -1;
  return function() {
    if(++colorIndex >= colors.length) colorIndex = 0;
    return colors[colorIndex];
  };
})();

 

これは色がとばされません。

const rainbowIterator = getRainbowIterator();
setInterval(function() {
  document.querySelector('.rainbow')
    .style['background-color'] = rainbowIterator.next().value;
}, 500);

setInterval(function() {
  getRainbowIterator();
}, 800);

function getRainbowIterator() {
  const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
  let colorIndex = -1;
  return {
    next() {
      if(++colorIndex >= colors.length) colorIndex = 0;
      console.log("in iterator: "+colors[colorIndex])
      return { value: colors[colorIndex], done: false };
    }
  };
}

 

練習問題２

例えば次のようにします。

function fibonacci(m, n) {
  console.log(n);
  if (n > 10000) {
    return;
  }
  o = n;
  p = m + n;
  fibonacci(o, p);
}

fibonacci(1, 1);

 

１３章

練習問題

例えば次のようにします。

function countdown(seconds) {
  const timeoutIds = [];
  for(let i=seconds; i>=0; i--) {
    timeoutIds.push(setTimeout(function() {
      if(i===13) {
        timeoutIds.forEach(clearTimeout);
	  const err = new Error(`${i}という数は不吉過ぎます`);
        console.error(err);
        return;
      }
     if(i>0) console.log(i + '...');
     else {
      console.log("GO!");
      launch(10000);
      }
     }, (seconds-i)*1000))
   }
}

function launch(period) {
  const timeoutId = setTimeout(function() {
    const err = new Error('時間切れです。');
    console.error(err);
  }, 4000);
  if(Math.random() < 0.5)
  return;
  console.log("発射!");
  setTimeout(function() {
    console.log("周回軌道に乗った！");
    clearTimeout(timeoutId);
  }, 2*1000); 
}

countdown(3);

１５章

練習問題

moment.jsを使って次のようにします。

const d = moment.tz([2018, 1, 21, 15, 00], 'Europe/London');
console.log(d.format("YYYY年M月D日HH:mm") + "にロンドンを出発しました。")
d.add(13, 'hours');
d.tz('Asia/Tokyo');
console.log(d.format("YYYY年M月D日HH:mm") + "に東京に到着しました。")

１６章

練習問題

次のようにします。配列は0からスタートすることに注意してください。htmlファイルで<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>としてNumeral.jsを読み込んでください。

const revenues = [{"北海道":2434886692}, {"青森県":694217643}, {"岩手県":1129941686}, {"宮城県":1383490525}, {"秋田県":605089076}, {"山形県":580851300}, {"福島県":2096640231}, {"茨城県":1087054495}, {"栃木県":763338596}, {"群馬県":736096433}, {"埼玉県":1722075796}, {"千葉県":1659525591}, {"東京都":7122485322}, {"神奈川県":2032743502}, {"新潟県":1055947285}, {"富山県":508721490}, {"石川県":567888708}, {"福井県":450596001}, {"山梨県":465327187}, {"長野県":819099327}, {"岐阜県":773302893}, {"静岡県":1152621919}, {"愛知県":2263393575}, {"三重県":700154974}, {"滋賀県":509495460}, {"京都府":899170238}, {"大阪府":2776964207}, {"兵庫県":1962884485}, {"奈良県":493578569}, {"和歌山県":541231559}, {"鳥取県":358191520}, {"島根県":505631628}, {"岡山県":685819845}, {"広島県":923347710}, {"山口県":640430917}, {"徳島県":478647031}, {"香川県":448601297}, {"愛媛県":622066841}, {"高知県":453349565}, {"福岡県":1693270092}, {"佐賀県":435430115}, {"長崎県":695693042}, {"熊本県":1018938275}, {"大分県":572602476}, {"宮崎県":565437227}, {"鹿児島県":789070662}, {"沖縄県":747747470}]

let rand = 1 + Math.floor(47*Math.random());
for (key in revenues[rand-1]) {
  console.log(`2016年の${key}の歳入は${numeral(revenues[rand-1][key]).format('0,0')}円です。`);
}

 

１７章

練習問題

次のようにします。

const text = "Visit oreilly.com today!";
const link = text.replace(/([a-z0-9]+(?:\.com|\.org|\.edu))/ig, '<a href="$1">$1</a>');
console.log(link);

 

１８章

練習問題

例えば次のようにします。

document.querySelector('button').addEventListener('click', ChangeAndAddText);
function ChangeAndAddText(evt) {
  evt.preventDefault();
  const text1 = document.getElementById("text1").value;
  const originalp = document.querySelector('p');
  originalp.textContent = text1;
  originalp.classList.add('red');  
  const text2 = document.getElementById("text2").value;
  const p = document.createElement('p'); 
  p.textContent = text2;
  document.querySelector('body').appendChild(p);
}

 

１９章

練習問題

例えば次のようにします。

$(function() {
$('button').click(ChangeAndAddText);
function ChangeAndAddText(evt) {
  evt.preventDefault();
  const text1 = $('#text1').val();
  $('p').eq(0).text(text1).addClass('red');
  const text2 = $('#text2').val();
  const p = $('

‘); p.text(text2); $(‘body’).append(p); } })

２０章

練習問題

例えば次のようにします。

const fs = require('fs');
const path = require('path');

fs.readFile(path.join(__dirname, 'hello.txt'),
	    { encoding: 'utf8' }, function(err, data) {
  if(err) return console.error('エラー：ファイルから読み込めません。');
  message = data.replace(/Node/g, 'Node.js');
  fs.writeFile(path.join(__dirname, 'hello2.txt'),
            message + '文字列を置換しました。',  function(err) {
    if(err) return console.log('エラー：ファイルに書き込めません。');
  });
});

 

２１章

練習問題

例えば次のようにします。

const COLOR = Symbol();
class Triangle {  
  constructor(a, b, c) {
    this.a = a;
    this.b = b;
    this.c = c;
  }
  get perimeter() {
    return this.a + this.b + this.c;
  }
  get area() {
    const a = this.a;
    const b = this.b;
    const c = this.c;
    return Math.sqrt((a+b+c)*(-a+b+c)*(a-b+c)*(a+b-c))/4;
  }
  set color(value) {
    this[COLOR] = value;
  }
  get color() {
    return this[COLOR];
  }
}
const t = new Triangle(3, 4, 5);
t.color = 'red';
console.log(`外周の長さ: ${t.perimeter}`);
console.log(`面積: ${t.area}`);
console.log(`色: ${t.color}`);