この記事はレコチョク Advent Calendar 2021 の22日目の記事となります。

はじめに

こんにちは！レコチョクが提供している音楽配信サービスのウェブ開発をしている今井です。
普段の業務ではHTML・CSS・JavaScriptを扱い、ユーザーが実際に操作する画面の作成を担当しております。

レコチョクが提供している音楽配信サービスで言うと、月額料金で聴き放題の音楽ストリーミングサービス（例：TOWER RECORDS MUSI ...

この記事はレコチョク Advent Calendar 2021の12日目の記事となります。

自己紹介

みなさんこんにちは、入社一年目の山岸世良です。やませらって呼んでください。
最近は採用サイトの改修やアラカルト3サービスの対応などを行っており、HTML/CSS/JavaScriptをメインで触っています。

自分の担当サービスです。よかったらチェックしてください。
採用サイト
レコチョク
dミュージック powere ...

はじめに

フォームをAjax送信しなければならなかったときに、
フォームの入力値を簡単にすべて取得したかったので調べてみました。

serializeメソッド

結論から言うと、serializeメソッドで簡単にクエリ文字列が取得できました。
以下のようなフォームがあったときには

<form action="/submit" method="post">  <input type="text" name=" ...

はじめに

任意の要素から一番近い特定の要素のみを取得したかったので調べてみました。
以下のようなHTMLで、item2のli要素から一番近いlistクラスを持ったli要素（item4）を取得したい、ということです。

<ul>  <li>item1</li>  <li id="target">item2</li>  <li>ite ...

前回の続きです。
宣言通り、let, template, fetch の三本立てです。

局所変数を定義する let

注意) Safari では動きません

JavaScript では変数を定義するときに var を使います。
この場合、変数のスコープは関数単位になります。
そのため、以下のような場合には for のスコープの外でも i の値が参照できてしまいます。

for (var i = 0; i < 5; i+ ...

Web の勉強を2012年頃にしたのですが、そこから知識のアップデートをしていなかったので完全に取り残されていました。
たまに担当システムの要件で JS を書くことがあり、その過程で今風な書き方を色々と勉強しました。

一番驚いたのは、2012年当時は「素のJavaScriptで書くのは罰ゲーム」みたいなイメージだったのですが、
そこからかなり進化していて、jQuery などのライブラリがなくても複雑な処理が書けるようになっていることでした。 ...