SCSSとの出会い

私がSCSSに出会ったのは、個人的にとある案件を引き受けたときでした。

コーディング規則についてのドキュメントを読んでみると、こんな文言が。

また、ベースにしてほしいと伝えられたコーディングファイルを見てみると、

そこにはCSSのようでCSSではない、まるで暗号のようなコードが広がっていました。

個人で引き受けた案件で、休日に取り組んでいたためその場で社長に質問することもできず、

迫る期限に怯えながら、ひたすらコードとにらめっこしていたのを今でも鮮明に覚えています。

そんな私の様子を見て、後日社内で社長がSCSSの勉強会を開いてくださり、

そこから本格的にSCSSの便利さ・魅力を知ることになりました。

SCSSのここがすごい！

1.コードが構造的に書ける「ネスト」

SCSSではネストと言って入れ子構造でセレクタを書くことができます。

/* CSSで書いた場合 */
.sec-company .company-title {
    font-size: 40px;
}

.sec-company .company-title .en {
    font-size: 16px;
    margin-top: 12px;
}

上のコードをSCSSを使って書いてみると、

// SCSSで書いた場合
.sec-company {
    .company-title {
        font-size: 40px;
         .en {
          font-size: 16px;
          margin-top: 12px;
        }
    } 
}

こんなふうに入れ子にして書くことができます。

HTMLの階層とスタイルの階層が対応していて、コードを見ただけで構造が把握しやすくなります。

何度も同じセレクタを書かなくていいので時間短縮になります

2.よく使うスタイルを再利用「ミックスイン」

何度も同じコードを書いていると、『まとめられたら便利なのに』と思うことありませんか？？

HTMLで同じクラス名をつけておけば良い話ですが、

微妙に色が違ったり、サイズが違ったりすると、

同じコードを何度も書かなければいけなくなってしまいます。

そんな時に使えて便利なのがミックスインです。

// 変数$mbに引数40pxを渡している
@mixin flex-center($mb: 40px) {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: $mb;
}

ul {
  @include flex-center(56px); 
}

//CSSで出力されるとこうなります👇
ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 56px;
}

mixinは@includeを使って呼び出すことができます。

また、引数（パラメータ）を設定することで、状況に応じて値だけを変えて呼び出せます。

上記のコードではmargin-bottomに変数$mbで置いておくことで、

数値を臨機応変に調整できるようになっています。

3.カラーやサイズを統一できる「変数」

SCSSでは何度も出てくるカラーや数値を変数として管理することができます。

Figmaでもスタイルやバリアブルを登録できるようになっているので、

カラーコードよりも色の名前で変数でまとめておく方が、

実装時の手間が省けると実感しています。

$main-color: #FFFFFF；
$highlight-color: #ff6e6c;
$secondary-color: #67568c;
$tertiary-color: #fbdd74;
$mb: 40px;

//　実際に使うときは...
.sec-title {
    color: $secondary-color;
}

このコードを見て『CSSでも同じことできるんじゃなかったっけ??』と思われた方、

鋭いです

CSSでもカスタムプロパティという『変数のように値を定義して使いまわせる仕組み』があります。

変数を使うことで、色やサイズなどの共通スタイルを一括管理しやすくなります。

:root {
    --main-color: #FFFFFF;
    --highlight-color: #ff6e6c;
    --secondary-color: #67568c;
    --tertiary-color: #fbdd74;
    --mb: 40px;
}

/* 実際に使うときは... */
.sec-title {
    color: var(--secondary-color);
}

ではCSSのカスタムプロパティと比較して、SCSSの変数を使うメリットはあるのでしょうか??

結論、あります

• ネストの階層に関係なく変数を使うことができるSCSSの変数は、どんなに深くネストした場所でも自由に呼び出せます。
• 変数を計算式に使用することができる色の明るさを少し変えたり、サイズを調整したりといった計算も、SCSSの変数なら簡単にできます。例えば、$mb * 1.2 のように書けるので、デザインの微調整がとっても楽になるんです。
• mixinなどの他の機能と合わせて使用できるSCSSの変数は、ミックスインや関数と合わせて使えるのが大きな魅力。共通のスタイルをまとめつつ、変数で細かく調整できるので、コードの再利用性がアップします。
• 変数やスタイルを複数のファイルに分けて管理することが可能SCSSはファイルを分割して管理できるので、変数も「色だけ」「サイズだけ」といった感じでまとめておけます。大きなプロジェクトやチーム開発では、これがあるのとないのとで作業効率が大違い！

SCSSを使う際には変数も合わせて使ってみてほしいです。

4.ファイル分けでプロジェクトが整う

ページ数の多い案件では、複数人で開発を進めることがよくあります。

その際に問題になりやすいのが、「自分以外の人が書いたスタイルがどこにあるか分からない」という状況です。

そこで役立つのが、SCSSの設計手法のひとつである「FLOCSS」です。

FLOCSSでは、スタイルを以下のように役割ごとに分類してファイルを管理します。

├─ foundation/   → リセットCSSや変数、mixinなど土台となる設定
├─ layout/       → ヘッダーやフッター、メインレイアウトなどページ全体の枠組み
├─ object/
│   ├─ component/→ ボタン・カードなど再利用できるUIパーツ
│   ├─ project/  → サイト固有のブロック（例：商品一覧、記事スライダーなど）
├─ utility/      → marginやtext-alignなど、使い捨ての補助クラス

