スライドショースライドショースライドショー

WebデザイナーもJavaScriptが必要?基礎知識と学習方法について

デザイナーもJSが必要? 基礎知識と学習方法


Webデザイナーが知っておくべきJavaScriptの知識って何だろう
JavaScriptの基本的なポイントをざっくり勉強したい
初心者でもJavaScriptを独学できるサイトってないかなぁ

WebデザイナーでもHTML / CSSでコーディングすることは珍しくなくなりました。さらに最近では、JavaScriptの知識が必要だったりこれを用いた基本的なコーディングを行う場面も少なくありません。

HTML / CSSと違って、JavaScriptは本格的なプログラミング言語なのでデザイナーにとっては馴染みがなく、ゼロから勉強しようと思ってもなかなか上手くいかないこともあるでしょう。

デザイナーに必要となるJavaScriptの知識は、いったいどのように勉強するのが良いのでしょうか?

そこで、この記事ではデザイナーでもJavaScriptの基本的なポイント理解するための方法について分かりやすく解説していきます。ぜひ最後まで読んで理解を深めて頂ければ幸いです。

JavaScriptの必要性

私達が普段から見ているWebサイトは、基本的にHTML / CSSで表現されています。HTMLでWebページの骨組みを作り、CSSでレイアウトなどの装飾を施すことは一般的によく知られています。

HTML&CSSでWebサイトを表現する

Webデザイナーであれば、HTML / CSSだけ知っていればデザインを表現することは可能でしょう。しかし、それでもJavaScriptの基本を知っておくべき理由とは何でしょうか?

現在のWebサイトでJavaScriptを使っていないページは無いと言っても過言ではありません。

簡単なアニメーションやインタラクションはもちろん、サーバーとの通信、画面遷移、フォーム、フレームワーク、広告やアナリティクスの設置など、あらゆる場面においてJavaScriptが使われています。

HTML&CSS&JavaScriptの組み合わせ

大きな理由としては、JavaScriptを実行させるためのエンジンが各種ブラウザに標準で搭載されている唯一の言語だからです。そのため、当然ながらHTMLを記述する時もJavaScriptからの利用を前提にしていなければいけません。

このような時に、Webデザイナーが書くHTMLとエンジニアがイメージするHTMLがまったく異なるものだとWebページを作るのに時間が掛かってしまいます。ちゃんと意思疎通が出来たほうが良いですしね……。

もちろん本格的な制御はエンジニアに任せてしまっても良いわけですが、やはりWebデザイナーもJavaScriptの基本を理解しておけば、効率の良いHTMLを書けるしデザインにも活かすことができるでしょう。

JavaScriptの役割

この章では、JavaScriptの基本を抑える時に重要になるポイントを見ていきましょう。主に、DOM操作イベント処理について学んでいきます。

DOMについて

JavaScriptにはさまざまな役割があるのですが、なかでも特に重要なことはHTMLを操作・制御することでしょう。

例えば、ポップアップウィンドウを生成して表示してみたり、サーバーから取得したデータをもとにして新しいHTMLを生成するなどさまざまなケースが考えられます。このような制御を簡単に実現できるのはDOMが提供されているからなのです。

DOM(Document Object Model)は、簡単に言うとJavaScriptを使ってHTMLを取得・制御できる仕組みのことです。

【document】というデータの中に、HTMLのbodyタグやh1 / ul / aタグなどお馴染みのデータが格納されています。

DOMの概念

これはブラウザ側が自動的に作成してくれるので、あとはJavaScriptから簡単にHTMLを操作できるようになっているわけです。

そもそも、ブラウザを起動するとJavaScriptからさまざまな制御を行えるように【window】というオブジェクト(データの集まり)が生成されます。このデータの中にある1つが【document】であり、その中にHTML構造がデータとして格納されているのです。

イベント処理の基本

Webサイトには、さまざまなユーザーアクションが必要になることがあります。

