フォームの状態の命名

フォームの状態を命名するとしたら
順に
default
disabled
focus
filled
error

functionの命名

is....able　「...ができるか」という意味でよく使われる

isClickable　(クリックできるか)
isScrollable（スクロールできるか）

throwAway（捨てる）

Vue.js配列とStrinｇの取り扱い

■コンポーネント
----------------------------
煩雑な書き方
----------------------------
        <template v-if="typeof titles === 'string'">
          {{ titles }}
        </template>
        <template v-else>
          <span
            v-for="title in titles"
            :key="title"
            :class="$style.SheetBase__title"
          >
            {{ title }}
          </span>
        </template>

----------------------------
ソースが煩雑にならない書き方をする
----------------------------
     <span
      v-for="computedText in computedTexts"
      :key="computedText"
      :class="$style.HeadingBase__text"
    >
      {{ computedText }}
    </span>

-----------------
computedTexts() {
  return Array.isArray(this.text) ? this.text : this.text.split();
}
-----------------

props: {
	text: {
	  type: [String, Array],
	  required: true
	},
 }
------------------------------

■ページ側
computed: {
    nextChargeYM(): string {
      return "";
    },
    successBottomSheetTitle(): any {
      if (
        this.showSts === STATEMENT_SHOW_STS.TEMPORARY_FIXED
      ) {
        return ["完了しました", "次のステップへ進んでください"];
      } else {
        return "完了しました";
      }
    }
  },

<EndPointCollection
        :title="successBottomSheetTitle"
>

typescript

typescriptの良い点
・型が宣言できる。
・コンパイル時にエラーを出してくれる

let x: nember =1;
let y: nember =2;

トランスパイルとコンパイル

トランスパイル
新しいコードを古い書き方のコードに置き換える

（トランス＝変化させる　＋　コンパイル）

・Babel
・TypeScript (Microsoftが開発したプログラミング言語)
.tsの拡張子をtscでコンパイルすると.jsが出来る。

コンパイル
は、機会が理解しやすいコードに変換する。

ES6と今も使われている一昔前の書き方

ES6はIEで動かない

旧書き方

<script>
function timer(){
    var now =new Date();
    document.getElementById('timer').innerHTML=new.getSeconds() + '　秒';
}
var timerID =setInterval(timer, 500);
</script>

最近の書き方（ES6）

<script>
const timer = () => {
    var now =new Date();
    document.getElementById('timer').innerHTML='${new.getSeconds()} 秒';
}
let timerID =setInterval(timer, 500);
</script>

<script>
const btn =  document.getElementById('btn');
btn.addEventListener('click',() =>{
    btn.disabled = true;
}
</script>

a11yの対応

では実際に、コーディングする時に何を追加したらよいか。

・ 空のボタンとかは以下のようにすると良いです。

　<a href alia-label="ほげ"></a>
　<buttomv alia-label="ほげ"></buttom>

・ButtomSheetなどの浮いた要素は、そのうち正しい属性ができるらしいのですが、今のところはalia dialogで検索して対応します。
ARIA: dialog ロール - アクセシビリティ | MDN

・calusel alia属性などでググると色々でてきます。

その他の参考ページ
WAI-ARIA ロール - アクセシビリティ | MDN

WAI-ARIAを活用したフロントエンド実装 - role属性、aria属性の基礎知識 | CodeGrid
WAI-ARIAの基本 - ウェブ開発を学ぶ | MDN