のように**「どんな目的のスタイルか」**を明確にした構成にしておくと、

• 共通パーツとページ専用パーツが混在しない
• 必要なスタイルがどこにあるかをすぐに見つけられる
• うっかり他のページに影響してしまうミスを防げる

といった大きなメリットがあります。

最後に

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

最初は少し抵抗があるかもしれませんが、一度使うとその便利さにトリコになってしまいます

今回の記事が、SCSSを始めるきっかけや、「なんか良さそうかも」と思えるヒントになればうれしいです。

私もまだまだ勉強中なので、「こんな書き方あるよ！」などあればぜひ教えてください

一緒に成長していきましょう！

参考文献

【CSS設計】FLOCSS(フロックス)で保守性の高い記述を極める！

Sassとは？CSSとの違いや機能、使い方を初心者向けに解説

【命名規則】BEMを使った書き方についてまとめてみた【CSS】

SCSSってなに??

SCSSは効率的なスタイル設計ができるCSSを拡張した記法です。

見た目はほぼCSSと同じなのが特徴ですが、変数やネスト、関数などの便利機能も使えるのが魅力です。

この後詳しく説明していきます。

SCSSを使う準備

今回はVS Codeでの作業を想定して説明していきます。

拡張機能のダウンロード

画面左端にあるメニューから、拡張機能のアイコンをクリックします。

検索窓で「Sass Compiler」と入力します。

Live Sass Compilerが出てきたらインストールしてください。

『Live Sass Compiler』はSCSSのコードをCSSに直してくれる拡張機能です。

SCSSはそのままでは使えないため、「CSSに変換する作業（＝コンパイル）」が必要です。

コンパイルとは、SCSSのような人間向けのコードを、ブラウザが理解できるCSSに直す作業のことです。

画面下の『Watch Sass』をクリックするとコンパイルが開始されます。

エラーがなければ上記のようにSCSSがコンパイルされて、cssファイルとcss.mapファイルが生成されます。（css.mapファイルを生成する場合は要設定）

css.mapとは「開発者ツール（検証ツール）」で調べたときに、SCSSで書いた元の場所を教えてくれるファイルです。

たとえば、開発者ツールで <h1> の color をチェックすると…

.css.map がある場合 → main.scss の 20行目に書いてある、と表示される

.css.map がない場合 → style.css の 200行目などと表示される（元のSCSSファイルのどこかわからない）

そのため、どこを改善すれば良いかがとてもわかりやすいです。

エラーがあれば赤のボックスで囲った部分のように、

エラーが起こっている箇所を教えてくれます。

基本の書き方

ネスト

まず、SCSSの特徴的な書き方として挙げられるのが『ネスト』です。

ネストとは下のコードのように入れ子のように記述することを言います。

このように書くことで、何度も同じセレクタを書かなくて済むのでとても楽です

.footer-flex-r {
    display: flex;
    gap: 20px;
    a {
        display: block;
        width: clamp(165px, 14.4vw, 231px);
    }
}

変数

SCSSでは、$ を使って値に名前をつけて保存することができます。

これを『変数（へんすう）』と呼びます。

よく使う文字サイズや色を登録しておくととても便利です。

最近では、Figmaのデータでもバリアブルやスタイルを用いて変数を登録できるようになりました。

デザインをコードに起こす際に、Figmaの変数をSCSSにも登録しておけば、

便利で、作業時間も短縮することができます。

$primary-color: #3498db;
$font-size-base: 16px;
$spacing-unit: 8px;

.button {
  background-color: $primary-color;
  font-size: $font-size-base;
  padding: $spacing-unit * 2;
}

ミックスイン（@mixin / @include）

ミックスインとは、よく使うコードのパターンを保存しておくことができるものです。

@mixin center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

ミックスインを呼び出す時は@includeを使います。

.box {
  width: 100px;
  height: 100px;
  @include center-flex;
}

ミックスインの中の値を変えたい場合は以下のように書くことができます。

@mixin text-style($size, $weight, $color) {
  font-size: $size;
  font-weight: $weight;
  color: $color;
}

