WebデザイナーさんとJavaScript教材の付き合い方についてのポエム

公開日:2019-07-11
最終更新:2019-07-11

前提

  • 今までJavaScriptの教本やネット上の教材をやってみたが、どうもしっくりこなかったデザイナーさん
  • 仕事内容としては、クロスフェードやカルーセルくらいのアニメーションをjQueryでできれば回るレベル

という方と話をしながら、プログラマ・エンジニアの人間が「なんでしっくりこないのだろうか」と悩んだ末に思ったことを取り留めもなく書いてみたのが以下になります。

※あくまで個人の私見です。また、全員が全員当てはまるとは思っておらず、少なくとも自分が会話した方の周辺状況というごく限られた環境内でのお話です。

ポエム的な本文

デザイナーさんからすると、プログラミング教材は目的のベクトルが違うのではないか。

教材などでは、基本的にconsole.logによる出力で練習問題を解く形が見受けられる。また、ネット上の教材も基本的なところはconsole.logで出力確認をしているものも見られる(少なくとも、ちっぽけな自分の観測範囲ではこのパターンが多かった)。

これらの教材では、変数宣言や式・文の扱い、演算子、関数……と、確かにプログラミングをする上で必須となる知識について解説しており、それはそれで必要なことはよく分かっているつもり。

だが、デザイナーさんからしてみれば、「教材を最後までやったけど、これでどうやってWebページをアニメーションさせるのだろうか?」となってしまう。

もっと言えば、document.write等でHTML内のテキストを書き換えることもやっていなかったりする。

つまり、「JavaScriptを使ってHTMLを変化させる」という、デザイナーさんの目的については一向に触れずに終わってしまう。

クロスフェードやスライドショー、とは言わずまでも、「せめてページトップへ戻るのボタンを押してスクロールで戻るアニメーションくらいは……」と淡い希望を持っていたデザイナーさんは、「あれ?」と首を傾げて、結局その疑問はどこでも解決されない。

「世のフロントエンドエンジニアは今までやってきたこととその応用でHTMLを書き換えているのだろうか?」

「え、まったく何をどうしたらHTMLが書き換わるのか分からない……」

「ググっても良く分からない……記事によって書き方もぜんぜん違うし、教材でやってないことがたくさん書いてある……」

「自分には無理なんだ……」

みたいな、疑心暗鬼と自信喪失になっているのではないか、と感じた。

例えば、「Webアプリを作る」とか「ReactやVueを使ってかっこよく!」というレベルを求めるならば教材で取り扱っている内容は基礎中のキだし、そうでなくても知っておいた方が断然良い内容なのは間違いないと思う。

が、右も左も分からず「とりあえずJavaScriptやらなきゃ」という入り口に立っていたデザイナーさんは、勇気を出して足を踏み入れたら「いつまでも富士の樹海を彷徨っていて、上り坂に辿り着かない。肝心の富士山に一向に登っていないのでは……」と感じてしまうのではないか。

そしてやりたいことがいつまでも達成できず、「自分はできないんだ」と挫折する。

そうではない。

普通のWebサイトで、たかだかjQueryでちょっとスライドショーを作ったり、ページトップへ戻るスクロールアニメーションを付けたりするくらいで良いんだよ、と思っている。

それに対して、教材はプログラマやエンジニア、もっと言えばフロントエンドエンジニア向けが多い気がする。そうすろt、達成したい目的の方向性が違ってしまう。

そのギャップが、現在の状態に繋がっているのではないか。


ただ、個人的にはこの「そういうんじゃなくて、このくらいで良いんだけど……」という方にも若干の課題があるとも思っている。

それは、昨今のWebサイトはWebアプリとの境界が曖昧になっており、ReactやVueを使ったSPA的なサイトも散見されたり、もっと言えばWordPressはブロックエディタのカスタマイズでReactを使うのが(必須ではないが)前提に話が進んでいる。

そのため、最初は「jQueryチョットデキル」のレベルで良いかもしれないけど、今後を中期的に見ると、そこで立ち止まるのは良くないのではないか。

この話に限ったことではないけど、特に技術の移り変わりの激しい界隈だと思うので、学習を止めるのは宜しくないと感じる。

蛇足として、ブラウザのJSエンジンの実装差異が統一されてきているし、そろそろIEは本格的に滅んで良いと思っているので、jQueryに固執せずとも、ネイティブなJSでも戦えるのではなかろうか、とも思っている。

querySelectorを使えば#ID.classといったjQueryやcssでお馴染みの指定の仕方ができるし。

そうした昨今のもろもろの状況を汲むと、「とりあえずECMAScript2015以降の構文でquerySelectorを使ってHTML内のテキスト書き換え」辺りからサクッと触り始めると良いのではないか。

記事が少しでもいいなと思ったらクラップを送ってみよう!
1
+1
アルム=バンドのQrunch

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする