【hamlにjsベタ書き】hamlにscriptタグを設置してjsをベタ書きする方法

最近仕事でjsを使うことが多くなってきて、フロントエンド学び直し中の、バートリーのさいとうです。

今回は

hamlにscriptタグを設置してjsをベタ書きする方法

について解説していきます。

結論

早速結論です。

:javascript
  処理

これが、htmlにコンパイルされて

<script>
  処理
</script>

こうなります。

気をつけるべき点は

hamlのインデントルールに従う

これだけです。あとは、通常のjsの処理を記述していきましょう。

ベタ書きとファイル書き出しの違い

書き方としては以上に示した通りですが

アイコン名を入力

そもそも、jsファイルに書き出ししなくていいの？

と思われた方もいるかと思うので、補足していきます。

結論：jsファイルとして書き出し、呼び出しを行う方が処理は早い

結論、基本的にはjsファイルとして書き出しを行い、そのファイルを呼び出す方が、高速な処理が期待されます。

理由は、ファイルとして書き出すことで、jsのキャッシュが残り、リロード時の表示が早くなることが想定されるためです。

通常、htmlはキャッシュを残しません。

対して、書き出したcssやjsは、ファイルとして呼び出された場合はキャッシュを残します。逆に、ベタ書きした場合は、html同様、いちいち全部読み込まれ直します。

というわけで、処理が高速化するのはjsやcssをファイルとして切り出している方、という結論になります。

（参考：https://baigie.me/officialblog/2019/11/26/high-speed-frontend/#2）

HTMLパースを理解する

これはHTMLパース、というhtmlの読み込まれる流れが関係しています。

より詳細に、HTMLパースとは

HTML文法規則にのっとった文字列を、その文法に基づいて字句解析し、意味や構造を解釈すること
SEO検索エンジン最適化 HTMLパースと構造解析(https://www.searchengineoptimization.jp/html-parse#:~:text=HTML%E3%83%91%E3%83%BC%E3%82%B9%E3%81%A8%E3%81%AF%E3%80%81HTML,HTML%E3%83%91%E3%83%BC%E3%82%B5%E3%81%A8%E3%81%84%E3%81%84%E3%81%BE%E3%81%99%E3%80%82)

です。

簡単に示すと、htmlの文法に沿って書かれているものを読み込んで、webページに出力するために行われることです。

もしjsファイルに分けて呼び出す構造にしておくと、htmlパースによって「あ、jsファイルね、じゃあここでhtmlの読み込みをストップしてファイルを探しに行こう」と処理を進めてくれることになります。