p {
  @include text-style(14px, normal, #333);
}

実務でよく使うのはレスポンシブ対応する場合のブレークポイントの値です。

@mixin の中に書かれた @content は、

@include を使うときに書いたブロック（中かっこ {} の中身）を、その場所に差し込むという意味です。

$tab_large: 1100px;
@mixin tab_large {
    @media screen and (max-width: ($tab_large)) {
        @content;
    }
}

この場合はincludeを入れ子にして使います。

.l-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    @include tab_large {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

CSSとして書き出される場合は以下のようになります。

.l-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    @media screen and (max-width: 1100px) {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

ファイル名の付け方

SCSSファイルは基本的に先頭に_（アンダースコア）をつけることになっています。

アンダースコアがついているファイルはコンパイルされないことになっています。

_reset.scss       // CSSリセット
_header.scss      // ヘッダーのスタイル
_footer.scss      // フッターのスタイル

ではどのファイルをコンパイルすればいいのか、次の章で詳しく見ていきましょう。

ファイルの呼び出し

SCSSでコーディングをする時は下記のように各ファイルをフォルダに格納します。

以下はあくまでも一例ですが、SCSSファイルは目的ごとにフォルダを分けます。

この中でSCSSファイルの中でコンパイルされるのはstyle.scssだけです。

css/
├── foundation/          // リセットや基本スタイル
│   ├── _reset.scss
│   └── _base.scss
├── components/    // ボタンやカードなどの部品
│   ├── _button.scss
│   └── _card.scss
├── layout/        // ヘッダー・フッター・グリッドなど
│   ├── _header.scss
│   ├── _footer.scss
├── pages/         // 各ページ専用のスタイル
│   └── _home.scss
└── style.scss      // すべてをまとめるエントリーファイル

style.scssは以下のような記述になります。

@useを使って他のscssファイルを呼び出しています。

@charset "utf-8";

//Foundation
@use "foundation/reset";
@use "foundation/base";

//Component
@use "component/button";
@use "object/card";

//Layout
@use "layout/header";
@use "layout/footer";

//Pages
@use "pages/home";

最後に

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

今回のブログではSCSSの基本構文を紹介しました

初めてSCSSを触った時は、CSSとの違いに混乱し、

見慣れないコードが溢れていることに戸惑いました

今、SCSSのいろんな機能を使ってみて思うのは、『全て使い切る必要はない』ということです。

CSSと比較してSCSSは複数ファイルにまたがって記述します。

『どこに何が書いてあるかわからなくなってしまった』という状態は本末転倒です。

自分や一緒に作業する人にとってわかりやすいように使うことが大事だと感じています。

試行錯誤しながらSCSSを使ってみてください。

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

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/）]

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

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

unslickはどんな時に使う??

Slickで一度初期化したスライダーを解除したい場面、意外と多いですよね。

初期化：「あるライブラリを特定の要素に適用して機能を有効化する」ことを initialize（初期化）すると表現します。

ここでは、unslickが活躍する典型的なケースを紹介します。

たとえば、レスポンシブ対応で 「PCではスライダーを表示するけれど、スマホではスライダーを使わず通常のリスト表示に切り替えたい」 というとき、unslickを使ってSlickの機能を解除します。

こんな案件を想定してみましょう

より実務に近いイメージを持つために、こんなケースを想定してみましょう。

あなたはあるコーポレートサイトの制作を担当しています。

トップページには「インタビュー記事」をカード形式で横にスライドできるようにしたい。

しかし、クライアントから「スマホではスライダーではなく、縦に普通に並べてほしい」と依頼がありました。

このような場合、画面サイズによって Slick を動的に付けたり外したりする必要があります。

さて実際にHTMLからコードを書いていきたいと思います。

jQueryとSlickのダウンロードはこちらから（CDNを使っても大丈夫です）

jQueryhttps://jquery.com/download/

Slickhttps://kenwheeler.github.io/slick/

HTML

<section class="sec-t-interview">
    <div class="wrapper">
        <h2 class="sec-ttl">
            <span class="outfit">INTERVIEW</span>
            インタビュー
        </h2>
        <ul class="interview-list">
            <!-- interview01 -->
            <li class="interview-item">
                <div class="interview-thumb">
                    <img src="images/interview01.jpg" alt="">
                </div>
                <p class="interview-date">2025年4月1日</p>
                <p class="interview-ttl">
                  未経験から挑戦。3年目デザイナーが語るリアルな成長ストーリー
                </p>
            </li>

            <!-- interview02 -->
            <li class="interview-item">
                <div class="interview-thumb">
                    <img src="images/interview02.jpg" alt="">
                </div>
                <p class="interview-date">2025年3月28日</p>
                <p class="interview-ttl">
                  “働く”をもっと自由に。若手メンバーが語る未来の働き方
                </p>
            </li>

            <!-- interview03 -->
            <li class="interview-item">
                <div class="interview-thumb">
                    <img src="images/interview03.jpg" alt="">
                </div>
                <p class="interview-date">2025年2月14日</p>
                <p class="interview-ttl">
                  ベンチャーの第一線で戦う20代のリアル
                </p>
            </li>

            <!-- interview04 -->
            <li class="interview-item">
                <div class="interview-thumb">
                    <img src="images/interview4.jpg" alt="">
                </div>
                <p class="interview-date">2025年1月5日</p>
                <p class="interview-ttl">
                  “やりがい”を形にする会社がめざすチームづくり
                </p>
            </li>

            <!-- interview05 -->
            <li class="interview-item">
                <div class="interview-thumb">
                    <img src="images/interview05.jpg" alt="">
                </div>
                <p class="interview-date">2024年12月20日</p>
                <p class="interview-ttl">
                  “好きを仕事に”自分らしく働くってどういうこと??
                </p>
            </li>
        </ul>
    </div>
</section>

CSS

.sec-t-interview {
    margin-bottom: 120px;
}

.sec-t-interview .sec-ttl {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 32px;
}

.sec-t-interview .sec-ttl span {
    display: block;
    color: #2074E9;
    font-size: 56px;
    margin-bottom: 8px;
}

/*　----- ここからSlickの設定 -----　*/
.sec-t-interview .slick-dotted.slick-slider {
    margin-bottom: 48px;
}

.sec-t-interview .slick-slide {
    margin: 0 16px;
}

.sec-t-interview .interview-thumb {
    margin-bottom: 24px;
}

.sec-t-interview .interview-date {
    font-size: 14px;
    color: #b2b2b2;
    margin-bottom: 16px;
}

.sec-t-interview .interview-ttl {
    font-weight: bold;
    line-height: 1.5;
}

/*　dotsの設定　*/
.sec-t-interview .slick-dots {
   bottom: -60px;
}

.sec-t-interview .slick-dots li button {
    width: 10px;
    height: 10px;
    padding: 0;
}

.sec-t-interview .slick-dots li {
    width: 10px;
    height: 10px;
    margin: 0 7.5px;
}

.sec-t-interview .slick-dots li button:before {
   font-size: 10px;
   color: #D1CACA;
}

.sec-t-interview .slick-dots li.slick-active button:before {
   color: #2074E9;
}

@media(max-width:430px) {
    .sec-t-interview {
        margin-bottom: 80px;
    }
    
    .sec-t-interview .sec-ttl {
        font-size: 18px;
        margin-bottom: 40px;
    }
    
    .sec-t-interview .sec-ttl span {
        font-size: 40px;
    }
    
    .sec-t-interview .interview-item {
        margin: 0 0 40px;
    }

    .sec-t-interview .interview-item:last-child {
        margin-bottom: 0;
    }
    
    .sec-t-interview .interview-date {
        font-size: 12px;
        margin-bottom: 12px;
    }
}

jQuery

$(document).ready(function(){
    function setSlick() {
        //画面幅430px以上ならSlickを初期化
        if($(window).width() > 430) {
            if (!$('.interview-list').hasClass('slick-initialized')) {
                $('.interview-list').slick({
                    arrows: false,
                    autoplay: true,
                    dots: true,
                    pauseOnFocus: false,
                    pauseOnHover: false,
                    slidesToShow: 3,
                });
            }
        } else {
            if ($('.interview-list').hasClass('slick-initialized')) {
                $('.interview-list').slick('unslick');
            }
        }
    }

    //関数を呼び出す
    setSlick();
    
    //画面幅が変更した時にもう一度関数を呼び出す
    $(window).on('resize', function() {
        setSlick();
    });
});

unslickの間違った使い方

最初は unslickを入れればすぐ動くと思っていたのですが、

状態管理やタイミング に気をつけないと、逆にバグの原因になってしまいます。

よくある間違いの一つが、以下のような書き方です

$(document).ready(function(){
    function setSlick() {
        if($(window).width() > 430) {
            $('.interview-list').slick({
                arrows: false,
                autoplay: true,
                dots: true,
                pauseOnFocus: false,
                pauseOnHover: false,
                slidesToShow: 3,
            });
        } else {
            $('.interview-list').slick('unslick');
        }
    }

    setSlick();
    $(window).on('resize', function() {
        setSlick();
    });
});

.interview-listにunslickを指定し、slickを解除しようとしていますが、

実際に.interview-listにslickが初期化されていないので、

Uncaught TypeError: Cannot read properties of undefined (reading ‘unslick’)

というエラーが検証ツールのコンソールタブで確認できます。

つまり『Slick解除しろって言われてもSlick初期化されてないよ』という状況です。

unslickの正しい使い方

では、unslick() を安全に使うにはどうしたらいいのでしょうか？

答えは「状態チェック」です。

Slickには、初期化されているかどうかを判定するために slick-initialized というクラスが自動で付与されます。

これを活用して、以下のように書くのが安全です！

if(window.width() > 430) {
    if (!$('.interview-list').hasClass('slick-initialized')) {
        $('.interview-list').slick({
            arrows: false,
            autoplay: true,
            dots: true,
            pauseOnFocus: false,
            pauseOnHover: false,
            slidesToShow: 3,
        });
    } else {
        if ($('.interview-list').hasClass('slick-initialized')) {
            $('.interview-list').slick('unslick');
        }
    }
}

.interview-listが、slick-initializedというクラス名を持っていなければslickを初期化し、slick-initializedを持っていれば解除するという書き方をすることで、エラーの発生を防げます。

なぜUnslickを使わないといけないのか

「画面幅をチェックして、最初から必要な時だけslickを使えばよくない??」と思った方、鋭いです。

でも、それだけではうまくいかないこともあるんです。

以下のように、430px以上の時だけslick初期化すればいいんじゃないかと私も思っていました。

//画面幅が768px以上ならSlickを動かす
$(document).ready(function(){
    function setSlick() {
        if($(window).width() > 430) {
            if (!$('.interview-list').hasClass('slick-initialized')) {
                $('.interview-list').slick({
                    arrows: false,
                    autoplay: true,
                    dots: true,
                    pauseOnFocus: false,
                    pauseOnHover: false,
                    slidesToShow: 3,
                });
            }
        } 
    }

    setSlick();
    $(window).on('resize', function() {
        setSlick();
    });
});

しかしこのやり方では、リサイズ後に画面サイズが変わったときの挙動まで制御できないという問題があります。

たとえばPCからスマホサイズにリサイズした時に、初期化されているSlick が解除されず、そのまま崩れた表示になってしまう…なんてことも。

だからこそ、画面サイズが変わるタイミングでは unslickを併用して、一度解除することが必要なんです。

最後に

いかがでしたか??

今回は unslickを使う場面や、正しい使い方についてまとめてみました。

• unslickは スライダーを解除したいときに使う
• 初期化されているかどうかのチェックが大事
• 実務でよく使うので、しくみを理解しておくとトラブル回避に繋がる

ぜひ皆さんも自分でコードを書いて試してみてくださいね！

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

また次のブログでお会いしましょ〜

まずはじめに

このブログを見てくださっている方の中には、

『FTP』や『BASIC認証』というワードを初めて聞いた方がいるかもしれないので、

それぞれ説明していきますね

『知ってるよ！！』という方はすっ飛ばして次の章へどーぞっ

BASIC認証とは

BASIC認証は、Webサーバーが特定のページやリソースへのアクセスを制限するために使用するHTTPの認証方式の一つです。

ユーザー名とパスワードを要求し、認証に成功した場合のみ、Webサイトへのアクセスを許可する仕組みです。

HTTP：WebブラウザとWebサーバーの間でデータを送受信する仕組みのこと。

FTPとは

インターネット上でファイルを転送するためのプロトコルです。

パソコン内にあるHTMLや画像ファイルをサーバーに転送することで、インターネット上のWebサイトとして公開できます。

今回はFileZillaというFTPソフトを使用しています。

プロトコル：コンピュータでデータをやりとりするために定められた手順や規約、信号の電気的規則、通信における送受信の手順などを定めた規格のこと。

『FTPを使ってBASIC認証をかける』とは??

『FTPからBASIC認証がかけられるんですか??』

と社長に聞いてみたところ、

『.htaccessと.htpasswdという2つのファイルをサーバーにアップすることでFTPからもBASIC認証かけることができます！』

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

なるほど、たまにFTPで見かける『.htaccess』ファイルはアクセス制限のためのファイルだったのか。。。

ここで浮かび上がる疑問は『ファイルをサーバーにアップするのはわかったけど、何を書けばいいんだろう??』ということです。

.htaccessと.htpasswdについて詳しく説明していきますね！

確認しておくこと

次章に進む前に確認していただきたいことが2つあります！

1つ目、不可視ファイルはFinder（WindowsはFile Explorer）で表示されますか？

不可視ファイルとは「.（ドット）」から始まるファイルのことで、FinderやFile Explorerでは非表示設定になっています。

VSCodeで.htaccessと.htpasswdを作成して、保存して確認してみてください。

.htaccessと.htpasswdはFinder（WindowsはFile Explorer）では非表示の設定になっていますので、

先に表示されるように設定しておきましょう。

Macの方

ショートカット⌘Command＋⇧Shift＋.（ドット）で表示・非表示切り替えることができます。

Windowsの方

File Explorer上部にある『表示』タブを選択し、『隠しファイル』のチェックボックスをオンにしてください。

次に、次章以降で『ドキュメントルート』と『ドメイン』という言葉が出てきますのでおさらいしておきましょう。

ドキュメントルート

サーバー内でウェブサイトの公開用ファイルが配置される場所のことです。

URLに反映されないのでわかりにくいですが、『htdocs』 『www』『public_html』などが多いようです。

ドメイン

インターネット上の住所のようなものです。
例えば、example.com や google.com がドメインです。

絶対パスを調べる

.htaccessを作成する時に必要になるのでFTPの絶対パスを調べてみましょう。

phpファイルを作って以下のコードを貼り付けてください。

<?php 
    echo dirname(__file__);
?>

どんなファイル名でも問題ありませんが、ここではpath.phpにしておきましょう。

作成できたら、FTPでドメイン直下にアップします。

実際にURLを打って確認してみましょう。

例）https://takai-ayaka.com/の場合→https://takai-ayaka.com/path.php

画面の左上に、上の画像のような文言が表示されます。

実際に案件で表示させた時の画像なので特定されないように一部伏せていますが、

home/ホスト名/ドキュメントルート/ドメインという順番で表示されるはずです。

.htaccessの作り方

以下の４項目を設定してください。

このあと.htacessはドキュメントルート（ここではpublic_html）直下にサーバーアップしますので、

先ほど調べた絶対パスを使うと以下のようになります。

AuthUserFile "/home/FTPのホスト名/public_html/.htpasswd"
AuthName "Please enter user name and Password." 
AuthType BASIC 
require valid-user 

.htpasswdの作り方

ユーザー名とパスワードを決める

左側にユーザー名、コロンを挟んで右側パスワードを書きます。

パスワードを生成するのが難しい方はランダムでパスワードを生成してくれるツールを使ってみてください

パスワード生成（パスワード作成）ツール

test:EAwFNLXy8yER

パスワードを暗号化

BASIC認証はセキュリティ面が弱いのでパスワードを暗号化しておきましょう。

パスワード暗号化ツールを使って、暗号化します

.htaccess による認証用　パスワード暗号化ツール

test:zzJePjaUE7PTY

「生成」ボタンを押すたびに暗号化されたパスワードが変わりますが、

どれを使っても大丈夫ですのでご安心を

FTPで.htaccessと.htpasswdをアップする

ドキュメントルート直下にアップしましょう！

BASIC認証は、.htaccessと.htpasswdを設置した階層以下をまるっとロックすることができます。

上の図では緑の範囲をロックしてくれるわけです。

BASIC認証をかけたい範囲によってhtaccessとhtpasswdを設置する場所を調整してみてくださいね。

エラーが出る時

500エラーや入力しても何度もBASIC認証が出る場合など、

『うまくいかない。。。』という時は、以下の2つを確認してみてください。

• htaccessとhtpasswdがサーバーのどこにアップされているか
• htaccessの『AuthUserFile』に書いている絶対パスがあっているか

最後に

いかがでしたか??

皆さんの疑問は解決できましたか??

私が実際に案件でこれをやった時は、

エラーも出るし、入力しても入力してもBASIC認証が繰り返し出て突破できないしで、

2時間近く闘ってました

今回のブログを読んでくださった皆さんは、私の屍を飛び越えてひょいひょいっ！と実装できることを祈っております

もし不明点があればいつでもブログのお問い合わせやTwiiter（@webis_takai）へ

気軽にメッセージ送っていただけると幸いです

次回のブログが今年最後のブログになりそうですね

今回はこの辺でっ！

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

今回は…

今回は、ローディングアニメーションでよく目にする『プログレスバー』について考えてみたいと思います。

先日、お仕事でプログレスバーを初めて実装しました。

『JSでローディングの進捗情報を取って作ってるんだろうなぁ』と思っていたんですが、

そんなことはできないらしい。。。

上のローディングバーは、CSSアニメーションメインで作っています。

動きのタイミングはローディングの進捗状況とは関係なく、animation-delayで調整しています。

それに加えて、JSでアニメーションが終わったタイミングを取得したり、

if (document.readyState === "complete") {
  //ここにローディングが終わっていた場合の処理を書く
}

のようにローディングが終わったを判定し、

クラス名を付与してCSSアニメーションを発火させるなどの処理を行いました。

今回はローディングの進捗状況と連動したアニメーションに挑戦します

できそうな気がする！！！

プラグインを２種類と、自作で作る方法を模索します。

それぞれのメリット・デメリットもまとめるのでぜひ最後までご覧ください

読みながら作業を進める方へ

jQueryを先にダウンロードしておくとスムーズに進められます

こちらからどうぞっhttps://jquery.com/download/

Pace.js（できなかった）

まず初めにPace.jsです。

最初にお伝えしておきますが、このプラグインではローディングの進捗状況と連動したアニメーションを作ることができませんでした

ただ、とても簡単にすぐ作れるので、

簡易的なプログレスバーを作りたい方もいらっしゃるかと思うので備忘録として残しておきます。

プラグインとして用意されているJSとCSSが連動して、自動的に要素が組み込まれる仕組みです。

【公式】PACEhttps://codebyzach.github.io/pace/

メリット

• CSS・JSをHTMLに読み込むだけで実装できるので、時間をかけずに実装したい場合はめちゃくちゃおすすめ！
• ローディングアニメーションのパターンが多い

デメリット

• JSで作られたHTML要素のため、好みのデザインに変えるためにタグを追加することができない（例）プログレスバーの後ろに背景色を指定したいが、タグが1階層少なくてカスタマイズできない
• デザインが古い

では実際に実装してみましょう！

CSSとJSをダウンロード

【公式】PACEのサイトに入って、『Themes』の各項目に『DOWNLOAD』と書かれているところをクリツクすると、

ローディングアニメーションに必要なCSSファイルがローカルにダウンロードできます。

好みのアニメーションを見つけたらダウンロードしてみましょう

続いてpace.jsをダウンロードしましょう。

Star on GitHub ＞ <>Code ＞ Download ZIPをクリック。

pace-masterフォルダ内のpace.min.jsを使います！

Pace.jsのダウンロードhttps://codebyzach.github.io/pace/docs/

これらをコーディング用のファイルに移しておきましょう。

CSSとJSを読み込む

以下の内容をHTMLに記述しましょう！

<!-- headタグ内にCSSを読み込む（今回はLoading Barを採用） -->
<link rel="stylesheet" href="css/loading-bar.css">

<!-- bodyタグの前にJSを読み込む -->
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/pace.min.js"></script>

完成

たったこれだけでローディングアニメーションが作成できます！

作りたいアニメーションにカスタマイズできないのが悲しいですが…

HTMLのコードがJSによって自動生成されています。

bodyタグはもともと自分で書いていますが、.pace-doneはJSによって付与されています。

<body class="pace-done">

  <!-- pace.jsによって差し込まれた要素ここから -->
  <div class="pace pace-inactive">
    <div class="pace-progress" data-progress-text="100%" data-progress="99" style="transform: translate3d(100%, 0px, 0px);">
    <div class="pace-progress-inner"></div>
  </div>
  <div class="pace-activity"></div></div> 
  <!-- pace.jsによって差し込まれた要素ここまで -->
  
  
  <header class="header">
      <h1 class="logo">もっと秋</h1>
  </header>
  <main>
   <!----------------------
            省略 
   ----------------------->
  </main>
  <footer>

  </footer>
  <script src="js/jquery-3.7.1.min.js"></script>
  <script src="js/pace.min.js"></script>

</body>

ProgressBar.js

続いてProgressBar.jsを実装する方法をご紹介します！

HTML内にid=”container”を付与した要素を記述することで、それに反応してJSによってプログレスバーが組み込まれる仕組みになっています。

メリット

• スタイリッシュなデザインのローディングアニメーションを作ることができる
• すでにHTML / CSS / JSのコードが準備されている
• カスタマイズしやすい
• ローディングの進捗状況に合わせて変化を加えられる（例）100％になったら画像を変える

デメリット

• 特に感じなかった

【公式】ProgressBar.jshttps://kimmobrunfeldt.github.io/progressbar.js/

progressbar.jsをダウンロード

https://github.com/kimmobrunfeldt/progressbar.js/tree/master

<>Code（緑のボタン） ＞ Download ZIPをクリックしてダウンロードしましょう

HTML・CSS・JSを記述

『EXAMPLES』の各項目の左下にある鉛筆のアイコンを押すと、

カスタマイズに必要なHTML、CSS、JSのコードが全て用意されています！

なんと便利な(°_°)

HTML：プログレスバーを作りたい場所に要素を追加し、containerというタグを付与しましょう

 <section class="loading">
  <div class="loading-bg">
    <div class="loading-contents">
      <div class="loading-first is-show">
        <img class="loading-ill" src="images/satsumaimo.png"　alt="なにができるかな？">
      </div>
      <div class="loading-finish">
        <img class="loading-ill" src="images/yakiimo.png" alt="やきいもだっ💜">
      </div>
      
      <!-- 任意の場所に#containerを記述する-->
      <div id="container"></div>
      
      </div>
    </div>
  </div>
</section>

<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/progressbar.min.js"></script>
<script>
  var bar = new ProgressBar.Line(container, {
    strokeWidth: 20, //ローディングバーの太さ
    easing: 'easeInOut', //ローディングバーの動き
    duration: 2000, //アニメーションの速さ
    color: '#580e3e',//ローディングバーの色
    trailColor: '#fff', //背景の色
    trailWidth: 43, //ローディングバーの背景の太さ（CSSで#containerの高さと合わせる）
    svgStyle: {
        width: '100%',
        height: '100%',
        borderRadius: '22px'
    }, //#containerを100％として、ローディングバーと背景の幅・高さなどを指定
    text: {
        style: {
        fontSize: '40px', //文字の大きさを変更
        fontWeight: 'bold', //文字の太さを変更
        fontFamily: 'Zen Kaku Gothic New', //フォントを変更
        color: '#fff', //文字の色を変更
        position: 'absolute',
        left: '50%', //デフォルトでは右端。左右中央に移動させた。
        top: '60px',
        transform: 'translateX(-50%)',
        padding: 0,
        margin: 0,
        },
        autoStyleContainer: false //デフォルトの指定を無効にする
    },
    step: (state, bar) => {
      bar.setText(Math.round(bar.value() * 100) + ' %');
  
      if (Math.round(bar.value() * 100) === 100) {
        //プログレスバーが100％になったら画像を入れ替え
        $('.loading-first').removeClass('is-show');
        $('.loading-finish').addClass('is-show');
        
        setTimeout(() => {
            $('.loading').fadeOut();
        }, 2000); //100％になって、2秒経ったらローディング画面を消す
      } 
    }
  });
  
  bar.animate(1.0);  
 </script>

JSではstyle:{ }の中にCSSを入れることで要素に指定を加えることができます。

『font-size』のようにハイフンが含まれるプロパティを記述する場合は、ハイフンを使わず『fontSize』のように本来ハイフンの後ろに続く単語の1文字目を大文字にします。

CSS：もともと用意されているコードを使えば綺麗に実装できます！

/* もともと用意されているCSS */
#container {
  margin: 20px;
  width: 400px;
  height: 8px;
  position: relative;
}

CSSのカスタマイズ例

/* 画像の入れ替え */
.loading .loading-first.is-show {
    display: block;
}

.loading .loading-first {
    display: none;
}

.loading .loading-finish {
    display: none;
}

.loading .loading-finish.is-show {
    display: block;
}

/* 画像とプログレスバーの間の余白 */
.loading .loading-ill {
    margin-bottom: 45px;
}

/* プログレスバーの指定（必須） */
.loading #container {
    width: 600px;
    height: 43px;
    border: 2px solid #580e3e;
    background: #fff;
    border-radius: 22px;
    padding: 5px;
    margin: 20px;
    position: relative;
}

