Webデザイナーでも最低限覚えるべきJavaScpitと学習してみて思ったこと

カテゴリーから探す

年別から見る

2023/05/12

Webデザイナーでも最低限覚えるべきJavaScpitと学習してみて思ったこと

Webデザイナーでも最低限覚えるべきJavaScpitと学習してみて思ったこと
私は今までWebデザイナーとして開発に関わり、HTMLとCSSを扱ってきましたが、JavaScriptについてはほとんど関わらずにいました。しかし、近年デザイナーとして求められるスキルは静的なWebページのデザインだけに留まらず、UI、UXを意識したデザイン作成が求められます。

また、以前書いたブログでも触れましたが近年は画像生成AIが登場し、このまま発達すればデザイナーとエンジニアの境界はどんどん消えていくことでしょう。使い方によっては静的なWebページしか作れないデザイナーが必要なくなる可能性も現実味を帯びてきました。

そのため、より高度なWebデザインを可能にするためにも、Web開発者として生き抜くためにも、プログラミングのスキルは必須になります。
時代に取り残されないようするために、JavaScriptの学習を始めました。

環境構築と初歩の解説

最初に、環境構築について説明します。 JavaScriptを使うには、ブラウザさえあれば最低限の環境が整っています。
まず、テキストエディタで以下のようなHTMLを書きます。


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8"> <title>js-test</title> 
    </head> 

    <body>
        <!--ここにHTMLのコンテンツを書きます。--> 
    <script> // ここにJavaScriptのコードを書きます </script>
    </body> 
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

HTMLについては省略しますが、最低限のHTMLを書いてください。そして、このファイルの拡張子を「.html」にして、保存します。保存後このファイルをブラウザで開けば、書いたJavaScriptが動作します。

まずは、画面に「Test」と表示させるプログラムを作ってみます。以下のようにJavaScriptを書きます。


<script> document.write('Test'); </script>

1	<script> document.write('Test'); </script>

これで画面に「Test」と表示されます。


<script>     </script>

1	<script> </script>

のタグに囲まれた範囲内にJavaScriptを記述すればJavaScriptが動きますが、このタグを body 内に記載する場合は


<body>
<!-- ページの様々なコンテンツ -->
<script> JavaScriptの内容 </script>
</body>

<body>

</body>

のように、bodyタグを閉じる直前に書きます。

また、Web開発においてHTMLとCSS、JavaScriptはそれぞれ別々のファイルとして管理し、head内でリンクを指定するのが
主流と思います。指定する場合は以下のように書きます。


<script src="ファイルが格納されているパス"  defer></script>

1	<script src="ファイルが格納されているパス" defer></script>

概ねCSS と同じですが、HTMLの構築が終わってからJavaScriptが実行されないとエラーになるので「defer」と記載すること、


<script>

タグを書いたら必ず閉じタグが必要になるので


</script>

</script>

の閉じタグが必要になりますので記載が必要です。

タグで囲まれたテキストの記載。

JavaScriptでテキストを出力する場合には、


document.write()メソッド

1	document.write()メソッド

を使用します。しかし、これはタグに囲まれたテキストでなはないので、CSSでスタイリングすることが難しいです。なので、pタグに囲われたテキストを作成します。
手順としては以下のようになります。

タグを作成する。
テキストを指定する。
作成した
タグにテキストを入れる。
作成した
タグをHTMLに出力する。

この手順をJavaScriptのコードで表現する場合、以下のようになります。


// <p>タグを作成する 
var ptag = document.createElement('p');

// テキストを指定する
var text = document.createTextNode('test');

// 作成した<p>タグにテキストを入れる
ptag.appendChild(text);

// 作成した<p>タグをbody内に出力する
document.body.appendChild(ptag);

// <p>タグを作成する

var ptag = document.createElement('p');

// テキストを指定する

var text = document.createTextNode('test');

// 作成した<p>タグにテキストを入れる

