kobitoDevelopment

// 要素を取得
const carousel = document.querySelector(".carousel");
const items = carousel.querySelectorAll(".item");
const itemsLength = items.length;

// スライドの数をCSS変数に反映
carousel.style.setProperty("--amount", itemsLength);

// itemsそれぞれのstyleに、--iというCSS変数を追加
items.forEach(function (elem, index) {

kobitoDevelopment

// 基本系
try {
  /* エラー(例外)が発生する可能性のある処理を記述 */
  console.log(hoge); //hogeは未定義なのでエラーになる
} catch (error) {
  /* エラー(例外)が発生した場合の処理を記述 */

  // エラーの種類によって分岐可能 分岐させない場合はif文削除→エラー時の処理を記述
  if (error instanceof ReferenceError) {
    console.error("エラー(例外)が発生");

kobitoDevelopment

const str = ["hoge", "fuga", "piyo"];
const num = [1, 2, 3];

/* if文やfor文などにはlabelを付けることが可能 */

//blockOneと名付けたラベルに処理を記述
blockOne: for (let i = 0; i < str.length; i++) {
  //blockTwoと名付けたラベルに処理を記述
  blockTwo: for (let j = 0; j < num.length; j++) {
    console.log(str[i] + num[j]);

kobitoDevelopment

//classにより、オブジェクトを作成するための雛形を設定
class User {
  //オブジェクト作成時に実行される関数(コンストラクタ)を直接実装
  constructor(name, pass, roll) {
    //this. ~~ により、オブジェクトにデータを格納
    this.username = name;
    this.password = pass;
    this.roll = roll;
  }

kobitoDevelopment

const triggerScrollAble = document.querySelector(".JS-scrollAble");
const triggerScrollDisable = document.querySelector(".JS-scrollDisable");

function handle(event) {
  event.preventDefault();
}

/* {passive:false}を記述する事で、ブラウザに「この関数内ではevent.preventDefault()を使用する」事を宣言 */
window.addEventListener("load", function () {
  document.addEventListener("touchmove", handle, { passive: false });

kobitoDevelopment

/* 
第一引数：存在をチェックしたいイベントor関数実行のトリガー要素
第二引数：イベントタイプ(関数を実行する場合は"function")
第三引数：実行したい関数名
*/
function searchRunner(target, handle, callback) {
  if (document.querySelector(target) != null) {
    let targetElement = getElements(target);
    targetElement.forEach(function (elem, index) {
      if (handle === "function") {

kobitoDevelopment

const dropZone = document.querySelector("#drop-zone");
const preview = document.querySelector("#preview");
const fileInput = document.querySelector("#file-input");

/* dragover = ドラッグ中にマウスポインターが要素上に存在する状態 */
dropZone.addEventListener("dragover", function (event) {
  event.preventDefault();
  this.style.background = "#e1e7f0"; //dragover時のdropZone背景色を設定
});

kobitoDevelopment

const hoge = document.querySelector(".hoge");
const fuga = document.querySelector(".fuga");
const piyo = document.querySelector(".piyo");

hoge.classList.add("is-active");
hoge.addEventListener("transitionend", function () {
  fuga.classList.add("is-active");
});

fuga.addEventListener("transitionend", function () {

kobitoDevelopment

const hoge = document.querySelector(".hoge");
const fuga = document.querySelector(".fuga");
const piyo = document.querySelector(".piyo");

hoge.classList.add("is-active");
hoge.addEventListener("animationstart", function () {
  fuga.classList.add("is-active");
});

hoge.addEventListener("animationend", function () {

kobitoDevelopment

<ul class="header--fixed">
  <li><a href="#target1">ターゲット1</a></li>
  <li><a href="#target2">ターゲット2</a></li>
  <li><a href="#target3">ターゲット3</a></li>
</ul>
<section id="target1" class="section" style="margin-top:1000px;">
  ターゲット1
</section>
<section id="target2" class="section" style="margin-top:1000px;">
  ターゲット2