完成

実際に出来上がったソースを確認してみると、以下の内容がHTMLに生成されてプログレスバーとして動いているのがわかりました。

さきほどJSで加えたCSSもstyle属性に反映されているのがわかります。

<div id="container">
  <svg viewBox="0 0 100 20" preserveAspectRatio="none" style="width: 100%; height: 100%; border-radius: 22px;">
    <path d="M 0,10 L 100,10" stroke="#fff" stroke-width="43" fill-opacity="0"></path>
    <path d="M 0,10 L 100,10" stroke="#580e3e" stroke-width="20" fill-opacity="0" style="stroke-dasharray: 100, 100; stroke-dashoffset: 0;"></path>
  </svg>
  <div class="progressbar-text" style="font-size: 40px; font-weight: bold; font-family: "Zen Kaku Gothic New"; color: rgb(255, 255, 255); position: absolute; left: 50%; top: 60px; transform: translateX(-50%); padding: 0px; margin: 0px;">100 %</div>
</div>

コードが準備されているのですぐに実装ができて、

カスタマイズにたくさん時間を使えるのが個人的にはとても嬉しいなと思いました

最後に

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

今回はプロフレスバーの作り方について考えてみました。

本格的にJSの勉強を始めてみて、JSへの苦手意識がなくなってきました。

