3年ぶりに投稿したVue.js+Vuexの図解記事が好評だったのでもう一つ生徒に人気のJavaScriptネタを書きました。
ブラウザさえあればエディタもメモ帳も使わずに数の神秘を体験できるのでJavaScriptに苦手意識がある方も楽しめる内容だと思います。
きっかけはツイッターのTL
年明けすぐくらいに「2018は、7から始まる12連続整数の平方和である」というつぶやきを見かけたのです。
Twitter:12連続整数 2018
つまり、
2018 = 7²+8²+9²+10²+11²+12²+13²+14²+15²+16²+17²+18²
が成立するのだとか。
「スゲエ！」と思ったのと同時に「ホントか！？」と考えて直後にはChromeで検算していました。
Consoleにfor文を打ち込んで「2018」と表示された時の私の感動がこの記事で伝われば嬉しいです。
エディタ不要！Chromeでの検算手順
①Chromeの開発者ツールを開く
Chromeで「新しいタブ」を開き、
「右クリック」⇒「検証」
を押すと、以下のように開発者ツールが現れます。
（今見ているQiitaのページでツールを開いてもOK）
開発者ツールのタブ3つ目にある「Console」をクリック。
カーソルが当たっている場所にコードを書くだけですぐにJavaScriptを動かせます。
試しに「Hello World!」と表示するalertを出してみました。
以降、紹介するJSのコードはここに打ち込んでいきます。
新しいコードを追加してエラーが出る場合はChromeをリロードしてください。
②基礎的なfor文で検算
「7から始まる12連続整数の平方和」という文章をそのままforで表現します。
var sum = 0;
for (var i = 7; i <= 18; i += 1) {
sum += i * i;
}
console.log(sum);
ConsoleにコピペしてEnterキーを押してください。
「2018」って表示されますよね！？
感動しませんか！？
③forの条件を読みやすく改良
「var i = 0」でスタートさせると「12連続」というのが一目でわかるようになります。
iが小さくなった分、計算時に7を足しましょう。
ついでに、console.logの表現も工夫。
var sum = 0;
for (var i = 0; i < 12; i += 1) {
sum += (i + 7) * (i + 7);
}
console.log('Result: ' + sum + '!');
④ES6の記法でちょっとカッコよく
最近はvarを使わない傾向になってきました。
今回は再代入するので「let」を使います。
さらに、「べき乗演算子」を使って2乗をスッキリと。
文字列の結合は「テンプレートリテラル（バッククォート）」で記述量が大幅に減ります。
let sum = 0;
for (let i = 0; i < 12; i += 1) {
sum += (i + 7) ** 2;
}
console.log(`Result: ${sum}!`);
⑤ワンライナーで書く
forを使うと4行ですが、「スプレッド演算子」と「reduce」と「アロー関数」を使うと、1行で書けるんです！
const sum = [...Array(12)].reduce((prev, _, i) => prev + (i + 7) ** 2, 0);
console.log(`Result: ${sum}!`);
console.logもまとめるとこうなる。
console.log(`Result: ${[...Array(12)].reduce((prev, _, i) => prev + (i + 7) ** 2, 0)}!`);
他にもある2018の特性
Wikipedia見ると他にもたくさんあって面白いです。
2018 = 1³ + 7³ + 7³ + 11³
とかカッコいい。
まとめ
一見無味乾燥なfor文でも「2018」って表示されると感動しますよね！
ES6の記法も覚えるまでは苦しいけれど、慣れるとコーディングがとってもラクになります。
続編を書きました！
【再帰関数に挑戦】超短いワンライナーの計算結果が2018になる過程を読み解く