JavaScriptのきれいなソースコード

html
1<html>
2  <head>
3  </head>
4    <body>
5      <script>
6        //①ここに処理を記述
7      </script>
8      
9     <script src="index.js"></script>
10    </body>
11</html>

js
1//②ここに処理を記述

JavaScriptでコードを記述する際に、①のようにhtml内に直接処理を記述するのかそれとも②のようにjsファイルは別にして処理を記述するのだとどちらが一般的できれいなコードになるのでしょうか？
その理由も教えてくれると嬉しいです。

webエンジニアの方ご回答お願いします。

BluOxy

2020/05/24 23:37

「JavaScript 外部ファイルメリット」で検索すると問題が解決すると思います。

行動規範の内容に同意します

回答3件

構造とデザイン・プログラムは分けたほうがよいので原則jsは外部化する前提で
よいですが、近年はむしろ積極的にコンテンツをプログラムで管理する傾向に
あるのでどちらでも良いと思います。

投稿2020/05/25 00:14

yambejp

総合スコア116724

「きれいなコード」観点だと例示のものは単に「どこに書くか」だけなので影響はありません。
「どこに書くか」であっても要件によりです。

投稿2020/05/25 00:00

m.ts10806

総合スコア80875

ベストアンサー

私見です。
なにか理由があって、コンパイルの仕組みがきちんとととのっていたら①が良く、
説明できる理由がなくコンパイルの仕組みが整っていない場合は②のようにJSはファイルをわけるほうが良いと考えます。

②のようにjsファイルは別にして処理を記述

何らかの目的や特別な理由がなければこちらが「きれい」と思います。
コンパイルの仕組みがきちんと整っていない場合はこちらのほうが保守性は高いのではないでしょうか。

①のようにhtml内に直接処理を記述

表示速度向上の目的や、Vue.jsなどでは1つのコンポーネントに関するHTMLやCSS、JavaScriptなどの記述を1つのソースファイルにまとめて書く場合もあり、そのような「説明できる理由」があれば1つのファイルにHTMLやJavaScriptが混在する書き方もOKと考えます。

「表示速度向上の目的」がないことが少なくなってきているので、その目的を達成するためにHTML側にJavaScriptやCSSを書く (出力する) ことが、近年では当たり前になりつつあるように感じます。

ただ何も理由がないのになんとなく今風だから、という理由だけで形を真似してHTML側にJavaScriptを書くようにするとおそらく保守性が下がるだけになるのでおすすめしません。

また「きれいなソースコード」という点にフォーカスすると、インデント位置が<head>と<body>とで違っているのが気になります。

HTML
1<html>
2  <head>
3  </head>
4    <body><!-- <head>とインデントの位置は揃えるべき -->
5      <script>
6        //①ここに処理を記述
7      </script>
8
9     <script src="index.js"></script>
10    </body>
11</html>

<head>と<body>のインデント揃っていないことに違和感がないレベル (嫌味に聞こえたらすみません) なのであれば、②の「ソースコードをわけて書くことができるスキル」をまずは身に着けたほうがいいと考えます。