1時間弱でも、日々取り組み続けると呪文みたいなコードも見慣れてくるものですね

これからも楽しく続けられる方法を探しながら勉強を続けていきます

次はGSAPやってみたいな〜

それではこの辺でっ！

JSきれい ～JavaScript整形ツール～

圧縮されたJSファイルをダウンロードしたのはいいけど、

ファイルの中に何が書かれているか分からず困ったことはありませんか??

JSきれい ～JavaScript整形ツール～にダウンロードしたコードをコピペすると、

綺麗にコードを整えてくれます！

たとえばこんなJSも

for(var key in samples){
	$("#samples").append($("<option>").text(key).val(key));
}

var samples={"":"","東京":"AKB","名古屋":"SKE","大阪":"NMB","博多":"HKT","\u65b0\u6f5f":"\x4e\x47\x54"};
var PRIME_NUMBERS=[
2,3,5,7,11,13,17,19,23,29,31,37,41,43,
47,53,59,61,67,71,73,79,83,89,97,101];

改行されて綺麗にみやすく

for (var key in samples) {
	$("#samples").append($("<option>").text(key).val(key));
}

var samples = {
	"": "",
	"東京": "AKB",
	"名古屋": "SKE",
	"大阪": "NMB",
	"博多": "HKT",
	"新潟": "NGT"
};
var PRIME_NUMBERS = [
	2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43,
	47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97, 101
];

