概要

エンジニアが現実的に直面する問題は、複雑に入り組んでおり、何が原因となっているのかがわからないことが多い。「考えたらわかるのではないか」という発想に陥りがちであるが、経験主義では行動して確かめることを重要視する。（参考：情報を生み出す考え方～経験主義と仮説思考・システム思考～)

このため、立てた「仮説」を一つ一つ「事実」に確定させていくための行動が必要となる。
エンジニアの場合、その方法として「小さなコードを書いて、結果を確かめる」というスキルが基本となる。

こんなときにやってみよう

コードが期待通りに動かない。しかし、どこが悪いのかがわからない
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など、ブラウザ上でこのようなコードの動作をサクッと確認することができるサービスもある。

ただし、注意して利用しないと 自分の書いたコードが全世界に公開された状態になる ものもある。
このため、企業に所属している場合は、業務上でこれらを利用する前にはそのポリシーを確認する必要があるし、プロダクトのソースコードの一部をそのままコピー＆ペーストして試すなどは、厳禁だ。