概要
エンジニアが現実的に直面する問題は、複雑に入り組んでおり、何が原因となっているのかがわからないことが多い。「考えたらわかるのではないか」という発想に陥りがちであるが、経験主義では行動して確かめることを重要視する。（参考：情報を生み出す考え方～経験主義と仮説思考・システム思考～)
このため、立てた「仮説」を一つ一つ「事実」に確定させていくための行動が必要となる。
エンジニアの場合、その方法として「小さなコードを書いて、結果を確かめる」というスキルが基本となる。
こんなときにやってみよう
- コードが期待通りに動かない。しかし、どこが悪いのかがわからない
- APIのドキュメントや参考記事・資料を読んでも、わからないところがある
具体例
問題
指定要素の文字色を赤色に変えるCSSを書いたつもりだが、期待通りに反映されない。
記事などをいろいろ調べてみても、なぜうまくいかないのかが、結局のところよくわからない。
div .item {
color: red;
}
解決策
実際に自分で小さな例を書いて試すとよい。
この場合、下記のようなhtmlファイルを作成し、ローカルに保存してブラウザから開き、動作を確かめることができる。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
div .item {
color: red;
}
-->
</style>
</head>
<body>
<div class="item">この文字色が変わると思う</div>
<div>
<div class="item">これも変わると思う</div>
</div>
<div>
<div>
<div class="item">この場合も変わると思う</div>
<div>これは変わらないと思う</div>
</div>
<div class="item">
<div>これも変わらないと思う</div>
</div>
</div>
</body>
</html>
実行結果を確認すると、自分の仮説と事実との間に、違いがあったことがわかり、一歩前進することができる。
[参考] ブラウザ上でコードの動作を確認できるサービス
codepenやjsfiddleなど、ブラウザ上でこのようなコードの動作をサクッと確認することができるサービスもある。
ただし、注意して利用しないと 自分の書いたコードが全世界に公開された状態になる ものもある。
このため、企業に所属している場合は、業務上でこれらを利用する前にはそのポリシーを確認する必要があるし、プロダクトのソースコードの一部をそのままコピー＆ペーストして試すなどは、厳禁だ。