【初心者向け】WebデザインとJavaScriptの必要性を現役Webデザイナーが解説！

このようなお悩みを解決します！

JavaScriptとは?

JavaScriptとは、Webブラウザ上で機能するプログラミング言語の1種です。

2005年にGoogleがページを更新することなく動きを表現できる技術＝非同期通信技術としてGoogle Mapに導入したことをきっかけに注目が集まりました。その後2006年にjQueryが登場したことで、その利便性が幅広く認識されるようになりました。

HTMLやCSSがページの構造や装飾を担当するのに対して、JavaScriptは、何らかの「処理」を行います。全ての処理がJavaScriptだけで完結するわけではないのですが、ほぼ全てのWeb機能にJavaScriptが使われておりWeb技術に必要不可欠なものです！

JavaScriptの将来性

出典：Github

GitHut2.0によると、JavaScriptは世界で最も人気の高いプログラミング言語となっています。

というのも、バックエンドの言語と違い、JavaScriptはどのWeb開発企業でも使用している言語であり、フロントエンドエンジニアであれば、避けられない言語だからです。この傾向は、ここ数年変化する可能性は低いでしょう。

参考：WebデザイナーはPHPは必須なの？PHPが必要な理由/メリット・デメリットを説く！

JavaScriptでできること

基本的にWebサービスには必ずと言っていいほど「JavaScript」の技術が使用されています。

• スライダー機能・・・画像のスライド機能などが代表的
• ポップアップ機能・・・「登録が完了しました」などの表示機能
• タブ機能・・・Yahoo Japanが典型。同じページで情報が切り替わる機能
• バリデーション機能・・・パスワード(あるいは、カード番号)が違った時注意を促す機能
• WebAPI・・・他のサービスの機能を呼び込む機能です。Facebookの認証機能は代表的

Webデザインを行う上でスライダーやポップアップ、タブなどこちらに記載している機能はよく利用するためJavaScriptの技術は学ぶべきと言えます。

Webデザイナーとフロントエンドエンジニア

「Webデザイナー」は、デザイン技術とWeb技術の担い手を指しますが、これらは本来別物であり、Web技術の中でデザイン技術を利用しようとしています。デザイン寄りの人材を「Webデザイナー」と呼び、Web技術寄りの人材を「フロントエンドエンジニア」と大まかに括っています。

一般に、どちらの領域についても高いレベルにある人材は稀です。付加価値の高い人材になろうとすれば遅かれ早かれ専門を選択せざるを得ません。

キャリア形成を考えると、「フロントエンドエンジニア」として、モダンなWeb技術を学ぶ方が付加価値の高い人材になれるのですがその場合、JavaScriptは中心的な技術になります。

エンジニア求人専門サイトであるレバテックキャリアのフロントエンド人材の求人でJavaScript技術を求めない企業の方が稀です。

つまり、HTMLやCSSはできて当たり前で、ポートフォリオ作成でもJavaScriptのフレームワーク(あるいはライブラリ)を使用することは今後は当然視されるでしょう。

JavaScriptフレームワークの学習

よくJavaScriptを学習する際に「フレームワーク」や「ライブラリ」という言葉を目にします。これはJavaScriptを簡易的にかけるようにしたパッケージと理解してください。

JavaScriptを学習する上で、JavaScriptそのもの（バニラJavaScriptと呼ばれます）だけでなく、このフレームワーク（あるいはライブラリ）の学習が必須となります。

世界的にも使用されるWebフレームワーク(JavaScriptに焦点を絞る)は、以下です。（出典：Developer Survey Results 2020）これ以外にもJsフレームワーク(ライブラリ)は多数あります。

👑フレームワーク(ライブラリ)ランキング

👑1位	jQuery
2位	React.js
3位	Angular.js
4位	Express
5位	Vue.js

今からjQueryを学習するべきなのか？

jQueryは、2000年代後半から2010年代前半を引っ張ってきたJsライブラリです。

ランキングからも非常に幅広く使用されていますが、これからJavaScriptを学習する人がjQueryを学習するべきかの議論では「No」という人も多いでしょう。

jQueryは既にレガシー技術となりつつあるため、モダンなWeb技術を採用する企業の求人でjQueryを条件とする企業はほぼいないことが事実。

とはいえ、これまで強い影響力を誇ったJsライブラリですので、既存のWeb技術に採用されており、保守を考えると、依然その技術は求められます。しかし、将来性を考えると、間違いなく採用する企業は減りますし、学んでも人材価値は高くはありません。

人気の高いJsフレームワーク

現在日本で人気の高いJsフレームワーク(厳密にReactはライブラリ)は以下です。

今は、これらのフレームワークが人気なんです。転職エージェントのレバテックキャリアでの求人数もかなり多くなってきていますよ！

JavaScriptの学習のステップと注意点

1.Vanilla JavaScriptと原理、原則の学習

実際、開発の現場で素のJavaScriptが使われることはほとんどありません。しかし、学習を始めるにあたり、フレームワークの学習から始めるのも得策ではありません。なぜなら、フレームワークも素のJavaScriptの考え方を元にしているため、学ぶ意義が高いためです。

本格的に学ぶ前にこちらのYoutubeは大変参考になります。

（出典：モダンJavaScript シリーズ）

また、コア技術の網羅的な説明が少ない中、Udemyの「【JS】初級者から中級者になるためのJavaScriptメカニズム」は各Jsスキルを体系的に網羅し、解説しています。

この動画は、なぜ、そして、どこで使うのかの説明が弱いですが、原理、原則の説明を体系的に学ぶのに適しています。ただ、これらで全部を理解する必要はありません。

参考：Udemyのセールはいつ？セールの種類や特徴、最安値で購入する方法をまとめ

2. Vanilla JavaScriptで作品を作る

次に、実際に、素のJavaScriptで何か作りましょう。

英語ですが、Udemyの「20 Web Projects With Vanilla JavaScript」は参考になります。他にも動画はありますので書籍で学習する前に活用してください。

3. フレームワークを使ってみる

学習のハードルが低いのはVue.jsです。ただ、どれか一つに絞ってある程度学習することをお勧めします。

Vue.jsであれば、Udemyの「超Vue.js 2 完全パック – もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)」が参考になります。

React.jsであればUdemyの「React JS Crash Course」でイメージが掴めますよ！

他にも、 Webデザインスクールで学ぶことができます。しっかりと学びたい方はWebデザインスクールで学ぶと良いでしょう。

この記事のまとめ

JavaScriptを学習すると、HTMLやCSSの学習と全く違うことに気付くでしょうし、概念の理解が追いつかないことも数えきれません。

就職をゴールにする場合、学習時間も200時間-300時間、思い通り使えるようになるには1,000時間は超えることを覚悟してください。