Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8669

[JavaScript]JavaScriptでFizzBuzz!(復習編)

$
0
0

目次

  • はじめに
  • サンプルコード
  • サンプル画像と使用例
  • おわりに
  • 参考にしたサイト

はじめに

拙著の記事にも書いたが、FizzBuzzをできないようでは情報技術者失格らしい。この頃、それを実感する出来事があった。そのため、自分が経験してきた言語でFizzBuzzを復習していく。
今回は、JavaScriptでFizzBuzzを解き、HTMLとCSSを用いて画面上にその結果を表示する。

サンプルコード

〇HTML + JavaScript

<html><head><title>Let's FizzBuzz</title><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"><linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.6.4/css/all.css"><linkrel="stylesheet"type="text/css"href="FizzBuzz_var1.01.css"><script>functionbtnFizzBuzz(){varnum1=document.forms.FizzBuzz.numFizzBuzz1.valuevarnum2=document.forms.FizzBuzz.numFizzBuzz2.valuevararrFizzBuzz=[];// 空白チェックif(num1===""||num2===""){alert('数値①と数値②には数値を入力してください。');}else{for(vari=num1;i<=num2;i++){if((i%3===0)&&(i%5===0)){//3かつ5の倍数arrFizzBuzz.push('FizzBuzz');}elseif(i%3===0){//それ以外で3の倍数arrFizzBuzz.push('Fizz');}elseif(i%5===0){//それ以外で5の倍数arrFizzBuzz.push('Buzz');}else{arrFizzBuzz.push(i);}}alert(arrFizzBuzz);}}</script></head><body><h1>Let's FizzBuzz</h1><table><tr><th><divclass="boxTrivia1"><labelfor="btnTrivia1">そもそもFizzBuzzとは?</label><inputtype="checkbox"id="btnTrivia1"><ulclass="text"><li>英語圏で長距離ドライブ中や飲み会の時に行われる言葉遊び…らしい</li><li>そして、このゲームを画面に表示させるプログラムとして作成させることで、<br>コードが書けないプログラマ志願者を見分ける手法を、<br>
                            Jeff AtwoodがFizzBuzz問題 (FizzBuzzQuestion)として提唱した。<br><s>余計なことをしやがって</s></li></ul></div></th><th><divclass="boxTrivia2"><labelfor="btnTrivia2">FizzBuzzが出来ないと…?</label><inputtype="checkbox"id="btnTrivia2"><ulclass="text"><li>FizzBuzzが出来ない = 情報技術者(要はプログラマ)失格レベルらしい</li><li>企業に入社した際の新人研修でこのFizzBuzz問題を課題として出すことも多い</li><li>また、転職する際の技術試験で出されることもある</li><li>なので、せめて自分が得意とする言語ではFizzBuzzを空で<br>コーディングできるように、なろう!
                        </li></ul></div></th></tr></table><h2>数値を入力してね!</h2><formid="FizzBuzz"><p>数値①(最低値)<inputtype="number"id="numFizzBuzz1"size="10"maxlength="20"></p><p>数値②(最高値)<inputtype="number"id="numFizzBuzz2"size="10"maxlength="20"></p><inputtype="button"class="btnFB"value="FizzBuzz出力"onClick="btnFizzBuzz()"></form></body></html>

〇CSS