ptag.appendChild(text);

// 作成した<p>タグをbody内に出力する

document.body.appendChild(ptag);

このコードでは、


document.createElement()メソッド

1	document.createElement()メソッド

を使用してpタグを作成し、


document.createTextNode()メソッド

1	document.createTextNode()メソッド

を使用してテキストを作成しています。
そして、


appendChild()メソッド

1	appendChild()メソッド

を使用して作成したpタグにテキストを入れ、同じくHTMLに出力しています。

JavaScriptは一つ一つ簡単な指示をコンピューターに出して実行する物なので、まずは工程を自分で言語化することが大切です。
プログラマーがやっていることはコンピューターが理解できる言語で指示文を作る事ですが、その指示文は単語カードを並べて作成するような物で、CSSと同様に頻繁に使われる単語はある程度限られてきます。

jQuey などライブラリーの使い方について

前述したpタグでテキストを出力したように、JavaScriptは一つ一つの動作を指示して、任意の動きをする仕掛けを作ります。このコードを書く手間は外部ライブラリーを使う事で簡略化できます。

外部ライブラリーは様々ありますが、有名な物としてはjQueyがあります。
実際に使うには

jQueryのサーバーにアクセスして使用する。
ダウンロードをして使う

という方法があります。

jQueryのサーバーにアクセスして使用する場合

サーバーにアクセスする場合は


<head>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
// ↑<head>タグ内にURLを記述する

</head>

<head>

// ↑<head>タグ内にURLを記述する

</head>

と記載します。

これでjQueryが使えますが、この方法はオンラインに接続できない場合は動きません。
オフライン上で動かすにはダウンロードをする必要があります。

ダウンロードをして使う場合

公式にサイトにアクセスしてダウンロードページに行くと
画像のような、画面いっぱいにコード文が記載されたページにたどり着くと思います。

このページで右クリックして「名前を付けて保存」を押し、拡張子を「.js」にして保存してください。
このファイルをホームページ内のディレクトリに格納し、


<head>
<script src="jquery-3.6.0.min.js"></script>
</head>

<head>

</head>

等のように記述すれば、同じくjQuery が使えます。

コードの記述について

実際にコードを書く際には


$(function(){
  $(".sample").css("color","green")
});

$(function(){

$(".sample").css("color","green")

});

等のように書きます。
まず、


$(function(){
    
});

$(function(){

});

が実際に記載したコードを実行させるキーワードです。そして、その直後の｛｝内が実際に実行される指示文です。


$(".sample")

1	$(".sample")

のように、処理を実行する対象を指定します。この指定する対象は、「タグ」、「タグにつけられたidやclass」、「指定したidの親要素や子要素」など多岐にわたります。

対象を指定したら次は


$(".sample").css("color","green")

1	$(".sample").css("color","green")

のように、どんな動きをするか指定し()内で具体的な詳細情報を書きます。この場合なら、css の color 指定を green に変える指示文になります。

ボタンをクリックしたらクラスをつける処理

実際に、「ボタンa」を押したら、「ボックスA」にclass onを追加するプログラムを作ってみます。

●HTML


<div class="btn-1">ボタンa</div>
<div class="box-a">ボックスA</div>

1 2	<div class="btn-1">ボタンa</div> <div class="box-a">ボックスA</div>

●JavaScript(jQueryを使用する場合)


$(function() {
  $('.btn-1').click(function(){ 
    $('.box-a').addClass('on'); });
  });

$(function() {

$('.btn-1').click(function(){

$('.box-a').addClass('on'); });

});

と記載します。

まず、


$('.btn-1')

1	$('.btn-1')

と指定し、それをクリックしたら、次のコードを動かすためのfunctionを記載します。

その中で「class on」を追加するプログラムを記載します。


$('.box-a')

1	$('.box-a')

と「box-a」を指定して、


.addClass('on');

1	.addClass('on');

でclass「 on 」を追加します。

