WEBデザイナーがJavaScriptと少しだけ仲良くなるためにしたこと
エイチームライフスタイルアドベントカレンダー2018の18日目は、株式会社エイチームライフスタイルの k_hajime が担当します。
※弊社では最近Reactをメインで使用しておりますが、今回はデザイナの皆様にもわかりやすいようにjQueryを使って説明させていただきます。
私は今年でWEBデザイナー歴4年目になりますが、いまだ仲良くなれない言語がいます。
それは「JavaScriptさん」です。
最近はWEBデザイナーやコーダーの垣根もなくなり、フロントエンドとまとめられることも多く、デザインもするし、コーディングもするし、ロジックも作るしと、どんどん必要なスキルが増えてきています。
特にUXを考慮してアニメーションやギミックの実装が当たり前になり、WEBデザイナーといえどJavaScriptのスキルが必要とされるようになってきました。
「HTMLやCSSならサクサク書けるのに、JavaScriptとなる急に手が遅くなる」「一からは書けない」「コピペに頼ってしまう」と共感していただけるWEBデザイナーさんも多いのではないでしょうか。
私もこの悩みにぶつかり「なんとかJavaScriptのスキルを身につけないと！」と思い勉強するも、優先度が低く・続かず・身につかずで何年も時が過ぎ去っていきました。
デザイナーはJavaScriptへの苦手意識が強い？
何故こんなに苦手なのか？
だれか教えてください…
正直デザイナーがJavaScriptを扱うには、コピペで事足りてしまうんですよね。
でもコピペでは、微妙な調整が出来ず思い通りのロジックに出来なかったり、不要なロジックが混じり不具合を起こすリスクもあるので、しっかりとコードを理解して実装する必要があります。
まぁ、それも踏まえてJavaScriptを勉強し始めるデザイナーさんも多いと思うのですが、最初の段階で躓くことがたくさんあります。
例えば、入門者向けの教材によくあるヤツ↓
教材『ブラウザに「おはよう」と出力してみよう！』
// JavaScriptの場合
document.write("おはよう");
// HTMLの場合
おはよう
↓
// ブラウザさん
おはよう
おはよう
↓
// わたし
いやいや！？ ブラウザでみたら一緒やん！？
なんでそんな面倒なことするの！？ なぞ！それだけではありません。他にも↓
教材『console.logで出力してみよう！』
// console.logで出力してみよう！
console.log("おはよう");
↓
// ブラウザさん
「...」
↓
// わたし
何も表示されねぇぇぇ！！！ いつ使うんだこれ！！？？
極めつけはこれ↓
教材『変数を使って出力してみよう！』
// 変数を使って出力してみよう！
var hello = "おはよう";
document.write(hello);
↓
// ブラウザさん
おはよう
↓
// わたし
ファァーーー！！と...一から勉強し始めると、見栄えを作るデザイナーからしたらどんどんメリットが分からなくなり、活用方法が見当たらなくなっていきます。
本来の「目的」に振り返る
そもそもJavaScriptで何がしたいんだっけ？
教材読んで、1から100まで全部理解しないといけないんだっけ？
いやいや、そんなことは無い。
よく使うアニメーションやギミックを、一から書けるようになれれば十分なんです。重要なのはコードの意味を理解し読み書き出来るようになること。
動けばいいやではなく、しっかり理解してコードの品質を担保するのも実装者の責任ですからね。
なので別に一から勉強しなくても、よく扱いそうな範囲だけに絞って勉強を始めることを、まずはおすすめします。今回は特にデザイナーがよく使いそうなjQueryのメソッドと、if文についてご紹介したいと思います。
jQueryメソッドの使い方
デザイナーがJavaScriptを扱うシーンで多いのは、やはりアニメーションやギミックを実装する際ではないでしょうか。
私の場合は、jsイベント発生による要素の表示・非表示など簡単なものから書けるように勉強していきました。
jsイベントでよく使う構文はコレ↓
「●●が▲▲されたら■■する」とか「●●を▲▲したら■■する」など
例えば『#buttonがクリック（click）されたら#textを表示（show）する』というギミックを実装してみましょう。
// 無理やりｊｓっぽく書くとこんなかんじ
#buttonがクリックされたら魔法発動 {
#textを表示（特殊効果ナシ）
}
↓
// ちゃんと書くとこう
$("#button").click(function() {
$(“#text”).show();
});
分かりやすい！
日本語にすると超簡単ですね！
一応詳しく説明すると
・#buttonや#textは自分がHTML側で用意した要素
・.click()はjQueryのイベントメソッド
・.show()はjQueryのエフェクトを表現するメソッド
調べると、jQueryのメソッドはたくさんあります。
イベントメソッド
.click() ： クリックされたら〜
.change() ： 値が変更されたら〜
.scroll() ： スクロールされたら〜
など
その他のメソッド
.show() ： 要素を表示する
.hide() ： 要素を非表示にする
.fadeIn() ： 要素をフェードインで表示する
.fadeOut() ： 要素をフェードアウトで非表示にする
.toggle() ： 要素の表示・非表示を切り替える
などがあります。
ちなみにメソッドには引数を渡し、アニメーションを制御したりすることも出来ます。
例えば、以下のようにフェードインの速さを制御できます↓
// 要素をゆっくり表示する
$("#button").click(function() {
$(“#text”).fadeIn("slow");
});引数にも種類がたくさんあるので、いろいろ調べてみてください！
条件分岐（if文）の書き方
if文は動的な要素（時間や日付など）に対してアクションを出し分けできる。
構文はこんなかんじ↓
「●●がもし▲▲なら■■」とか「●●がもし▲▲なら■■、△△なら□□」
例えば、時間帯により表示する挨拶を変える条件文を実装してみましょう。
// 無理やりｊｓっぽく書くとこんなかんじ
もし、今 < 10:00なら {
おはよう
} もし、10:00 ≦ 今 かつ 今 < 18:00なら {
こんにちは
} それ以外は {
こんばんは
}
↓
// ちゃんと書くとこう
var now = new Date(); // 現在の日時を取得
var hour = now.getHours(); // 現在の時間をhourに代入
if (hour < 10) {
document.write(“おはよう”);
} else if (10 ≦ hour && hour < 18) {
document.write(“こんにちは”);
} else {
document.write(“こんばんは”);
}
という感じになります！
まとめ
簡単ですが今回はjQueryのメソッドを活用したギミックと、条件分岐の実装方法に絞ってご紹介しました。比較的簡単に実装でき、かつデザイナーがよく使うものをご紹介させていただきました。
課題感が少なく、使いみちの分からないものを無理に頭に入れても有効活用も出来ないと思います。無理して1から100まで勉強するのではなく、自分が扱う範囲から学んでしまうのが近道かなと思います。
また、今回はjQueryに絞ってご紹介しましたが、Reactやvue.jsなどライブラリにもいろいろありますので、ご興味があればぜひ調べてチャレンジしてみてください！
最後に
エイチームライフスタイルアドベントカレンダー2018の明日の投稿もお楽しみに！
エイチームグループでは、一緒に働けるチャレンジ精神旺盛な仲間を募集しています。興味を持たれた方はぜひエイチームグループ採用サイトを御覧ください。