body{height:100%;}body:after{position:fixed;/* fixed:ページがスクロールされても、いつでも同じ場所に配置される */top:0;left:0;width:100%;height:100%;content:"";z-index:-1;background:linear-gradient(-45deg,rgba(246,255,0,0.678),rgba(212,26,144,0.8)),url("お好みの画像を入れてください");background-size:contain;/* 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する */}h1{width:400pt;margin:auto;border:1ptsolidrgb(0,0,0);border-radius:8pt;background:linear-gradient(45deg,#f5962a25%,transparent25%,transparent75%,#f5962a75%),linear-gradient(45deg,#a9a9a925%,transparent25%,transparent75%,#a9a9a975%);background-color:#f3c220;background-size:40px40px;background-position:00,20px20px;box-shadow:04pt8pt0rgba(0,0,0,0.2),03pt10pt0rgba(0,0,0,0.19);color:rgb(0,0,0);text-align:center;font-family:"Monotype Corsiva";font-size:8ex;}h2{color:rgb(0,0,0);text-align:center;font-family:"Monotype Corsiva";font-weight:bold;}p{color:rgb(0,0,0);text-align:center;font-family:"Meiryo UI";font-weight:bold;}/** トリビアボタン **/.boxTrivia1label{display:inline-block;margin:10px;color:#332c10;/* ボタンの文字色 */background-color:#ffdb4f;/* ボタンの背景色 */font-weight:bold;/* 文字の太さ */padding:0.5em1em;/* ボタン内側の余白 */border-bottom:solid4px#ccb03f;/* ボタンの影部分 */border-radius:3px;/* 角丸 */cursor:pointer;/* ボタンにカーソルを合わせた時に指アイコンを表示 */}/** ボタンクリック時のボタンを押し込む動作 **/.boxTrivia1label:active{-webkit-transform:translateY(4px);/* Chrome、Safari用 */-moz-transform:translateY(4px);/* Firefox用 */-ms-transform:translateY(4px);/* IE用 */transform:translateY(4px);border-bottom:none;}/** チェックボックス **/.boxTrivia1input{display:none;/* 非表示 */}/** 表示・非表示を切り替えるテキスト **/.boxTrivia1.text{color:rgb(0,0,0);/* 文字色 */font-weight:bold;/* 文字の太さ */overflow:hidden;opacity:0;/* 文字を非表示 */text-align:left;}/** チェックボックスにチェックが入った時の、テキストの処理 **/.boxTrivia1input:checked~.text{height:auto;opacity:1;/* 文字を表示 */}.boxTrivia2label{display:inline-block;margin:10px;color:#332c10;background-color:#ffdb4f;font-weight:bold;padding:0.5em1em;border-bottom:solid4px#ccb03f;border-radius:3px;cursor:pointer;}.boxTrivia2label:active{-webkit-transform:translateY(4px);-moz-transform:translateY(4px);-ms-transform:translateY(4px);transform:translateY(4px);border-bottom:none;}.boxTrivia2input{display:none;}.boxTrivia2.text{color:rgb(0,0,0);font-weight:bold;overflow:hidden;opacity:0;text-align:left;}.boxTrivia2input:checked~.text{height:auto;opacity:1;}.btnFB{display:block;text-align:center;margin:10pxauto;cursor:pointer;background:linear-gradient(45deg,#f5962a25%,transparent25%,transparent75%,#f5962a75%),linear-gradient(45deg,#a9a9a925%,transparent25%,transparent75%,#a9a9a975%);background-color:#f3c220;}

サンプル画像と使用例

実際の画面は以下の通りになる。ちょっとオシャンティ(死語)にレイアウトしてみた。
コメント 2020-05-29 221913.png
各ラベルをクリックしたら、以下の文章が表示される。若干見辛い…?
コメント 2020-05-29 222107.png
また、テキストボックスに数値を入力後、ボタンをクリックすると、FizzBuzzの結果がaleartで表示される。
コメント 2020-05-29 222928.png

おわりに

今回を振り返って、JavaScriptでシンプルにFizzBuzzを解いてみた。また、FizzBuzzの結果を画面上で見られるように、alertで表示するようにもこだわってみた。
意外と簡単にできるな、と思ったが、どうやらできるだけ短くコーディングするやり方があるらしい。(Code Golf という、可能な限りもっとも短いソースコードで記述する競技があるとか)調べてみると、以下のソースコードが最短っぽい。

for(i=0;++i<101;console.log(i%5?x||i:x+'Buzz'))x=i%3?'':'Fizz'

わけわかんないですね…。
FizzBuzz問題は奥が深い。だからこそ、プログラマの物差しになっているのだと思う。
次からは、できる限りシンプルにコーディングしてみようと思う。

参考にしたサイト

  • FizzBuzz、JavaScript系

FizzBuzz問題のJavaScript最短コードを解説します
HTMLクイックリファレンス
【JavaScript】 空文字のチェック方法【勉強中】

  • HTML、CSS系

HTMLとCSSだけ!要素の表示・非表示を切り替える方法
CSSのグラデーション(linear-gradient)の使い方を総まとめ!


Viewing all articles
Browse latest Browse all 8669

Trending Articles