arrow関数

まずは、このあとたくさん登場する「arrow関数（アロー関数）」について。

arrow関数は、以下のようなシンプルな書き方をする関数です

(引数) => {
  処理
}

途中に出てくる => が矢印のように見えることから、英語で「矢印」を意味する「arrow（アロー）」が関数の名前になっています。

通常の function を使う書き方と同じ機能を持っていますが、書き方がよりコンパクトになります。

※arrow関数とfunctionの書き方は見た目以外にも「this」の扱いなどで違いがありますが、今回は書き方に慣れることが目的なので、細かい違いは気にせずOKです！

arrow関数をfunction を使って書くと次のようになります。

ちなみに、function を使った書き方はこんな感じ

function(引数) {
  処理
}

こちらは「無名関数」と呼ばれ、主に変数に代入して使うことが多いです。

これから紹介するコードでは、arrow関数と無名関数の両方を載せているので、「こんな感じなんだ〜」と気軽に読んでみてください!!

書き始めの基本形（DOMContentLoaded）

JavaScriptはHTMLの読み込みが終わる前に実行されることがあります。

そのため、HTMLが完全に読み込まれてから処理を実行したいときには、この書き方を使います

基本の書き方

//arrow関数を使う場合
document.addEventListener('DOMContentLoaded', () => {
  // ここに処理を書く
});

//無名関数を使う場合
document.addEventListener('DOMContentLoaded', function() {
  // ここに処理を書く
});

こんなふうに使う！

たとえば、ボタンをクリックしてクラスを追加したいとき

document.addEventListener('DOMContentLoaded', () => {
  const button = document.querySelector('button');
  button.addEventListener('click', () => {
    button.classList.add('open');
  });
});

要素の取得

HTMLの中にある特定のタグやクラス・IDの要素をJavaScriptで使いたいときに使います。

• クラス名は.（ドット）
• ID名は#（シャープ）

を指定するのがポイントです。

基本の書き方

document.querySelector() は1つの要素だけを取得しますが、

document.querySelectorAll() は条件に合うすべての要素をまとめて取得します。

const element = document.querySelector('.クラス名'); // クラス名の場合
const element = document.querySelector('#ID名');   // ID名の場合

//同じクラス名を持つ複数の要素を全て取得したい時
const element = document.querySelectorAll('.クラス名');

こんなふうに使う！

querySelectorを使って、クラス名.blog-itemの要素と、ID#sec-companyの要素を取得しています。

同じクラス名・ID名を持つ要素が複数ある時にquerySelectorを使うと、

最初に一致する要素を1つ返します。

const blogItem = document.querySelector('.blog-item'); // クラス名の場合
const sectionCompany = document.querySelector('#sec-company');   // ID名の場合

クラス名の追加 / 削除

HTML上の要素に対してクラス名を追加したり、削除したりする時に使います。

基本の使い方

※ クラス名の前に .（ドット）は不要です

//クラス名〇〇を追加
document.querySelector('要素').classList.add('〇〇');
//クラス名〇〇を外す
document.querySelector('要素').classList.remove('〇〇');

こんなふうに使う！

classList.add()でbigクラスを追加し、classList.remove()でそのクラスを削除しています。

これにより、要素のスタイルを動的に変更できます。

const element = document.querySelector('.blog-item');
//クラス名bigを追加
listItem.classList.add('big');
//クラス名bigを外す
listItem.classList.remove('big');

イベントの設定

「クリック」「スクロール」「マウスが乗ったとき」など、ユーザーの操作をきっかけにアニメーションを実装したい時に使います。

第1引数にイベント名（例：click）、第2引数に実行したい処理（関数）を書きます。

基本の書き方

addEventListener('イベント名', 関数) 

//arrow関数を使う場合
button.addEventListener('イベント名', () => {
  //ここに処理をを書く
});

//無名関数を使う場合
button.addEventListener('イベント名', function() {
  //ここに処理をを書く
});

こんなふうに使う！

navButtonをクリックした時にheaderNavにshowというクラス名をつけています。

//クリックイベント
const navButton = document.querySelector('.drawer-btn');
const headerNav = document.querySelector('.header-nav');
navButton.addEventListener('click', () => {
    headerNav.classList.add('show');
}); 

関数を定義する

関数（function）は、「ひとまとまりの処理」を名前をつけて保存しておくようなものです。

同じ処理を複数回使いたいときや、処理を整理して見やすくしたいときに役立ちます。

