WEBデザイナー志望です！ JavaSciriptはWEBデザイナーなら必須、と聞いたのですが、JavaScriptってなんですか？
仰るとおり、JavaScriptは、WEBデザイナーとして仕事をしていきたいなら今は必須スキルです。
ランディングページやバナーしか作らないWEBデザイナーならJavaScriptはほぼ必要ないかもしれませんが、それだとライバルもすごく多いし、大きく稼ぐことはできません。
この記事では、初心者の方向けに、JavaScriptとは何か？ JavaScriptでできることや特徴、おすすめポイント、JavaScriptの学び方などを解説します。
WEBクリエイター歴15年、パラレルワーカーのYAKOが解説します！
当サイトで人気のプログラミングスクール
- TechAcademy
（オンラインで好きな時間に学べる）
- DMM WEBキャンプ
（3ヵ月でRubyエンジニアに）
- CodeCamp
（オンラインなのにマンツーマン指導。300社以上の大手IT企業が社員研修に導入する質実ともに評判が高い）
JavaScriptとは？
JavaScriptはWEB用のプログラミング言語です。Chrome、Firefox、Safari、Internet Exploler、Edge、Operaなど、ほとんどのWEBブラウザでサポートされている「サーバーサイド言語」です。
スマートフォン用のほとんどのモバイルブラウザもJavaScriptをサポートしています。
どんなときに使うの？
主にWEBページを強化して、よりユーザーフレンドリーなエクスペリエンスを提供するために使います。
ユーザーフレンドリーとは、ユーザーが直感的に触りたくなるとか、混乱せずに誘導するとか、「使う人に優しい」ということですね。
そう言えば、ボタンがどこにあるかわからないとか、どこから資料請求したらわからない！ってサイトもたまに見かけます！
そうですね。JavaScriptは、ボタンをユーザーが押しやすいように動きをつけてみたり、光らせたり、長いページを下まで読んだらページトップに戻す矢印ボタンで誘導してあげたり、ユーザーが使いやすいギミックを組み込むためのものなんですよ。
ユーザーエクスペリエンスってなんですか？
ユーザーエクスペリエンスとは、紙媒体と違ってWEBはユーザーが「参加する」ようなものですよね。だから、ユーザーがサイトに訪れて、クリックしてみたい、開いてみたい、そう思わせる仕様にするのを「ユーザーエクスペリエンスを高める」っていう風に使うんですよ。
ユーザーフレンドリー、ユーザーエクスペリエンスを高める、つまりUI/UXを意識したWEBサイトを作るとき、動的に更新されるWEBページ、メニューやダイアログボックスなどのユーザーインターフェイスの機能強化、アニメーション、2Dや3Dグラフィック、インタラクティブマップ、ビデオプレイヤーなどを含める、ということです。
WEBブラウザでJavaScriptを使うとき、「クライアントサイドのJavaScript」と呼びます。
WEBページ上でのJavaScriptの役割
- 動的にWEBページを更新する
- メニューやダイアログボックスなど、ユーザーインターフェイスの機能を強化する
- アニメーションを組み込む
- 2D、3Dグラフィック、インタラクティブマップ、ビデオプレイヤーなどを組み込む
などなど。
WEBページの三本柱
WEBページを構成するコンポーネントは、HTML、CSS、JavaScriptの3つ。これらがWEBページの三本柱となります。
HTMLはテキストやグラフィックなどを含むページを記述し、CSSは色やフォントなどを含むWEBページの外観を制御、カスタマイズするために使用されます。
JavaScriptは、WEBページに動的なコンポーネントを追加する目的で主に使われます。
JavaScriptの誕生と歴史
JavaScriptはNetscape（ブラウザ）の製造元であるNetscape Communicationsにより、1995年に開発されました。
彼らは、サイトに訪れたユーザーを取り逃さないためには、惹きつけておくための「グルー（糊）ランゲージ」により、ユーザーエキスペリエンスを高められると気がつきました。
つまり、もともとJavaScriptは、WEBサイトの魅力を高めるためのギミックを仕掛け、コンバージョンを上げたりサイト滞在時間を伸ばすために開発された言語なのです。
当時、WEBサイトを作るのに一番使われていた最新のプログラミング言語はJavaだったため、構文をJavaに近づけて親和性を高める作り方をしたたため、Schemeの機能やSmallTalkのオブジェクト思考、Javaの構文がJavaScriptに含まれることになりました。
JavaScriptの最初のバージョンは1995年5月にMocha（モカ）と名付けられ、同年9月にLiveScript（ライブスクリプト）に改名、さらに同年12月に、ついにJavaScriptに改名されました。
1996年に、JavaScriptを標準仕様として完成するために、ECMA Internationalに提出、翌年6月にJavaScriptの最初の公式仕様がECMA-262としてリリースされました。
JavaScirptの最新バージョンはECMAScript2018です。令和元年、ECMAScript2019がリリースされる予定。（2019年6月現在）
JavaScriptでできること
JavaScriptはWEBブラウザに組み込まれている本格的なインタプリタ言語です。
インタプリタ言語ってなに？
インタプリタ言語とは、簡単にいうと「人間が理解する言語から、コンピュータが理解する言語に翻訳するための言語」ということです。
Javaで許可されていることなら、JavaScriptでも基本的にはなんでもできます。
- 変数を宣言する
- 値を保存＆取得する
- 関数を定義して呼び出す
- クラスを定義する
- 外部モジュールを読み込んで動かす
- ユーザーや他のイベントに応答するイベントハンドラを書き出す
他にも色々できます。
WEBブラウザはWEBページをロードし、HTMLを解析し、そのコンテンツからDOM(Document Object Model)を作成します。
DOMはWEBページのライブビューをJavaScriptコードに認識させ、そのコードはDOMを更新して瞬時にユーザーに提示することができます。
ブラウザ側では、マウスの動き、ボタンのクリックなどのUIイベントで通知を受けるコードを登録することもできます。
これらの機能を駆使して、意図したアプリケーションを作ることができます。
JavaScriptが動くしくみ
WEBブラウザがWEBページをロードすると、HTMLパーサーはHTMLコードの解析とDOMの作成を開始します。
パーサーがCSSまたはJavaScriptディレクティブ（インラインはまたは外部からロードされたもの）を検出すると、必要に応じてCSSパーサー、またはJavaScriptエンジンに渡されます。
JavaScriptエンジンは外部のJavaScriptファイルとインラインコードどちらもロードしますが、コードをすぐには実行しません。
HTMLとCSSの解析が完了するのを待ってから実行されます。HTMLとCSSの解析が終わると、JavaScriptはWEBページで書かれた順番で実行されます。
変数と関数が定義され、関数呼び出しが実行され、イベントハンドラがトリガーされます。ブラウザによっては即座にレンダリングされます。
JavaScriptの読み込み方
WEBページにJavaScriptをロードする方法は二つあり、HTMLファイルに直接書き込む方法と、別にjsファイルを外部に作って呼び込む方法があります。
ファイルの読み込みをシンプルにしてロボットに早く読み込ませるためには、後者の「外部ファイルを読み込む」のがいいので、外部読み込みが主流の作り方です。
外部のJavaScirptファイルをWEBページにロードする方法
JavaScriptファイルの拡張子は「.js」です。
JavaScriptファイルはhtmlと同階層にするのではなく、「js」と名付けたファイルに格納すると、後々管理が楽です。
たとえば、「creators.js」という名前のJavaScriptファイルを作り「js」ファイルに保存したとしたら、こういう風に書きます。
<script type="text/javascript" src="js/creators.js"></script>
外部ドメインから流用する場合は、完全なURL、絶対パスで書きます。
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
HTMLに直接埋め込むときはこう。
<script type="text/javascript">
alert("ページがロードされました");
</script>実際には、もっと長いコードになるので、HTMLが汚くなるのが嫌で私はHTMLに直接埋め込むことはほとんどしません。
この他にも、JavaScriptコードを動的にオンデマンドでロードする方法があります。ですがこれは上級者向けのやり方なのでここでは省略します。
JavaScriptを学ぶメリット
メリットというか、WEBサービスやアプリを作りたいならJavaScriptはマストですね。
WEBデザイナーがJavaScriptを深掘りして学ぶメリットは、仕事の幅が圧倒的に広がるためです。
JavaScriptをしっかり勉強して極めていけば、
- UI/UXデザイナーとしてキャリアアップする
- フロントエンドエンジニアとしてキャリアアップする
- もしくは両方を仕事の車輪として、フリーランスとして色々な案件をゲットする
ということが可能になります。
WEBデザイナーならしっかりJavaScriptをマスターしよう！ そのあとでRubyやPHPまで手が広げられれば最強！
効率の良いJavaScriptの勉強方法｜スクールに通うのがベター
JavaScriptは独学でもできるかもしれませんが、Javaと似ているのでちょっと難しいと感じることもあるかもしれません。
Progateとか入門者向け書籍とかで勉強してみて、無理そうだったらスクールで効率的に勉強しちゃうほうが時間とお金を無駄にしません。時も金なり。習得して早く仕事をゲットしたほうが、よっぽどマネタイズできますから。
おすすめの入門者向け書籍はこちらに詳しく説明しています↓
JavaScriptが学べるおすすめスクール ★無料あり！
JavaScirpt単体で教えてくれるスクールというのは、残念ながらほとんどありません。まぁ、当然といえば当然なのですが、基本的にJavaScriptはHTMLとCSSと3点セットで学んで始めて意味があるものなので。
なので、JavaScirptを学びたければ、HTMLやCSSを学んでWEBデザインやサイトが作れるようになるコースやスクールを選ぶといいでしょう。
TechAcademy
エンジニア デザイナー
学習形式オンライン・福岡のみ通学教室あり（福岡天神校）
- コースの種類が非常に豊富。ほぼ学びたいものが見つけられる
- ディレクター、マーケティング、UI/UXなど他のスクールにはないコースがある
- 受講料がリーズナブル
- マンツーマンによるマンツーマンによるメンタリングサポート
- 回数無制限の課題レビュー
- スクールコンテストがあり、モチベーションアップできる
| 受講料金 | 89,800円/1ヵ月～ （コースによって異なる） |
|---|---|
| コース` | 全30コース |
| 受講期間 | 1ヶ月・2ヶ月・3ヶ月・4ヶ月 |
| 対応時間 | 15:00～23:00 |
| 卒業後サポート | ≫ 転職サポートあり |
| 無料体験 | ≫ 無料体験あり |
| 分割払い | クレジットカード決済可能 |
| 備考 | Photoshop, Illustratorなどソフトは自前で用意。たのまなAdobeストア でお得に購入可。 |
テックアカデミーはオンライン完結型のプログラミングスクールです。全国どこに住んでいても受講可能ですし、PCとWifi環境さえあれば自宅に限らず、カフェや旅先でも勉強ができます。
週2回のWebカメラによるメンターとのマンツーマン指導や、すぐに回答がつくオンラインチャットなど、挫折せずに完走できるシステムが人気です。
テックアカデミーには30種類ほどコースがありますが、JavaScriptを学びたいなら「フロントエンドコース」がおすすめです。
Code Village（コードヴィレッジ）
フロントエンドエンジニア WEBデザイン
学習形式通学（授業形式）・オンライン
- 珍しい授業形式で丁寧な指導
- フロントエンドエンジニア志望の人におすすめ
- オンラインコースもSkype対面による授業形式で、通学型と同等の指導が受けられる
- 受講料金が他校よりもリーズナブル
- いつでもチャットで質問可能。24時間以内に確実に回答が付く
- 受講期間終了後2週間まで質問が可能
- 1クラス10名以下の少人数精鋭制。「離脱者ゼロ」の徹底指導
| 運営会社 | 株式会社Permil |
|---|---|
| 対象 | プログラミング未経験者 WEBデザイナーのJavaScript強化 |
| 受講形式 | 少人数クラスの授業形式 または 対面オンライン |
| 受講期間 | ５カ月 |
| 想定学習時間 | 毎日2時間 |
| 身につくプログラミングスキル | HTML5, CSS3, JavaScript Sass, React, Node.js, Express.js mongoDB |
| 支払い方法 | 現金振込・クレジットカード決済 |
| 料金（税抜） | 通学生集団コース 350,000円（税抜き） オンライン個別コース 400,000円（税抜き） |
| 分割払い | クレジットカード会社の分割払いで月額15,000円～可。 |
少人数クラス制で、業界的に珍しい「講師によるレクチャー」を取り入れているプログラミングスクールです。
プログラミングで躓きやすいポイントやその日にマスターする内容や目的を最初にレクチャーした後、受講生各自がオンラインテキストをベースに自己学習をしていきます。
オンラインコースもあり、こちらはスカイプによるマンツーマンレクチャーとなります。オンラインコースにありがちな「手薄」な感じではないので、地方在住の方も安心して受けられます。
.Pro（ドットプロ）フロントエンドコース
エンジニア デザイナー
通学場所 東京都渋谷区渋谷2-12-13 八千代ビル8階 TOMO PARTNERS内
学習形式通学
- フロントエンドエンジニアにもなれる
- 他の通学型スクールと比較してもカリキュラム内容は上なのに料金は最安
| 受講料金 | WebExpert（4ヵ月）／398,000円 WebExpert（6ヵ月）／498,000円 |
|---|---|
| 対応時間 | [平日]10時～21時 [土日祝]10時～19時 |
| 転職サポート | あり ※独立支援サポートもあり |
| 分割払い | 可能。クレジット対応可能 |
| コース名 | WebExpertコース |
| 身につくスキル |
|
その名のとおり、「フロントエンドコース」というだけあって、JavaScript、HTML、CSSを自由自在に扱えるレベルにまで引き上げてくれるおすすめのコース。
JavaScript以外に、PhotoshopやIllustratorなどの授業もあるので、総合的に学べます。
「WEBデザイナーを目指しているけど、コーディングに強いデザイナーになりたい」という人におすすめです。
WEBクリエイターからの視点で、「このスクールはおすすめ！」というWEBデザイナー向けスクールを比較した記事を書いていますので、興味のある方は併せてご参考にしてください。
ご参考にしてください。