このコードを実際に実行した場合、「ボタンa」をクリックすると


<div class="box-a">ボックスA</div>

1	<div class="box-a">ボックスA</div>

と記載されているHTMLが


<div class="box-a on">ボックスA</div>

1	<div class="box-a on">ボックスA</div>

と変化します。

これだけでは見た目の変化は特にありませんが、CSSで「.box-a」の装飾と「.box-a.on」の装飾を2パターン作成すれば、ボタンaを押すことでbox-aの見た目を変更するという仕掛けを作れます。CSSのキーフレームを使うことで変化する過程もアニメーションにして見せることができます。

また、「.addClass」を「.toggleClass」に変更すると、ボタンaを押すたびに「.on」が記述されたり、削除されたりするので、一つのボタンを押すだけで装飾を切り替えることができます。この性質を利用すればスマホサイトでよく見かけるメニューの表示、非表示を切り替える仕掛けも作成できます。

JavaScriptで制御することは単純なことでも、上手くCSSを割り当てることで比較的多くの動的な仕掛けを作成できます。
なお、同じ動きをするプログラムを外部ライブラリーを使わずに書くと以下のようになります。

●JavaScript(jQueryを使用しない場合)


document.querySelector('.btn-1').addEventListener('click', function(){
  document.querySelector('.box-a').classList.add('on'); 
});

document.querySelector('.btn-1').addEventListener('click', function(){

document.querySelector('.box-a').classList.add('on');

});

両者のコードをあえて日本語にする場合、

●jQueryを使用する場合

「ボタンa」がクリックされたら、以下の処理を行ってください。
「ボックスA」にclass onを追加してください。

●jQueryを使用しない場合

「ボタンa」に以下の処理があったら、次のプログラムを実行します。
以下の処理とはクリックです。
実行されるプログラムは「.box-a」にクラス「.on」を追加します。

という差があります。

プログラムは単語カードを並べて、指示文を作るようなものと先述しましたが、外部ライブラリーが有効な場合使用できる単語カードが加わったり、省略できる言い回しが可能になり、より直感的に開発が可能になります。

目的に応じて最適な外部ライブラリーを使用することでより開発しやすい環境を構築できます。

Anime.jsの解説

WebデザイナーとしてWeb開発する場合、やはり視覚的なイメージを作る機会が多いと思います。そこで、実際にアニメーションを実装するためのプログラムを書いてみます。今回は、外部ライブラリーのAnime.jsを使って、実際に画面内でアニメーションを作ってみたいと思います。

複数の円が弧を描くアニメーション

実際に複数の円が弧を描く動きを作ってみました。

まずは、jQueryと同様にAnime.jsの公式サイトにアクセスし、anime.min.jsを指定するか、ダウンロードして適用させてください。これでAnime.jsの外部ライブラリーを使用できます。

今回は、複数のdivをJavaScriptで出力し、CSSでdivを円形に変形させて、JavaScriptで動きをつける処理を行いました。具体的には以下のようにコードを書きました。

●CSS


body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

div.circle {
    position: absolute;
    width: 100px;
    height: 100px;
}

div.circle::before {
    content: "";
    display: block;
    position: absolute;
    left: calc(100% + 30px);
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 50%;
    background-color: rgb(118, 228, 191);
  }

body {

display: flex;

align-items: center;

justify-content: center;

min-height: 100vh;

position: relative;

overflow: hidden;

}

div.circle {

position: absolute;

width: 100px;

height: 100px;

}

div.circle::before {

content: "";

display: block;

position: absolute;

left: calc(100% + 30px);

width: 40px;

height: 40px;

display: block;

border-radius: 50%;

background-color: rgb(118, 228, 191);

}

htmlについてはhead とbodyの最低限事だけを記述し、CSSで100pxの正方形の

を中央に表示させ、複数ある場合は同じ位置に重なるようにしました。そしてそのdivの疑似要素を円系で表示させるように設定しました。

●JavaScript