例えば、以下のような操作をみなさんもしたことはないでしょうか?

  • 画面を上下にスクロールする
  • ボタンをクリックする
  • キーボードから文字を入力する
  • リンクをクリックする …など

これらはすべてユーザーアクションと言って、Webサイトを訪問したユーザーが何らかの操作を行うことで発生します。

さまざまなユーザーアクション

このようなアクションに対して、何らかの処理を実行するためにはJavaScriptが必要になるわけです。

例えば、ボタンをクリックしても何の変化もなければオカシイと感じますよね?

また、もっと言うと実はユーザーアクションが無くてもJavaScriptは任意のタイミングで実行することができます。例を挙げると、Webサイトが表示される瞬間や一定の時間が経過したタイミングなどです。

このようにさまざまなタイミングでJavaScriptが実行されるプログラムをイベント処理と言います。

JavaScriptの学習

この章では、プログラミングの基本からJavaScriptの基礎を誰でも無理なく学べるサービスについて見ていきましょう。基本的な知識を学ぶことで、JavaScriptがより身近に感じられるようになるはずです。

コードモンキー


コードモンキーは、子供から大人までゲーム感覚で楽しみながらプログラムの概念・仕組みについて学べるサービスです。本格的なプログラミング学習を始める前に、このサービスで基本的なスキルを身につけておくと良いでしょう。

内容としては、キャラクターのお猿がステージに配置されているバナナをすべて回収するというものですが、移動を含めてすべての操作をプログラムするというのが大きな特徴です。

プログラムを実行するとキャラクターがすぐに動いてくれるので、正しいプログラムを書いているのかを遊びながら自然に覚えることができるわけです。

主な学習項目は以下の通りです。

  • プログラムの仕組み
  • 変数の使い方
  • 条件分岐処理の書き方
  • 繰り返し処理の書き方
  • 関数の仕組みと使い方

ドットインストール


ドットインストールは、3分の短い動画が複数セットになったレッスンを提供するサービスです。JavaScriptはもちろんのこと、主なWebプログラミングの基本はほとんど学習できるように6000本近い動画講座が提供されています。

JavaScriptに的を絞ると、基本的な構文学習からライブラリ・フレームワークの使い方まで幅広い知識を学ぶことが出来ます。さらに知識を深めたい場合には、Canvasを使ったグラフィック処理やミニゲーム作りまで用意されています。

主なJavaScriptの学習項目は以下の通りです。

  • JavaScriptの基本構文
  • オブジェクト操作の基本
  • DOMの操作方法
  • Canvasによるグラフィック処理
  • ライブラリ・フレームワーク
  • Node.js・Expressの基本
  • ミニゲーム作り

Progate


Progateは、テキストによる学習と実際にプログラムを入力して実行するエディタが統合されたサービスです。そのため、学習したことをその場ですぐに実践できるのが大きな特徴となります。

プログラムの学習環境を整える必要がないので、Webデザイナーを含めて誰でもすぐに学習を始められるメリットは大きいでしょう。また、難しい概念の部分は豊富なイラストで図解による説明があり、学習の進捗状況も可視化されているのでレベルアップしていくのが分かりやすいです。

スマホのアプリもリリースされているので、いつでもどこでも学習を続けられるのも魅力的でしょう。

主なJavaScriptの学習項目は以下の通りです。

  • JavaScriptの基本構文(ES5 / ES6)
  • 関数・クラスの基本
  • npmパッケージの使い方
  • jQueryの基本
  • Webコンテンツとアニメーション
  • React入門

まとめ

今回は、WebデザイナーがJavaScriptの基本的なポイントを学ぶためのポイントについてご紹介しました。

最後に、もう一度ポイントをおさらいしておきましょう!

  • もはやJavaScriptが使われていないWebサイトは無い
  • DOMとイベント処理の仕組み・概念は重要
  • JavaScriptの基本を独学できるWebサービスを活用しよう

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通して、プログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

cta_under_btn

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説