下のような解読する気も起きないコードでも

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6(4 0 m 1){$("#1").8($("<9>").a(0).b(0))}4 1={"":"","東京":"c","名古屋":"d","大阪":"e","博多":"f","\\g\\h":"\\i\\j\\k"};4 l=[2,3,5,7,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I];',45,45,'key|samples|||var||for||append|option|val|html|AKB|SKE|NMB|HKT|u65b0|u6f5f|x4e|x47|x54|PRIME_NUMBERS|in|11|13|17|19|23|29|31|37|41|43|47|53|59|61|67|71|73|79|83|89|97|101'.split('|'),0,{}))

これだったら『ちょっと読んでみようか』という気になれますよね

eval(function(p, a, c, k, e, r) {
	e = function(c) {
		return (c < a ? '' : e(parseInt(c / a))) + ((c = c % a) > 35 ? String.fromCharCode(
			c + 29) : c.toString(36))
	};
	if (!''.replace(/^/, String)) {
		while (c--) r[e(c)] = k[c] || e(c);
		k = [function(e) {
			return r[e]
		}];
		e = function() {
			return '\\w+'
		};
		c = 1
	};
	while (c--)
		if (k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
	return p
}(
	'6(4 0 m 1){$("#1").8($("<9>").a(0).b(0))}4 1={"":"","東京":"c","名古屋":"d","大阪":"e","博多":"f","\\g\\h":"\\i\\j\\k"};4 l=[2,3,5,7,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I];',
	45, 45,
	'key|samples|||var||for||append|option|val|html|AKB|SKE|NMB|HKT|u65b0|u6f5f|x4e|x47|x54|PRIME_NUMBERS|in|11|13|17|19|23|29|31|37|41|43|47|53|59|61|67|71|73|79|83|89|97|101'
	.split('|'), 0, {}))

簡単に使えて一瞬で整形してくれるのでぜひ使ってみてください

ちなみにVS Codeでは【⇧+⌥+F（Shift+Alt+F）】を押すと自動整形してくれます。

思ったように整形されないこともありますが。。。

HTML5 入れ子チートシート

HTML5にはマークアップのルールがあります。

最近コーディングの勉強を始めた方にとっては複雑で覚えにくいものかもしれません。

私自身、『職業訓練校で特に何も言われなかったし大丈夫』と思っていましたが、

社長から『この書き方はHTML5の入れ子ルールでは許容されていない』と指摘していただいたことがあります。

ルールを守っていなくても外側が綺麗に表示されていれば問題ないと感じてしまいがちですが、

長く使われるWebサイトにしていくためにも、ルールを守って綺麗なコーディングを心がけています。

HTML5 入れ子チートシートの使い方をご紹介します！

タグ名にカーソルを合わせると『親』『子』という2つのボタンが出現します。

例えば、divの子要素に何が使えるんだろう？と思ったら『子』をクリックすると

divの子要素で使える要素が黄色になります。

逆にdivの親要素は何が使えるんだろうと思ったら『親』をクリックしてみてください！

親要素で使えるタグが水色に変化します！

これでタグの使い方に迷うことなくコーディングできます

ちなみにこちらのサイトを作られた吉川雅彦さんは吉川ウェブというブログを運営されています。

コーディングのTipsを多数投稿されているので興味のある方は一度ご覧ください！

最後に

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

日々業務を進めながら、

少しでも早く正確なコーディングをするためにいろんなツールサイトを調べています。

『これも便利だよ！』というサイトがあればぜひ教えてください

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

次のブログでお会いしましょ~！！

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サイト・本・動画をご紹介していくつもりなので、

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

今日はここまで！

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