関数を書くだけではアニメーションが動かないので、呼び出しが必要です。

あとから『関数名();』 と書くだけでどこでも呼び出せるので便利です！

基本の書き方

//関数の定義
function 関数名() {
  //ここに処理を書く
}

//関数の呼び出し
関数名();

こんなふうに使う！

「elementにanimateというクラス名を追加する」という処理を関数setAnimationにまとめて、

buttonがクリックしたら関数setAnimationを呼び出すという実装をする場合の書き方です。

//関数setAnimationの定義
function setAnimation() {
  const element = document.querySelector('.box');
  element.classList.add('animate');  // 'animate'クラスを追加してアニメーションを開始
}

// ボタンがクリックされたら、関数setAnimationを呼び出す
const button = document.querySelector('button');
button.addEventListener('click', () => {
  setAnimation();  // 関数を呼び出す
});

条件分岐（if, else if, else）

「〜のときはこうする、それ以外はこうする」 という分岐処理をしたいときに使います。

私は「特定もクラス名が含まれているか」を判定してアニメーションを実装する時によく使っています。

基本の書き方

if (条件) {
  // 条件がtrueのときの処理
} else {
  // 条件がfalseのときの処理
}

こんなふうに使う！

elementにshowというクラス名が含まれているかを確認し、

含まれていればshowを削除、含まれていなければshowを追加します。

if (element.classList.contains('show')) {
  element.classList.remove('show');
} else {
  element.classList.add('show');
}

forEach（繰り返し）

forEach() は、配列や複数の要素を1つずつ取り出して処理するための便利なメソッドです。

配列：複数のデータを1つのまとまりとして扱いたいときに「配列」という形を使います。

HTML上のボタンなど、「同じクラス名の複数の要素」にイベントをつけたいときにもよく使います。

forEachは「配列（または配列のようなもの）」に対して使うメソッドなので、

HTMLの複数の要素を扱うときは document.querySelectorAll() をセットで使うことがとても多いです。

基本の使い方

配列.forEach(コールバック関数);

//arrow関数を使う場合
elements.forEach((element) => {
   //ここに処理を書く
});

//無名関数を使う場合
elements.forEach(function(element) {
  //ここに処理を書く
});

こんなふうに使う！

querySelectorAllで .nav-item 要素をすべて取得し、forEachでそれぞれにクリックイベントリスナーを追加。

クリック時に、そのアイテムの文字色を赤に変更します。

const navItems = document.querySelectorAll('.nav-item')
navItems.forEach((navItem) => {
  navItem.addEventListener('click', () => {
      navItem.style.color = 'red';
  });
});

最後に

これらのコードは、私がJavaScriptを書くときにほぼ毎回使っている“よく使うパーツ”たちです。

実際の案件でも、この組み合わせでいろんな機能を作ってきました

次回はこの中のコードを組み合わせて、簡単な機能を実装する例も紹介できたらと思っています！

質問などあれば、ぜひお問い合わせやTwitter（X）のDMで教えてください〜

最後までご覧いただきありがとうございました

それではまた次回のブログでお会いしましょう

勉強方法

ここ数ヶ月、私はある“縛り”を自分に課していました。

それは「JavaScriptだけでコーディングする」というもの。

jQueryが必要な場面（プラグインなど）を除いて、できる限りJavaScriptで書くことにこだわって取り組みました。

最初はとにかく大変で、

• 基本的な書き方も曖昧
• アニメーションの実装手順がわからない
• classList.addやaddEventListenerといった、超基本の使い方すらピンと来ない

といった状態。

とにかく何もわからないまま手を動かす感じでした。

ChatGPTをひたすら真似してみた

そんな私の助けになってくれたのが、ChatGPTです。

ただし、ただコードをコピペするだけではなく、『真似をする』ということを意識しました。

実は以前もChatGPTを使っていて、教えてもらったコードを参考にしながら書いてはいたのですが、
「全然自分の身になっていないな…」という感覚が拭えませんでした。

そこで変えたのが、次の2つです。

「意識」を変える

「この案件で実装できればOK」から、

「この案件でやったことは自分の武器にする」という気持ちで取り組むようになりました。

精神論かもしれませんが、この意識の変化でコードを見る視点や調べ方が変わったように感じます。

「わからないから聞く」ではなく、「理解するために聞く」に変わった感覚です。

「ChatGPTへの聞き方」を変える

今までは、やりたいことをざっくり全部伝えて、丸っとコードを書いてもらっていました。

