浅野直樹の学習日記

この画面は、簡易表示です

未分類

Webサイト制作の個人史

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

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

1.HTML

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

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

2.レンタルサーバ(FTPアップロード)

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

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

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

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

3.レンタルCGI

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

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

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

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

4.Perlで自作CGI(前編)

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

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

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

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

5.Perlで自作CGI(後編)

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

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

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

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

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

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

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

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

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

6.WordPress

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

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

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

7.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でできそうです。

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

8.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 独立行政法人 情報処理推進機構に目を通しつつ、クレジットカード番号や住所・氏名などのデータをそもそも収集しない、こまめにバックアップを取る、といった大枠での対応を考えています。

9.まとめ

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

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



平成30年司法試験予備試験成績通知(論文)

平成30年司法試験予備試験論文の成績通知を公開します。過去の結果は以下のリンクにあります。

 

 

試験科目 順位ランク
憲法 B
行政法 F
民法 A
商法 A
民事訴訟法 C
刑法 D
刑事訴訟法 F
一般教養科目 D
法律実務基礎科目 D
合計点 231.78
順位 619

 

再現答案も過去の記事にありますので、ご参考になれば幸いです。

 



平成30年司法試験予備試験成績通知(短答)

平成30年司法試験予備試験短答の成績通知を公開します。過去の結果は以下のリンクです。

 

 

 

試験科目 得点
憲法 25
行政法 21
民法 18
商法 12
民事訴訟法 16
刑法 19
刑事訴訟法 20
一般教養科目 51
合計点 182
順位 839

 

法律科目がもっとできたほうがいいですね。



『初めてのJavaScript(第3版 )』非公式練習問題解答例

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

 

2章

練習問題

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';

  };
});

 

3章

練習問題1

次のような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);

 

練習問題2

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


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

 

4章

練習問題

次のように、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 + "回目の挑戦で意気揚々と船に戻りました。");

 

5章

練習問題

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


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}`);

 

6章

練習問題

例えば次のような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のどちらか1つでよい。
console.log(asano);

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

 

7章

練習問題

オブジェクトのプロパティを書き換えた場合にはスコープから外れても値が元に戻りません(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);

 

8章

練習問題1

以下のようにします。


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);

 

練習問題2

以下のようにします。


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(選択されたカード_記号表現);

練習問題3

次のようにします。


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(結果);

 

9章

練習問題

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


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("五郎");

 

10章

練習問題

次のようにします。


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}`);
}

11章

練習問題

次のようにします。


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("この行はいつも実行される");
}

 

12章

練習問題

次のようにします。


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()); 

 

13章

練習問題1

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


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 };
    }
  };
}

 

練習問題2

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


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

fibonacci(1, 1);

 

13章

練習問題

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


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);

15章

練習問題

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") + "に東京に到着しました。")

16章

練習問題

次のようにします。配列は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')}円です。`);
}

 

17章

練習問題

次のようにします。


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);

 

18章

練習問題

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


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);
}

 

19章

練習問題

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


$(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); } })

20章

練習問題

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


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('エラー:ファイルに書き込めません。');
  });
});

 

21章