for(var i=0; i<=5; i++) {
    var parts = document.createElement('div');
    parts.classList.add('circle');
    document.querySelector('body').appendChild(parts);
}

function animeCircles(){
    anime({
        targets: '.circle',
        rotate: '360deg', 
        duration: 1000,
        easing: 'linear',
        delay: anime.stagger(100),
        loop: true
    });

}

animeCircles();

for(var i=0; i<=5; i++) {

var parts = document.createElement('div');

parts.classList.add('circle');

document.querySelector('body').appendChild(parts);

}

function animeCircles(){

anime({

targets: '.circle',

rotate: '360deg',

duration: 1000,

easing: 'linear',

delay: anime.stagger(100),

loop: true

});

}

animeCircles();

最初のfor文は、同じ処理を繰り返すときに使用するプログラムです。
今回は複数の


<div lass="circle">

1	<div lass="circle">

を出力させるために使いました。
まず、iという変数を定義し、5回処理を繰り返すという設定で作りました。
具体的には、iが0から5まで1ずつ増える間、以下の処理を繰り返します。


var parts = document.createElement('div');

1	var parts = document.createElement('div');

これは、div要素を作成するためのコードです。


parts.classList.add('circle');

1	parts.classList.add('circle');

作成したdiv要素に、クラス名”circle”を追加する処理です。


document.querySelector('body').appendChild(parts);

1	document.querySelector('body').appendChild(parts);

これは、作成したdivをbody要素の子要素として追加する処理です。

このようにして、


<div class="circle">

1	<div class="circle">

が5つ表示されるようになります。その後、Anime.jsを使用して、回転させるアニメーションを作成します。

Anime.jsについて

Anime.jsは例えるなら、対象を指定してその対象に振付をし、指定した振付を実行しなさいという手順で指示文を作ります。

まずは、対象となる物を作ったので次に振付を作成します。具体的には、以下のように定義します。


function animeCircles(){
  anime({
    targets: '.circle', // 実際に動く物を指定する
    rotate: '360deg', // その場1周回転する指示
    duration: 1000, // 回転する速度を指定
    easing: 'linear', // 速度は常に一定になるように指定
    delay: anime.stagger(100), // 後ろの円の実行タイミングをずらす指示
    loop: true // 終了したら繰り返す
  });
}

function animeCircles(){

anime({

targets: '.circle', // 実際に動く物を指定する

rotate: '360deg', // その場1周回転する指示

duration: 1000, // 回転する速度を指定

easing: 'linear', // 速度は常に一定になるように指定

delay: anime.stagger(100), // 後ろの円の実行タイミングをずらす指示

loop: true // 終了したら繰り返す

});

}

そして、以下のように記述することで、作成した振付（アニメーション）が実行されます。


animeCircles();

1	animeCircles();

このプログラムは、


<div class="circle">

1	<div class="circle">

が回転するだけですが、疑似要素も一緒に回転するので、円が弧を描くように回転するアニメーションが実行されます。
今回はごく単純な物を作成しましたが、実際にはもっと多く、複雑な動きをつけることも可能です。

まとめ

JavaScriptは動作を制御する物で、HTMLやCSSと比較して文法や使用される単語が異なり、ハードルが高いです。しかし、各命令文を見ると、簡単な命令を重ねたものであり、冷静に見ると理解できます。HTMLとCSSを理解している場合、JavaScriptの動作はごく単純なものでも、CSSをうまく割り当てるだけで多くの仕掛けが作成できます。また、最低限の文法や活用方法を知っている場合、コピーして実装できるコンテンツも多数あります。

最初は他人が書いたものをコピーするだけでも、一つ一つ理解し、自分なりに考えて改変することで、より多くのことが理解できます。自分で学習をしてみて、必要な環境が実はハードルも低く、解説している記事も多いため、学習が容易であると感じました。今後も、デザイナーとしてできることの幅を広げるために学習を続けていきます。