2018/08/17

pug(Jade)でエスケープせずhtmlタグやscriptをそのまま表示させる方法

pug(旧Jade)でhtmlやscript、styleのサンプルコードを表示させたい場合、<>などをエスケープする必要がある。

たとえば以下のような感じだ。
pre
  code
    | &lt;script&gt;
    | alert(&#039;Hello&#039;);
    | &lt;/script&gt;

これではサンプルコードが変わるたびにいちいちエスケープしてから書き換えなければならないし、そもそもヒューマンリーダブルでない。

ということで、エスケープせずにそのままサンプルコードを貼る方法をまとめる。

2018/07/30

HTML5+CSS3+JavaScriptでアナログ時計を実装する

JavaScriptしか触れないフロントエンドエンジニアになりかけていたので、CSSの練習も兼ねて、HTML5+CSS3+JavaScriptでアナログ時計を作ろうと思う。
完成図は以下のような感じだ。

2018/07/18

[JS]クリックした位置までオブジェクトを最短距離で移動させる

シミュレーションゲームやリアルタイムストラテジーゲーム(RTS)でよくある「クリックした位置までキャラクタを移動させる」動作をJavaScript+Canvas APIで実装する。

イメージは以下のような感じ。