命名規約とディレクトリ構成

見出し右端の記号は?

Web Page
Booskanium's Tips.
忘れっぽい落書き人のメモ

命名規約はデファクトスタンダードに右へ習いしたほうが可読性が良くなります。

小文字のスネークケースは外部変数

ユーザーが打ち込む可能性があるファイル名は小文字のスネークケースを利用する。
id名はハッシュリンクでユーザーの目に触れることが有る。
例:snake_case.html,snake_case.css,snake_case.js,id_snake_case

キャメルケースな内部変数

関数名,変数名,メソッド名,HTMLのクラス名など内部で利用する変数名はキャメルケースを利用する。
落書き人は関数名とメソッド名の最初のワードが動詞を使うようにしています。

例:camelCase

接頭辞にアンダースコア1つが付いた関数名、変数名、メソッド名は、ある機能の中で使われているもので、原則外部から利用してほしくないプライベート関数やプロテクト関数。

落書き人独自な命名として接頭辞にアンダースコア2つが付いているのは、自家製汎用関数や変容変数など。
例:

	function __$(id) {
		return document.getElementById(id);
	}

参考︰予約語

パスカルケースはクラス名

JavaScriptのクラス名は 例:PascalCase

話は脱線しますが、JavaScriptが個性的なのでClass定義まで個性的です。

大文字スネークケースは定数

例:SNAKE_CASE

プライベートな名称は紳士協定

JavaScriptにはアクセス修飾子が無かった為に、アンダースコアーでは始まる名称はプライベートだよという暗黙の意味合いとして使うのが通例となっています。
例:_privateName

クロージャーでプライベートモドキなトリッキーな書き方を行う解説が多く見受けられます。しかし、ここの落書き人は、プライベート機能は、本来なら言語レベルで対応すべき課題で、JavaScriptの現状においては紳士協定で十分だと考えています。

落書き人独自な命名としてアンダースコア2つ続けるのは、自家製汎用ライブラリなどのファイル名や変数名。
例:__swipe.js

関数の引数

例:argPara
例:opt_argPara   省略可能な引数の場合

ディレクトリ構成

落書き人はリンク関係を相対パス指定を記述ています。
これが破綻しない様にデジレクトリ構成を

ルート
 ├ css
 │ └ サイト全体の共有cssとルートのhtml文書用css
 ├ js
 │ └ サイト全体の共有JavaScriptとルートのhtml文書用JvavaScript
 ├ img
 │ └ サイト全体の共有イメージファイルとルートのhtml文書用イメージファイル
 ├ ルートに置くhtmlファイル
 ├ サブフォルダはコンテンツ種類毎に作成
 │ │ ※サブディレクトリは、ディレクトリ毎移動しても相対パスの関係が崩れない様に考慮する
 │ ├ css
 │ │ └ 当該サブフォルダ固有と当該サブディレクトリ配下のサブディレクトリ共通なcss
 │ ├ js
 │ │ └ サブフォルダ固有なJavaScriptとサブフォルダのhtml文書用JvavaScript
 │ ├ img
 │ │ └ サブフォルダ固有なイメージファイルとサブフォルダのhtml文書用イメージファイル
 │ ├ サブフォルに置くhtmlファイル
							

ファイルの拡張子

私が使うのは以下の通りです。

htm : 今はHTMLにこの拡張子は使っていません。
html : HTMLはこの拡張子
shtml : インクルードされる側(*1)のHTMLにこの拡張子を使います。
php : PHPのプログラム
css : CSS
js : JavaScriptとJSONP
json : JSONデータ
xml : XMLデータ
txt : テキストファイル ※わざわざHTMLにする必要がない時
jpg : 画像ファイル 写真はこれ
gif : 画像ファイル 未だに健在
png : 画像ファイル 被せる場合はこれ
webp : 画像ファイル 時々つかいます
svg : ロゴはベクター画像で
mp3 : 音声ファイル MP3が間違いない
mp4 : 音声ファイルと画像ファイル
pdf : 自発的には使いません。一時Webフォーム(*2)で利用