でもそれでは、どこがどう動いているのか理解できず、気づけば「何も身に付いてない…」ということに。

社長との面談で「たくさん書いてるのに、全然自分のものになってる感じがしなくて…」と相談したところ、

「部分的にChatGPTを活用してみては？」とアドバイスをいただきました。

それからは、

• まずは自分でできるところまで書いてみる
• わからない部分をChatGPTにピンポイントで聞く

というスタイルに切り替えました。

最初は質問の回数も多く、なかなか思うようにいかないこともありましたが、

少しずつ理解が深まることで「聞かずに書けるコード」が増えてきて、確かな成長を感じられるようになりました。

理解の変化

最初の頃は、JavaScriptで何かを書こうと思っても、「何から書けばいいの？」という状態でした。

長いし、ややこしいし、正直ちょっと苦手な言語だと感じていました。

でも、実践を積む中で

• コードの意味がだんだんわかってくる
• 実装の流れが自分の中で整理できる
• 「こういう感じのコードになるかな？」と、ChatGPTの回答を予測できるようになる

など、確実に前進している実感があります。

JavaScript縛りでコーディングをするようになって初めての案件を終えた時には、

『あ、掴んだかも』と言う感覚がありました。

それまでは、毎回1から調べて、聞いて、試して…の繰り返しでしたが、

この頃から「これは前にやった実装に似てるな」と気づけるようになったんです。

聞き方も変わってきて、

具体的に「今ここまで書いてて、この次どう書いたらいい？」と聞けるようになったことで、ChatGPTの返答も精度が上がり、実装ミスも減ったように思います。

今後の勉強について

この数ヶ月の経験から、やっぱり一番身につくのは実践だと実感しました。

なので、これからもとにかく手を動かしながら学んでいきたいです。

すぐに達成したい目標は、「ChatGPTに頼らなくても、自分で実装できる状態になること」。

そのうえで、アニメーションやAPI連携、フレームワークなど、より応用的な内容にも少しずつ挑戦していきたいなと思っています。

最後に

少し前の自分と比べると、理解できることが増えたり、苦手意識が薄れてきたり、

小さな変化ですが確かな“成長”を感じられるようになってきました。

これからも地道に、コツコツ、自分のペースでやっていこうと思います。

読んでくださってありがとうございました！

次回は私がJavaScriptの実装でよく使うコードを一挙にご紹介します！

お楽しみに

【おまけ】こんなコード見たことありませんか??

774: function(e, t, n) {
				"use strict";
				n.r(t);
				var r = n(709),
					i = n.n(r)();
				i(window).scroll((function() {
					i(".inview").each((function() {
						var e = i(this).offset().top,
							t = i(window).scrollTop(),
							n = i(window).height();
						t > e - n + n / 2 && i(this).addClass("is-anim")
					}))
				}))
			},

LAST LOVE – 山田和輝公式婚活サイト のコードを引用

このコード、何が書いてあるのか全然わからない…って思ったことありませんか？

私も勉強を始めたばかりの頃に、他のサイトのコードを見ていてこういうのに出くわして、心が折れそうになったことがあります。

「JavaScript勉強してるし、コードも書けるようになってきたのに、なんで全然読めるようにならんのや…」

そう思って、社長に相談してみました。

すると、

「それ、読めなくて当然。これはJS Minifyっていって、コードを軽くしたり、他の人に流用されにくくするための“暗号化”みたいなものだよ」

と教えていただきました。

なるほど
つまり、これはわかりづらくするためにあえてやっていることで、読めなくて当たり前なんですね。

