Webデザイナーの前に時々立ちはだかるプログラムの壁　～jQuery編～

2018年9月6日

突然ですが、皆様はご自身の立ち位置を把握しておられますか？

入社して此の方、私の立ち位置はいまだに不明瞭のままではありますが、とりあえずサイト作成やDTPデータの作成は私がやる事になっているんだなと思っています。インドア派商人です。

「相変わらずタイトルと剥離している冒頭だな」とお思いの方もおらっしゃると思いますが、そんな事はありません。

Webデザイナーにとって必須のスキルは何でしょう？デザイン力とHTML・CSSコーディング…他はIllustrator・Photoshop等の画像編集ソフトの操作スキル…でしょうか。

一昔前はそれでよかったんです、でも今は違います。IT系の求人サイトのWebデザイナー募集条件を見ると、必須のスキル：javascript が呪いの様について回っています。

前々から思っていましたが、自由度が上がって色んなWebサイトの実装が可能になってからと言うもの、Webデザイナーの立ち位置と言うかあり方の基準と難易度が大幅に上がってきたように思います。

…ですが、世の生きづらさを嘆いていても何も解決しないので、とりあえず立ちはだかる壁を乗り越えて行く事にしましょう…

Webデザイナーにjavascriptのスキルを求められる理由

HTML・CSSだけでは不可能な動くコンテンツを作成するため…だったと思うのですけど、昨今ではjavascriptを取り巻く状況が変わって参りました。

javascriptと言えばブラウザ上で動作するプログラム…と言う認識が一般的でしたが、今は違います。

サーバー側でも動作するようになってしまったのです。
（※ここでは割愛します。詳しくは node.js で調べてください…）

そんな万能選手として復活してきたjavascript…将来有望です。習得しておいて損はないです。

ですが、プログラム初心者がいきなり別の目的のついでにやっとこう感覚で挑戦しても早々に挫折するのは目に見えています。ですので、比較的ライトなjavascriptのフレームワーク「jQuery」を使ってプログラムの作り方・考え方に慣れてからの方がいいと思います。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<a href="#">クリックしてください</a>
<div>ここのコメントが変わります</div>

<script>
   $("a").click(function(){
       $("div").text("クリックされました");
   });
</script>

※2のHTMLの後ろに記述しましょう。（でないと動きません）

ちなみに上記のコードは【テキストリンクをクリックすると下のテキストの内容が変わる】という処理です。↓デモはこちらになります。

クリックしてください

いかがでしょうか。

今回のサンプルはすごくシンプルなものですが、jQueryを使うと、javascriptで一から書くよりも簡単に動的なコンテンツを実装できる事が確認できたと思います。

jQueryを使いこなせると、クオリティの高いWebサイトの演出も容易に実装できるようになりますので、これを機に是非挑戦していただければと思います。

それではこの辺で！

author: インドア派商人