練習問題

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


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}`);

 

 

 

 



『初めてのJavaScript(第3版 )』非公式練習問題

『初めてのJavaScript(第3版 )』でJavaScriptを学習しています。

 

[amazon_asin num=4873117836]

 

ただ読むだけだと理解が曖昧なままに通り過ぎてしまいそうだったので、練習問題を勝手に作って自分で解きながら学習しました。せっかくなので公開して共有します。

 

本書に収録されている例題のほうは初めてのJavaScript 第3版 —— ES2015以降の最新ウェブ開発 — 例題のダウンロードと実行 — マーリンアームズ株式会社からダウンロードすることができます。

 

2章

練習問題

ユーザーがクリックすると、半径が80で色が青の円の中に”hello world”と黄色の文字が書かれた図形が表示されるようにしてください。

 

3章

練習問題1

「今日の日付は2018年7月19日です。
20日後の日付は2018年8月8日です。」

のように今日の日付を表示して、次の行に20日後の日付がコンソールに表示されるようにしてください(月をまたいでも正しく表示されるでしょうか)。

 

練習問題2

ex03-13-2のb4の配列の100番目に硬度が2.5の象牙を付け加えてください。そしてその配列にアクセスして、コンソールに「象牙の硬度は2.5です」表示してください。

 

4章

練習問題

ex04-01-1を改造して、意気揚々と船に戻ることになるまで繰り返すようにしてください。余裕があれば4.2.9 switch文で紹介されているような縁起担ぎも組み込んでみてください。

 

5章

練習問題

ex05-13-1を改造して、最初の偶数を発見するまで配列内の数字をチェックするようにしてください。配列として[ 3, 5, 15, 7, 5]を与えると以下のように表示されます。与える配列を適当に変えて正しく動作するか確かめてください。

奇数を発見:3
奇数を発見:5
奇数を発見:15
奇数を発見:7
奇数を発見:5
未チェックの数字の個数:0

 

6章

練習問題

ex06-08のシリーズを参考にして、生年、職業、居住地をアップデートする関数を作成し、その関数を用いて(callとapplyの両方で)あなた自身についての情報をアップデートしてください。次に、bindで生年を固定してアップデートしてください。

 

7章

練習問題

最初にあなたの名前、生年、職業、居住地をオブジェクトで作成してください。それからex07-05-2のように二重のスコープを作り、内側のスコープで6章の練習問題で作った関数を使い居住地をアップデートしてください。内側のスコープから外れると値が元に戻っているでしょうか。

 

8章

練習問題1

ex08-02-9を改造して、文字数の少ない順(文字数が同じ場合はアルファベット順)にソートしてください。

 

練習問題2

ex08-04-4を改造して、スペードのロイヤルストレートフラッシュ(スペードの10, 11, 12, 13, A)を作ってください。

 

練習問題3

ex08-05-5をfilterとjoinを使って書き換えてみてください。

 

9章

練習問題

例えば車の定員を5人にして、ex09-02-8に定員オーバーでエラーになる部分を付け加えてください。新しい人が乗るたびに現在乗っている人数や、あと何人乗れるかが表示されるとなおよいです。

 

10章

練習問題

本章の例題ファイルを活用して、ユーザー1の和洋は「ユーザー」、ユーザー2の花子は「管理者」、ユーザー3の涼子は「ユーザー、管理者」、ユーザー4の哲人は役割なしになるように設定してください。

 

11章

練習問題

本章の例題ファイルを組み合わせて、メールアドレスを検証し、エラーが発生してもしなくても「この行はいつも実行される」と表示してください。

 

12章

練習問題

ex12-02-2を改造して、名前を聞かれた際に空白を入れると好きな色を聞かれる前に終了するようにしてください。

 

13章

練習問題1

ex13-03-4でインターバルの秒数が異なる2つの関数の中でgetNextRainbowColor関数を呼び出して、色の順番がとばされることを確認してください。ex13-03-5で同じようにしても色の順番がとばされないことを確認してください。

 

練習問題2

再帰関数を使ってフィボナッチ数列を求めてください。10000を超えたら終了するようにしてください。

 

14章

練習問題

ロケット発射プログラムの完成版(ex14-03-8)を、プロミスを使わずに実装してみてください。

 

15章

練習問題

2018年2月21日15:00にロンドンを出発した飛行機が、13時間かかって東京に到着しました。東京の現地時刻では何月何日の何時に到着したかを表示してください(正解は2月22日13;00です)。

 

16章

練習問題

以下に示す2016年の都道府県別歳入総額のデータを用いて、1〜47の疑似乱数を発生させ、その数字に該当する都道府県と歳入総額を表示してください(1.北海道、2.青森県、…、46.鹿児島県、47.沖縄県)。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}]

 

17章

練習問題

ex17-12-1のlist1を改造して、マッチしたURLにそのURLへのリンクを貼るhtmlタグをつけるようにしてください。「oreilly.com」を「<a href=”oreilly.com”>oreilly.com</a>」にするということです。

 

18章

練習問題

段落が1つ、1行テキストボックスが2つ、buttonが1つある以下のようなhtmlファイルを作ってください。ボタンをクリックすると、1つ目の1行テキストボックスに入力された内容で既存の段落を書き替えて赤い文字で表示し、2つ目の1行テキストボックスに入力された内容を新しい段落でボタンの下に追記するようにしてください。


<html>
<head>
<meta charset="utf-8">
<title>ex18</title>
<link rel="stylesheet" href="ex18.css">
</head>
<body>
<p>(既存の段落)テキストエリアに文字を入力してボタンをクリックすると、ボタンの下に新しい段落が付け加えられ、この段落の内容が書き替えられます。</p>
<form>
<p>ここに書いた内容で上の既存の段落が書き替えられます。</p>
<input type="text" id="text1">
<p>ここに書いた内容がボタンの下に付け加えられます。</p>
<input type="text" id="text2">
<br />
<br />
<button>文字を入力してからこのボタンを押してください</button>
</form>
<script src="ex18.js"></script>
</body>
</html>

 

ex18.css

.red {
color: red;
}

 

19章

練習問題

18章の練習問題と同じ内容をjqueryを使って実現してください。

 

20章

練習問題

ex20-05-1で作成された「hello.txt」を読み込んで、文字列の「Node」を「Node.js」に置換し、「文字列を置換しました。」と書き加えて、「hello2.txt」という名前のファイルに出力してください。

 

21章

練習問題

ex21-01-3などを参考にして、3辺の長さを渡して三角形のオブジェクトを作り、色のセット、色と外周と面積のゲットをできるようにしてください。なお、三角形の面積は、ヘロンの公式より、3辺の長さをa, b, cとすると、$\frac{\sqrt{(a+b+c)(-a+b+c)(a-b+c)(a+b-c)}}{4}$で求めることができます。

 




top