▼ ちなみに「JS Minify」を使えば、自分でもこういう“暗号化”ができます
[JS Minify（https://rakko.tools/tools/33/）]

コードを圧縮してファイルサイズを軽くしたいときや、ソースコードを見られたくないときに便利なので、覚えておくと役立つかもしれません

ぜひ使ってみてくださいね！

6月は手付かず。。。

6月はほぼ手付かずでした

本当に言い訳の余地もないのですが。。。

原因は主に以下の2つだと考えています。

1. 土日に予定を詰めて勉強の時間を作れなかったこと
2. 平日に勉強時間の捻出ができなかったこと

昨年の10月にフットサルを始めて以来、週末はフットサルで埋まってしまうことがほとんど。。。

朝から晩までボールを蹴っているので、家に帰ってきてくる頃にはくたくたです

お風呂に入って寝るのがやっとの日々でした。

じゃあ平日は何をしていたんだという話ですよね。

私の平日のスケジュールをまとめてみました

朝は運動の時間、夜は勉強の時間と決めていたのですが、

なかなかまとまった時間が捻出できず、気づいたら寝る時間。

勉強しなきゃなのに何もできていない自分に苛立ちを感じて、悶々とした1ヶ月を送りました。

転機

勉強しなきゃと思っているのに頑張らなかった私が、

『気持ちを入れ替えてもう1回頑張ってみよう』と思えたのは、

久保さんと面談をして目標を見つけることができたからです。

私が面談しなきゃいけないのに、

いつの間にか面談してもらっているような気がしてきて。。。

一応先輩なのに申し訳ないし情けない

6月に溜め込んでいた漠然とした不安とか悩みを聞いてもらって、

面談が終わる頃にはめちゃめちゃ前向きになれていました

自分の中でJavaScriptを勉強する理由を見つけることができたから、

もう一度向き合ってみようかなと思えたんだと思います。

久保さんには感謝の気持ちでいっぱいです！！！（届け、この気持ち！！）

2つ変えてみた！

このままではあかん！！！と思いまして、時間の使い方を考えてみました。

そこで思いついたのが、『徒歩通勤』と『業務時間の変更』です。

1つずつ説明していきますね

徒歩通勤

出勤前のお散歩が日課でしたが、朝の貴重な40分をお散歩に使うと、

朝ごはんを食べたり、出勤の準備をしたりしているうちに、

家を出る時間になってしまいます。

『勉強の時間を作るために散歩をやめる』という選択肢もありますが、

朝のお散歩だけは譲れなかった

どうしようかと途方に暮れていましたが、

『お散歩と何かを同時にやればいいんだ！』と思い立って始めたのが徒歩通勤です。

さすがに猛暑すぎるので、日傘をゲットしたことを機に自宅から歩いて出社しています

だいたい50分ぐらいで、景色を見て好きな音楽を聴きながら楽しく歩いています。

勤務時間の変更

もともとの勤務時間は10~19時でしたが、8~17時に変更しました。

勤務時間を変更によるメリットは、

1. 夜にまとまった勉強時間を取ることができる
2. 10時に出社するよりも気温が低く涼しい（誤差の範囲かも）
3. 夜ご飯が早くなったので熟睡できる
4. 規則正しい生活が送れる
5. 1人で完結するタスクを進める時間と、要相談のタスクを進める時間とを明確に分けることができる

の5つでした。

メンバーが増えてから自分以外のタスクの進捗管理もすることが増えてきて、

頭の中を整理する時間が欲しいと思っていたので、

朝の2時間は1人で集中できるということも含め、貴重な2時間です

そして、何よりも夜にがっつり自由な時間を取れるようになったことが大きい！！！

帰ってから家事をして、翌日の出勤準備をして、お風呂に入っても、

たっぷり時間があってめちゃくちゃ嬉しい〜

この時間をJavaScirptの勉強に当てようという魂胆です

時間があるからってフットサルに行きすぎないように気をつけなきゃ。。。

ここ数日は順調に勉強時間をとることができています。

『あっ、私って全部やること終わらせてからじゃないと集中できないんだな』

とようやく気がつくことができました

思い返してみれば学生時代のテスト勉強でも、

部屋が散らかっていると掃除を始めてしまって1日を無駄にするような学生でした、はい。。。

この2つを踏まえ、現在の1日のスケジュールをまとめてみました

ご飯とYouTubeを見るとか、お弁当を作りながら洗濯物を干したりとか、

いくつかのタスク（??）を同時進行で進めるようになったので、

かなり1日が簡略されたと思います。

画像の長さを見れば違いは一目瞭然(°_°)

勉強内容

7月に入ってからProgateでJavaScriptの勉強を進めています。

いきなりNode.jsのコースを学習し始めたんですが、

途中からかなり難しくなってきて挫折しそうだったので、

JavaScriptの理解をもっと深めてNode.jsに再挑戦しよう！ということでJavaScriptの復習を進めています。

Progateでどこまでできるようになるかわかりませんが、とにかく何週もやって頭に叩き込もうと思います！

備忘録（7/12追記）

昨日退勤した後にProgateを進めていて、コールバック関数ってなんじゃってなってたんですが、

今日出勤してから野中さんに教えてもらったので、

忘れないようにここに書き留めておきたいと思います。

コールバック関数とは引数の中に関数が入っているもののことを言います。

なんのこっちゃわからん！！という方のためにコードで説明していきますね

下のコードではforEachメソッドを使ってnumbersに定義された配列を全て出力しようとしています。

forEachメソッドの後ろにある括弧には引数を指定することができますが、

この引数に関数を入れるとコールバック関数と呼ばれるようになります。

今回はforEachメソッドの引数にアロー関数が入っています。

//まずは構文をおさらい！
number.forEach(引数);

//引数の中にアロー関数を入れると...
number.forEach( (引数) => {処理})

//実際のコードはこんな感じ
const numbers = [1,2,3]
numbers.forEach((number) => {
console.log(number);
});

上のコードでは(number) => {console.log(number);}の部分がコールバック関数になります。

補足

アロー関数とは関数を定義するときに使われるもので、通常の書き方よりも簡単に書くことができます。

下のコードで合わせて確認しておきましょう！

//通常の書き方
const 定数名 = function() {
	//処理
};

//アロー関数の書き方
const 定数名 = () => {
	//処理
};

function(){};と長々書いていたところを、()=> {};だけで済ませられます！

ちなみにアロー（arrow）は和訳すると矢印。

確かに=>矢印に見えますね！

7月頑張りたいこと

今JavaScriptの復習を進めているので、復習を終わらせて

Node.jsのコースに入れるように頑張ります！

最後に

いかがでしたでしょうか??

私が色々試行錯誤できているのは、

原点に立ち返れば自由な働き方を許してくださった野中さんのおかげです！

8月にご報告をする時までには、

『Node.jsってこんなことができるんだよ！』って堂々と皆さんにお伝えできるように、

こつこつ勉強を続けていくので、

『ちゃんと勉強してんの??』って気になったら、

またブログを見にきてくださると嬉しいです

では今日はこの辺で！！！

最後までご覧いただきありがとうございました

SE並みにコーディングを極めたい！！

先日、『未経験Webデザイナーの1年間の振り返り』でも書いたように、

2年目は【コーディングを極める】という目標を立てました。

入社してからの1年間でデザイン・コーディング・動画編集など幅広く業務を経験させていただきました。

その中で圧倒的に楽しさを感じるのはコーディングで、

SANKOU!でいろんなサイトを見ていても、

デザインより、アニメーションをどう動かしているのか気になることが多々ありました。

Webisのメンバーが増え、今後の経営や、より効率よく案件の進めていくために何ができるかを考えた時に、

私がもっとコーディングのスキルをつければ、Webisが引き受けられる仕事も増えるだろうし、

他のメンバーの強みを活かしながら、円滑に案件を進められるのではないかと思いました。

成長記録でもあり、自分にプレッシャーをかけるためでもあり、

誠に勝手ながら、現在JavaScriptの勉強をしている方に微力でもお役に立てれば…という思いで

勉強日記をつけていきたいと思っています！

どうやってコーディングを極めるの??

私が現時点で考えている【コーディングが極められた】状態とは、

『Node.js、Three.js、Canvas.jsを理解し、実務で活かせる状態』です。

では具体的にどうやって極めていくのか、これからの予定について書きたいと思います。

Node.js

1. 概要を把握する（動画・Webサイトを活用）
2. Progateで基礎を固める

Three.js

1. 概要を把握する（動画・Webサイトを活用）

Canvas

1. 概要を把握する（動画・Webサイトを活用）
2. CODEPREPではじめてのCanvas（入門編）をやり切る
3. CODEPREPでCanvasについての教材（実践編）をやり切る

勉強法を調べるため、いろんなサイトを見てみましたが、

日本語で書かれた記事・情報はまだまだ少ないようです。。。

上記の予定を３ヶ月以内に終わらせることを目標に、

同時進行で勉強法も調査していきたい思います。

最後に

いかがでしたでしょうか??

今回は『コーディングを極めるぞ！！』という意気込みを語ってみました。

ここまで読んでくださったみなさんには、今年度の目標があるでしょうか??

私は短い期間で大きな成果を得たい性格なので（一番あかんやつ）

長期間コツコツと積み上げるのは正直得意ではありません。

ブログに書くことで、自分にプレッシャーをかけて、

皆さんにも見守っていただきながら【コーディングを極めたWebデザイナー】を目指します

温かい目で見守っていただければ幸いです！

今後のブログでは、勉強方法や、勉強で使ったWebサイト・本・動画をご紹介していくつもりなので、

引き続きご覧いただければ幸いです！

今日はここまで！

最後までご覧いただきありがとうございました