webデザインの勉強をしていく上で、HTMLやCSSと違い、ぐっとプログラミングの難しさが出てくるのがJavaScriptです。
慣れるまでは非常に難しく、とっつきにくく感じる言語なので、JavaScriptをきっちり書ける人とそうでない人には大きく差が出るとも言えます。
ただ、1度書けるようになってしまえば、動的コンテンツ(Webサイト上で動いたり、後から追加されたりするコンテンツ)を自由に扱えるようになるので
デザインの幅も一気に広がります。スクロールに合わせてメニューバーを固定したりなども行えます。
実際、JavaScriptはWebページに動きをつけるために使われていることが多いです。
ですが、できることが幅広いため「調べてもイマイチよくわからなかった」という方もいるのではないでしょうか？
そこで今回は、まずは「JavaScriptとは何なのか」、「JavaScriptでできることは何なのか」についてもお伝えしていきます。
CONTENTS
JavaScriptとは？
JavaScriptは、ユーザ側のWebブラウザとWebサイト、Webサービスの相互間のやり取りを円滑にするために使われています。
出典：TechAcademy
プログラミング言語に「Java」という少し似た言語がありますが、この「JavaScript」とは全く関係ないので、間違えないでくださいね。
JavaScriptはWebサイトだけでなく、アプリ開発にも用いられていて多くのプログラマーが利用しているプログラミング言語の１つになります。
JavaScriptの特徴とは？
ここからはJavaScriptの特徴についてお伝えします。
初心者でも勉強を始めやすい
JavaScriptは、「Google Chrome」などのブラウザとテキストエディタさえあれば実行することができます。
先ほどお伝えしたようにアプリだけでなく、Webサイトにも簡単に動きをつけられるということからWebデザイナーの方でも触れる機会が多い言語になります。
利用できる環境を選ばない
「クロスプラットフォーム」と呼ばれる様々な言語や動作する状態に変換するツールが多く存在しています。
クロスプラットフォームとは、異なるプラットフォーム（Windows、macOS、linuxなど）で同じ仕様のプログラムを動かせるプログラムのこと（Wikipediaより）
そのため、JavaScriptを使ってWebサイトを動きのあるものにしたり、スマホアプリを作ったり、ゲームを作ることなど様々なことが実現できます。
オブジェクト指向である
この考え方によってわかりやすいプログラムを組めるようになります。また、複数人で１つのシステムを開発することも容易になります。
このオブジェクト指向を簡単に説明すると、オブジェクトを１つのものとして考え、プログラムを組み立てていくような考え方になります。
これによって、機能の追加や機能の仕様変更も簡単にできるようになります。
JavaScriptでどんなことができるの？
動きのあるWebサイトを作れる
例えば、目立たせたいボタンにアニメーションを付けるなど、ユーザに強い印象を与えることが可能になります。
また、次にどんなことをすればよいのか明確になるので、サイトの利便性を高めることもできます。
ユーザの操作に応じて自由に処理を追加できる
JavaScriptでは、クリックされたという動作やマウスの動作を「イベント」として取得できます
このイベントとは、次のようなことが挙げられます。
- フォームが送信されるとき
- 画像が読み込まれるとき
- マウスを乗せたとき、クリックしたときなど
ユーザの操作に応じて自由に処理を追加できるため、様々な機能を追加することができます。
非同期通信が可能
リアルタイム通信を実現することができます。
通常は、サーバと通信する際にサーバからの応答を待ちます。サーバの応答を待っている状態として具体例を挙げると次のようなことが挙げられます。
例えば、ブラウザでURLを入力したとき、Webページが表示されるまでに少し時間がかかります。
非同期通信を使ったアプリならば、サーバの応答を待たずに次々に処理を行うことができます。
これによって、リアルタイムで画面を更新することができるようになっています。例えば、GoogleMapであれば、地図を動かすと動かした差分だけ画面が更新されています。
JavaScriptで作れるものとは？
ここまでJavaScriptの特徴やできることを紹介してきました。ですが、言葉だけでは「JavaScriptが何なのか」イメージしにくいと思います。
ここからは「実際にどのようなものが作れるのか」紹介していきます。
Webサイト
これが一番わかりやすいですし、作ろうと思えば今すぐにでも作り始められます。
例えば、以下のようなWebサイトに使われています。
Volkswogen
このページを開いてすぐに目につく画像の部分や下にスライドしていったときに表示されるリンクなどに使われています。
Ball Pool
http://mrdoob.com/projects/chromeexperiments/ball-pool/
クリックすると次々にボールが出現していきます。ボールをドラッグアンドドロップで動かすこともできます。
Secret Study
文字の部分にマウスをかざすと文字色が変化しています。
Webアプリ
Webアプリの開発では、Webページの部分の処理を行う「フロントエンド」とサーバでの処理を担当する「バックエンド」に分かれています。
どちらの部分でもJavaScriptを使うことができます。
フロントエンド
フロントエンドでは、Webアプリの使いやすさを向上させることを目的として機能を追加していきます。
例えば、以下のような機能に用いられています。
- フォームを送信するときの入力内容チェック
- メニューなどの画面の切り替え
バックエンド
バックエンドでは、サーバとの通信を実装する部分に用いられます。具体的には、「Node.js」や「Meteor.js」などが挙げられます。
これらは、リアルアイムにやり取りする際に必要となる「チャット機能」や「通知機能」の作成ができます。
ゲーム
ゲームを起動したときに画像表示やルールを決めることでゲームを作ることもできます。
ゲームの種類は、クイズゲームやシューティングゲーム、RPGなどカテゴリを問わず、様々なオリジナルのゲームを作ることができます。
このように、JavaScriptはできることが幅広いです。またWebサイトではJavaScriptを使うことが当たり前になりつつあります。
なので、Webデザイナーやフロントエンドエンジニアの方にはぜひ使えるようになってもらいたいものになります。
初心者の方向けのJavaScriptの勉強方法のステップ
それでは続いて、JavaScriptの実際の勉強方法についてお伝えしていきます。
基本的に初心者の方の場合は挫折してしまうことが多いかと思いますので、大手オンラインプログラミングスクールのTechAcademyなどの利用がおすすめです。
公式サイト（TechAcademy）：https://techacademy.jp/frontend-bootcamp
もしくは、上場企業が運営しており、オンラインでマンツーマンレッスンの無料体験が受講できるプログラミングのオンラインスクールのCodeCamp
を利用するのも良いでしょう。
ですが、すでに他のプログラミング言語を学んだことがある経験者の方には、下記のような独学のステップで学ぶ方法も良いかと思います。
具体的には、
- 意味不明でもJavaScriptを写経する
- 基本的な文法の存在を知る
- アルゴリズムを考える訓練をする
- 1つ実際に何か作ってみる
- ライブラリを使ってみる
というのがおすすめです。
「5」のライブラリは、実際には順序が前後しているデザイナーさんもいたのですが、「ライブラリだけ使えるようになってもダメ」という意見が多いのでこの順番にしています。
1. 意味不明でもJavaScriptを写経する
まずは、参考書やプログラミングのスクール、ネットの情報を利用して意味がわからなくてもとりあえず書き写すということを行いましょう。
「書く時間が勿体無い」と言う人もいますが、実際には本を読むスピードで構造が理解できるほどJavaScriptは甘くないです。
実際に一行一行書いていくことで、全てのコードを1度は目にすることになるので自然と頭の片隅に残るようになります。
これから本格的にJavaScriptを書いていくにあたって、この頭の片隅にでも残っている知識が非常に重要になります。
あとで説明しますが、JavaScriptのようなプログラミング言語においては、細かいスペルや文法などは、調べてしまえばすぐに確認できるので重要ではありません。
実際には、その仕組みが実現できるイメージだったり発想だったりが重要になります。この時、ここで蓄積している知識がイメージを湧かすのに役に立ってくれるのです。
2. Javascriptに関する基本的な文法の存在を知る
一通り書き写してみたあとは、基本的な文法を一度知識として頭にいれましょう。
具体的には「条件分岐」「繰り返し」などの知識です。これも細かく書き方まで覚えるのではなく、「こういうことができるんだな」という部分を理解するのが大事です。
筆者が一番はじめから知っておいたほうが良いなというものを並べておくと
- 四則演算
- 条件分岐
- 繰り返し
- 要素の取得
- DOM操作
辺りでしょうか。最後のDOM操作は幅が広く、細かくすると長くなってしまうので省略しています。
この辺りの書き方をなんとなくでも覚えていると、修得が遥かに速くなるでしょう。
3. アルゴリズムを考える訓練をする
ここがJavaScriptの超重要ポイントになります。実際はJavaScriptだけでなくプログラミング言語で重要なのはこの部分です。
アルゴリズムについては、国立情報学研究所の方が説明をしてくれているので、その言葉を引用させていただきます。
「アルゴリズム」というのは、コンピューターで計算を行うときの「計算方法」のことなんですが、広く考えれば、何か物事を行うときの「やり方」のことだと言っていいでしょう。その「やり方」を工夫して、より良いやり方を見つけよう、というのが、アルゴリズムの研究です。同じ計算を行うんだったら、いい方法でやればより速く計算できますね、ということです。
(出典：http://research.nii.ac.jp/~uno/algo_3.htm(国立情報学研究所HP))
アルゴリズムは「やり方」を決めるもので、それを実行するためにプログラミングの「コード」があります。
ほとんどの場合、プログラミング初心者が躓くのは、この「やり方」が思いつかないという部分です。
「やり方」が思いつかない場合は、それを実行することができないので、「コード」を書くことができません。
その結果、大半の初心者の方が「何から手をつけていいのかわからない…」となってしまうのです。
初めのうちは、プログラミングの上達速度 = アルゴリズムの修得速度と考えてもいいでしょう。筆者がオススメするアルゴリズムの修得方法はこの2通りです。
何かの問題を解く
まずは、どこかからプログラミングの問題を拾ってきて自分で解答を作成してみることです。
初めの2,3問は迷いながら解いていくことになるかと思いますが、それ以降は比較的スムーズに行くかと思います。
10問程度こなしてくると、アルゴリズムが思いついたらほぼゴールということに気づくかと思うので、それまで取り組んでみることをオススメします。
既にある完成形のコードから具体的に考えてみる
これは、今でも筆者はテストがてら行うのですが、「実際に値を入れてみる」という方法です。
コードを眺めていても、いまいち挙動がつかめない事が多いので、実際に値を入れて考えてみます。
簡単にいえば「機械の代わりに、自分で実行する」という感じです。1度やると、「何故その条件分岐が使われているのか」といった理由が分かってくることでしょう。
4. Javascriptで1つ実際に何か作ってみる
アルゴリズムが基本的に考えられるようになったら、何かを作成してみることが大事です。
もう仕組みは考えられるはずなので、あとはそれを実行できる「コード」を検索するだけ、調べるだけです。
ただ、ここであまりにも難しいものを作って萎えても意味が無いので、以下のものなどがいいでしょう。
- スクロールの高さに応じて、固定される要素(メニューバーとか)
- フォームの入力欄チェック機能
ここでは、「自分で考えて作ってみる」というポイントが重要なので、あまり難しくなくてもいいでしょう。
5. ライブラリを使ってみる
ここまで来たら、ほとんどJavaScriptに対する基礎はバッチリです。応用を効かすために、ライブラリというのを活用していきましょう。
ライブラリとは、そのプログラミング言語でよく使う処理方法をまとめて、より書きやすくしてくれる補助コード群みたいなものです。
ライブラリ（英: Library）は、汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたものである。ライブラリと呼ぶ時は、それ単体ではプログラムとして作動させることはできない実行ファイルではない場合がある。ライブラリは他のプログラムに何らかの機能を提供するコードの集まりと言うことができる。
(出典：wikipedia)
JavaScriptのライブラリだと、jQueryが非常に有名です。jQueryなどを使うと、DOM操作がぐっと楽になります。
jQuery
ライブラリを使うことが全てにおいて良いというわけではないですが、ライブラリは何度も改修を重ねて上手く作られている分、初心者がゼロから考えるよりも速く実行できるような処理になっています。
こういったものを上手く利用していきましょう。
※初心者でも、ライブラリを使えばコピペばかりでほとんどの事ができてしまいます。ですが、それはいざとなった時に応用が効かないので、控えるべきです。
JavaScriptに関するまとめ
以上、いかがでしたでしょうか？
JavaScriptはWebデザインの中でもアルゴリズムなどの影響が強く、勉強の方法がイマイチ分からないといった方が多いようです。
今回の内容は、今まで勉強してwebデザインに取り組まれている方の意見も取り入れています。
初心者の方はプログラミングスクールを活用したり、すでにある程度プログラミングに馴染みのある方は上記の5ステップに従って勉強を進めてみてはいかがでしょうか？
公式サイト（TechAcademy）：https://techacademy.jp/frontend-bootcamp
