アシアル情報教育研究所 所長の岡本雄樹です。

あんこエデュケーションのサンプルアプリを開発していく上でのコーディング規約をまとめております。
現段階では草案です、また、全てのサンプルアプリを規約に準拠させる予定もありません。

基本方針

  • JavaScript固有の文法をなるべく避け、他言語をバックグラウンドに持つ人でも読みやすいコードを心がける

変数などの命名ルール

短縮表記は原則禁止。ただしWebプログラマー以外にも広く認められているものは許可する。

NG例

  • context → cxt
  • object → obj

OKの例

  • カウンタ変数 i,j,k
  • 機械学習の教師データのフォルダ名 training → train

変数名やクラス名などで単語を繋げる場合の表記

原則、ローワーキャメルケースを採用。

例

  • getElementById
  • todoList

理由としてアンダースコアやハイフンは初心者がキーを探すのが大変なため。

また、他のキャメル記法やスネークケース・チェインケースを用途別に使い分けることも、初心者に負担を掛けてしまうため行わない。

定数の目名

変数などと同様、ローワーキャメルケースで表記する。

理由：全部大文字で表現したくなるが、小規模なプログラムに置いては可読性に大きな影響はないと判断。

変数の宣言

  • let,const,varを使い分けるのは初心者に優しくないので、統一したい
  • 全部letで良いんじゃ無いかと思っている
  • いっそ宣言無しでも…

インデント

スペース4つ。

文字列をダブルクォートで括るかシングルクォートにするか

検討中

『JavaScript Standard Style』ではシングルクォートですが、初心者はダブルクォートの方がキーボード上で探しやすい。

とりあえず、サンプルプロジェクト内で統一されていればOKとします。

行末のセミコロン

C言語に敬意を表しつつ、セミコロンを入れる。（JavaScriptはセミコロンを省略しても動作します。）

インデントの例

if文


if (true) {
    console.log('Monaca');
} else if (true) {
    console.log('Monaca');
} else if (true) {
    console.log('Monaca');
} else {
    console.log('Monaca');
}

for文


for (var i = 0; i < 10; i++) {
    if (i % 2 == 1) {
        console.log(i + 'は奇数です');
    }
}

function


function sayHello() {
    console.log('こんにちは');
}

スペースの例

配列


var fruits = ['バナナ', 'みかん', 'まくわうり', '文旦'];
for (var i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

オブジェクト(連想配列)


var person = {
    name : "岡本雄樹",
    age : 33,
    favoriteFruits = ['バナナ', 'みかん', 'まくわうり', '文旦']
}

メソッドチェーン


object
    .limit(5)
    .sort("ID") 
    .fetchAll()
        .then(function(results) {
            console.log(results);
        });

無名関数を使わない場合


object
    .limit(5)
    .sort("ID") 
    .fetchAll()
        .then(hoge);
function hoge (result) {
    ...
}

フォルダとファイル構成

Monaca用のサンプルアプリが前提なので、www以下にindex.htmlと次のようなフォルダを作成します。
js、css、img

また、音声やビデオ、svgやその他のデータはそれぞれ、
audio、video、svg、data

とします。

www以下

  • index.html
  • js
    • main.js
    • config.js
  • css
    • style.css
  • audio
    • hoge.mp3
  • img
    • hoge.png
  • video
    • hoge.mp4
  • svg
    • hoge.svg
  • data
    • hoge.json
    • hoge.csv
    • hoge.xml
      ※ hogeには、特に深い意味はありません。

JavaScriptファイルの読み込み方法

scriptタグでJavaScriptのファイルを読み込む際、HTMLファイルの読み込みが完了した後の方がDOM操作時などに都合が良いため「defer」を付けて読み込みます。

<script src="js/main.js" defer></script>

その他

  • JavaScriptの新しい文法は高機能だけど、他言語との兼ね合いを考慮して使用を控える
  • 無名関数はネストが深くなって読みにくくなるので、極力避ける
    • でもfetchの時は諦めるかも…
  • オブジェクトのことは、他言語との兼ね合いを考慮して連想配列と呼ぶ