JavaScriptで困った話

どうも、こや丸です!

普段、仕事でHTMLやCSSなどマークアップ言語を扱っていますが
実務でJavaScriptなどのプログラミング言語の実装経験は、ほぼ皆無です。

そんな僕が、最近勉強でつまづいた箇所をまとめてみます。

※自身の学習記録、備忘録的な面が強いので
参考にはならないかもしれません。

正しいスペル

「JavaScriptが正しいスペルだよ」とツッコまれました。
ええ、つい最近。

(lower)camelCaseで書く癖がついていて、
先頭を小文字、以降は単語の文頭を大文字にするという記法で
javaScriptと書いていたんです。

用語は正しく使いましょう、とのことでした。

参考
命名規則「キャメルケース」「スネークケース」「ケバブケース」についてまとめてみました

moduleのimportやexportを忘れがち

modulesフォルダに

  • _dropdown.js
  • _modal.js

を格納し、プログラムを記述する。

app.jsで

  • dropdown();
  • modal();

などを関数を呼び出せば、動くはず!が動かない・・・
app.jsに書いたmodalは定義されてない、というエラー文が出る

‘modal’ is not defined

ここで、初学者の僕がやってしまったのは2つ。

  • app.jsにimpor文を書き忘れている
  • _modal.jsにexport文を書き忘れている

つまり、下記が必要でした。
これがないと分割したファイルについて、
どこから何を呼び出すのかがわからないので当然といえば当然でした・・・。
ちなみにscssの分割ファイルでも、この仕組みを失念していました。

import modal from ‘./_modules/_modal’;

export default modal;

classList.add | removeはIE11非対応

classList.addなどはIE11非対応らしく、
僕が最初に書いたコードではChromeでうまくいったドロップダウンメニューが
IE11ではうまく挙動しませんでした。

参考
https://caniuse.com/#search=classList

item.classList.add(‘[data-js=dropdown__item–active]’);

setAttributeでクラス属性を編集する方法に切り替えたところ、
解決しました。


ここで注意なのが、既存のクラスに追加するclassList.addとは引数に入れる内容が異なります。
第一引数にどの属性を編集するのか、ということで’class’と書き、
第二引数に入れるクラス名には、今回追加したいactiveClassだけではなく、もともとあったclassも改めて記載し忘れないようにする必要があります。
僕はここで引っかかりました。

また、このとき複数クラス名を記述するときはカンマ区切りではなく、
スペース区切りです。ここも引っかかってしまいました・・・。

item.setAttribute(‘class’, ‘dropdown__item dropdown__item–active’);

forEachを使うときはIE対応に注意

NodeList.forEachはIE11非対応らしく、
僕が最初に書いたコードではChromeでうまくいったドロップダウンメニューが
IE11ではうまく挙動しませんでした。

参考
https://caniuse.com/#search=forEach

const items = document.querySelectorAll(‘[data-js=dropdown__item]’);

items.forEach((item) => {
(略)
});

この対策として、IE9から対応している
Array.prototype.forEach()を使うことで解決できました。
※ただし、Array.fromはIE対応していないため、Polyfillの導入が必要とのこと。

const items = Array.from(document.querySelectorAll(‘[data-js=dropdown__item]’));
items.forEach((item) => {
(略)
});

childrenはHTMLCollectionである。関数ではない。

ダメだった例

item.children('ul')

これに対して、childrenは関数じゃないよと
ブラウザのコンソールにエラーが出ました。

Uncaught TypeError: e.children is not a function

修正
HTMLCollectionはキー番号で参照はできるものの
配列とは異なるものらしい。

item.children[0]

で解決できました。

参考
https://developer.mozilla.org/ja/docs/Web/API/ParentNode/children

JSDocは単なる関数処理の実行箇所ではコメントしない

変数定義や関数定義する箇所で、JSDocのコメントを書くよう教えてもらいました。

/**
* @type {Element[]}
*/
const items = Array.from(以下略);

一方で、定義している訳ではない、単なる処理の部分では
JSDocはコメントしないとのこと。
例えば下記のような箇所には不要。

items.forEach((item) => {
以下略
});

まとめ

というわけで、今回は

JavaScriptの勉強でつまづいた箇所の話でした。
今後も学習記録として、書いていければと思います。

では、また!

タイトルとURLをコピーしました