JavaScript
LinkbalDay 1

Chromeのコンソールで遊んでみる

ブラウザのコンソールにエンジニア向けの求人を出してたりするWebサイトがたまにありますね。

もっと色々やってみたいと思います。


とりあえずテキストを出してみる

なんかしらあるだけでちょっと嬉しい。

console.log('こんにちは!\n何かお困りでしたらこちらまでどうぞ!\nhttps://laineus.com/inquiry')

Screenshot from 2018-11-30 19-04-23.png

URLはリンクになるようです。


console.log以外も使ってみる

console.logconsole.error以外にもかなり色々なものが用意されています。

↓これとかは無駄にリッチです

console.table({ SiteName: 'Drive(L:)', Author: 'Laineus' })

Screenshot from 2018-11-30 19-10-13.png


CSSで装飾してみる

実はCSSでちょっと装飾できます。

%c以降に書いた文字が第二引数のstyleで装飾されます。

%cを複数書いた場合、第n引数のstyleが適用されるようです。

console.log('%cああああ', 'font-size: 20px; font-weight: bold; color: #595;')

Screenshot from 2018-11-30 19-21-17.png

色々やってみたくなりますね。

デモ

const css = `

padding: 10px 20px;
font-size: 32px;
font-weight: bold;
background: linear-gradient(to right, #EE2, #F73, #EE2, #F73, #EE2, #F73, #EE2, #F73, #EE2, #F73, #EE2, #F73, #EE2);
color: #D22;
text-shadow: 2px 2px #FFC, 2px -2px #FFC, -2px 2px #FFC, -2px -2px #FFC,
0px 2px #DD6, 0px -2px #DD6, 2px 0px #DD6, -2px 0px #DD6,
4px 4px #222, 4px -4px #222, -4px 4px #222, -4px -4px #222,
0px 4px #222, 0px -4px #222, 4px 0px #222, -4px -0px #222;
`

console.log('%c5,000兆円欲しい!', css)

Screenshot from 2018-11-30 19-53-52.png


画像を表示してみる

さっきので思いついた方もいらっしゃるかと思います。

const logo = `

background: #333 url(https://laineus.com/img/logo.png) no-repeat center;
background-size:auto 80%;
border-radius: 3px;
padding: 80px 160px;
font-size: 0;
`

console.log('%cdummy', logo)

意味なくロゴでも出しておきましょう。

デモ

Screenshot from 2018-11-30 20-01-47.png


コマンドを用意してみる

今度は表示するだけでなく、ユーザーからのアクションも受け付けようと思います。

グローバルなところで使える関数を定義してみます。

console.log('弊社に興味がありますか?もしよければ「recruit()」とご入力ください!')

window.recruit = () => location.href = 'https://募集要項ページ/'

Screenshot from 2018-11-30 20-15-53.png

(募集要項画面へ遷移)


関数っぽさをなくしてみる

エンジニア的にはrecruit()だとただjsの関数を実行している感が強くて新鮮味に欠けます。

思い切って日本語名のgetterを定義してました。

Object.defineProperty(window, 'サイト情報', {

get: () => console.table({ SiteName: 'Drive(L:)', Author: 'Laineus' })
})

Screenshot from 2018-11-30 18-45-37.png


クイズを作ってみる

「DevToolsを開ける程度で弊社に応募してもらっては困る」という企業さんはConsole上で一次試験をやっちゃいましょう。

デモ

Screenshot from 2018-11-30 18-26-47.png

yes、noを入力して解答していきます。

全問正解したときだけ募集ページへのリンクがでます。

class Quiz {

constructor () {
this.questions = [
{ answer: false, body: '■ Question 1\n> [] == []\nはtrueである(yes/no)' },
{ answer: true, body: `■ Question 2\n> const objA = { key: 'value' }\n> const objB = objA\n> objB.key = 'newValue'\n「objA.key」は「newValue」である(yes/no)` },
{ answer: false, body: `■ Question 3\n> if (true) {\n> const result = 'correct'\n> }\n> console.log(result)\nは「correct」が出力される(yes/no)` },
{ answer: true, body: `■ Question 4\nJaveScriptは楽しい(yes/no)` }
]
this.questionIndex = 0
this.correctCount = 0
this.ask()
}
get question () {
return this.questions[this.questionIndex]
}
get last () {
return this.questionIndex === (this.questions.length - 1)
}
ask () {
console.log(`%c${this.question.body}`, 'font-weight:bold')
}
answer (answer) {
const correct = this.question.answer === answer
if (correct) this.correctCount++
console.log(correct ? '%c正解!' : '%c不正解', correct ? 'color:#C00' : 'color:#50A')
if (this.last) return this.end()
this.questionIndex++
this.ask()
}
end () {
console.log(`%c${this.correctCount}/${this.questions.length}問正解しました`, 'font-weight:bold')
if (this.correctCount < this.questions.length) return
console.log('全問正解おめでとうございます!\nこちらからご応募ください!\nhttps://linkto募集要項/')
}
}
const quiz = new Quiz()
Object.defineProperties(window, {
yes: { get () { return quiz.answer(true) } },
no: { get () { return quiz.answer(false) } }
})

設問が複数あるので、getterにロジックを仕込んで、そのときの設問の正解をチェックしています。


おわりに

コンソールに対話形式のエントリーフォームを作ってそのままapiに送信したり、websocketに繋いでチャットにしたり、色々やってみようかと思いましたが、とりあえず今回はここまでにします。