Webデザイン

Webデザインに動きをつけるJavaScriptの基礎と学習サイト

この授業は次のような方にぜひ受講してほしいです。

・Webサイトに動きをつけるJavaScriptについて知りたい方

・JavaScriptを習得したいけれど難しくてわからない方

・JavaScriptのでできることを知りたい方

この授業を最後まで受けていただければ、JavaScriptがどんな働きをする言語なのかがよく理解できます。

どうぞ最後までご覧になってください。

JavaScriptって何?

JavaScript(ジャバスクリプト)というのは、作ったWebサイトに動きをつける働きをするプログラミング言語です。

先生
先生
JavaScriptを略してJSとも呼ばれているよ。

JavaScriptは次のような動きなども作っています。

・Webサイトのメイン画像が切り替わるスライドショー

・スマートフォンのメニューボタン

・ネットショップなどの商品画像が拡大される

Webに関係する色々な場面で使われることが多く、Web開発をするためには必須の言語だと言われています。

先生
先生
だから、JavaScriptはエンジニアだけではなく、Webデザイナーやコーダーも習得しておきたい言語の上位に入っているんだ。

デザイニャー
デザイニャー
例えばJavaScriptはどんな場面で活用されているのかニャン?

先生
先生
JavaScriptが活用されているよくある例はGoogleMapだよ。

GoogloMapを使うときに、画面を切り替えずに地図を動かせるのは、JavaScriptを使っているからです。

先生
先生
2005年にGoogleMapにJavaScriptが導入されたことから注目が集まったんだ。

その他、次のような場面でJavaScriptが使われています。

・簡単なアニメーションやインタラクション

・サーバーとの通信

・画面遷移

・フォーム

・フレームワーク

・広告やアナリティクスの設置

デザイニャー
デザイニャー
このようにあらゆる場面でJavaScriptが使われているんだニャン。

JavaScriptの特徴は?

JavaScriptは、Webサイト上の振る舞いを操ることがその特徴です。

先生
先生
JavaScriptは、次のような「イベント」と呼ばれれている色々な命令を操る役割を持っているんだ。

・画面が読み込まれたタイミングの検知

・ボタンがクリックされたかの検知

・画面をスクロールしたりリサイズしたかの検知

・5秒後にアニメーションを発動するような命令

先生
先生
それに加えて、サーバーとのデータのやり取りなども担当しているんだ。

デザイニャー
デザイニャー
JavaScriptはWebブラウザ上でマルチにプレイしている言語ということなんだニャン。

JavaScriptは、Web開発企業でも使われている言語で、フロントエンドでエンジニアであれば欠かせないとても人気がある言語で、この傾向はこの先数年変化する可能性は低いと言われています。

JavaScriptに似た言語Javaというものがありますが、全く違う言語なので気をつけましょう。

JavaScriptと他の言語との違い

ここでは、JavaScriptとJavaScript以外の他の言語について、次のことをお話ししていきます。

・JavaScriptとjQueryとの比較

・JavaScriptとJavaの関係って?

・JavaScriptとRubyの比較

JavaScriptとjQueryとの比較

先生
先生
jQueryというのは、JavaScriptをもっと簡単に書けるように開発されたプログラミング言語なんだ。

jQueryの人気の秘訣は次のことが挙げられます。

・学習コストが低い

・jQueryプラグインという、JSに詳しくなくてもスライドショーなどが作成される小さなプログラムがネット上でたくさん配布されている

・さまざまなブラウザに対応している

jQueryはスピーディーにWebサイトを作ることができるので、多くの現場で採用されています。

デザイニャー
デザイニャー
JavaScriptとjQueryではどちらを先に学んだ方がいいのか教えてほしいニャン。

先生
先生
Webデザイナーになりたいのであれば、jQueryから学ぶのがおすすめだよ。

その理由には次の3つが挙げられます。

・jQueryは覚えやすく、結果もわかりやすいので、学習のモチベーションを保てる

・簡単なのに、基本的なWebサイトの動きのほぼ全てに対応できる

・jQueryを知っておくとその後のJavaScriptの学習がスムーズになる

JavaScriptとJavaの関係って?

デザイニャー
デザイニャー
Javaって、JavaScriptのことなのかニャン?

先生
先生
それは違うよ。名前は似ているけれど、別の言語だよ。

JavaScriptと名前が似ている言語でJavaというプログラミング言語があります。

初心者の方で、よく同じ言語だと勘違いしてしまう人がいますが、気をつけましょう。

しかし、JavaScriptの名前がつくのには大きく関係しています。

JavaScriptが開発された頃、サン・マイクロシステムズ(現:オラクル)が開発したJavaが大きな注目を浴びていて、ネットスケープ社が「LiveScript」という言語を作っていたのですが、2社が業務提携していたことから「JavaScript」という名前に変更されました。

現在でもJavaは使われていますが、技術者の数でも用途の幅広さでもJavaScriptの方がJavaを圧倒しています。

JavaScriptはWeb制作に必須な、世界で最も幅広く使われているプログラミング言語であるということが言えます。

JavaScriptとRubyの比較

先生
先生
JavaScriptとRubyの違いは次の通りだよ。

・JavaScript:クライアント側(ブラウザ)で動く言語

・Ruby:サーバーで動く言語

 JavaScriptは海外で開発された言語であるのに対して、Rubyjは日本で開発されたプログラミング言語で、1993年にまつもとゆきひろ氏が開発して世界に広まりました。

Ruby on Railsというウェブアプリケーションフレームワークがとても有名で人気があります。

フレームワークというのは、アプリケーションを開発しやすくするための、ルールが決められている雛形のことを指します。

JavaScript学習のおすすめ本

先生
先生
ジャバスクリプトが学べる本でおすすめなのは次の3冊だよ。

確かな力が身につくJavaScript「超」入門 第2版

図解! JavaScriptのツボとコツがゼッタイにわかる本 “超”入門編

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

JavaScriptでできる13個のこと

デザイニャー
デザイニャー
JavaScriptを使うことで色々なことができるというけれど、具体的には何ができるのかニャン?

先生
先生
それには次の13個のことが挙げられるよ。

・Webサイトに動きを加える

・ポップアップウインドウ

・フォームを制御

・Ajax・非同期通信

・グラフをリアルタイムで動かす

・計算機としての役割も

・Webサイトの作成

・Webアプリの作成

・スマホアプリの作成

・ChromeやFirefoxの拡張機能を作成

・ブックマークレットの作成

・HTMLの操作・制御

・イベント処理

Webサイトに動きを加える

先生
先生
JavaScriptの一番の仕事は、Webサイトに動きをつけることだったね。

・サイトを訪れた人を楽しませて離脱率を下げる

・こだわりの動きをつけて企業やショップのブランディングに活用する

といったことをします。

最近では動画サイトの動画コントロールをすることもできるようになるなど、JavaScriptを使うと本当に色々なことができます。

ポップアップウィンドウ

ポップアップウィンドウは、閲覧制限があるページのIDや、パスワードの入力を求める場面や、お問合せフォームを送るときに、「本当に送信しますがよろしいでしょうか?」などという確認に使われます。

クリックしたり、ページを読み込んだときに、ポップアップウィンドウを表示させることが多いです。

フォームを制御

サーバーにフォームの内容を送る前に、入力欄の内容をチェックするときなどに使われます。

具体的には、

・必須項目が入力されているか

・電話番号やメールアドレスの形式が正しいか

ということをチェックします。

不完全な内容を送信しようとした時のエラーメッセージもを表示させるときも、JavaScriptを使っています。

Ajax・非同期通信

先生
先生
前にも触れたけれど、Googleマップの登場で爆発的に使われるようになった技術だよ。

ページの読み込みをしないで、サーバーとのデータとのやり取りをできるようにする技術です。

Googleマップではスクロールすることで地図の場所を変えるたびに、JavaScriptを利用することで、サーバーにアクセスして必要なデータを取ってきて表示させています。

また、ネットショップなどでも使われていて、初めは一部の商品だけを表示させていて、「もっと見る」ボタンを押すことで、同じページ内で商品の画像が追加される仕組みも、このAjaxの技術を使っています。

グラフをリアルタイムで動かす

先生
先生
JavaScriptでは、「canvas」というタグの中に円や線など、色々な図形を描画する命令をするときにも使うことができるんだ。

「canvas」は、色々なデータのビジュアライズにも使われていて、データを可視化したグラフを作成するときにも使われています。

また、「Node.js」というサーバーで動く JavaScriptなどを使って、リアムタイムでブラウザにデータを送って、それでグラフを描画することもできます。

計算機としての役割も

先生
先生
 JavaScriptは、ブラウザ上でも計算機として使うこともできるんだ。

基本的な算術計算をすることができるプログラミング言語なので、例えば「旅行サイトで何んで何泊宿泊するのか」という見積もり機能などに JavaScriptが使われることもあります。

特に、保険シミュレーションの計算にも使われていて、年数、ぷらん、家族構成といった色々な選択肢を選んだ結果を計算してでた結果から、最適なプランを提案したり金額の表示をすることができます。

Webサイトの作成

 JavaScriptが開発された理由は、Webサイトに動きをつけることでした。

なので、 JavaScriptといったら、Web制作というように最初に浮かびますよね。

・華やかなアニメーション演出

・ボタンにカーソルを合わせると色やデザインを変更させて別ページに飛ぶのがわかるような挙動をする

など、ユーザーのサイト閲覧を助ける役割をするJavaScriptは、Webサイト制作に欠かせません。

Webアプリの作成

デザイニャー
デザイニャー
アプリの作成は専門の言語の知識が必要なのかニャン?

先生
先生
そう思うかもしれないけれど、Webアプリは、HTMLとCSS、 JavaScriptを使って作ることができるんだ。

SlackやChatWorkといったチャット形式のアプリケーションもこれらの技術を使って作ることができます。

Webアプリを作るときには、

・フロントサイド

・サーバーサイド

によって違う技術を使います。

先生
先生
この2つをそれぞれ説明していくね。

フロントサイド

ウェブアプリによるフロントサイドというのは、ブラウザ上で操作する部分のことを指します。

先生
先生
チャットアプリだったら、文章を入力する部分のことだよ。

その部分も JavaScriptで制御されていて、ブラウザの画面で入力したデータをサーバーサイド側に送ります。

Webアプリを作るときには、フロントサイドの部分は「フレームワーク」を使って作ることが多いです。

フレームワークというのは、1から全部のアプリの機能を作らなくても、ある程度アプリを作るための機能が用意されていて、チームのみんなで同じルールを守りながら作ることができるという便利な雛形のことを指します。

 JavaScriptのフレームワークは、最近では「React.js」や「Vue.js」などが人気があり、よく使われています。

サーバーサイド

先生
先生
サーバーサイドでは、RubyやPHP、Javaといった他の言語を使いながら、それぞれのフレームワークを使って作ることが多いんだ。

フロントサイドからデーターを受信して、何かの処理をして、またフロントサイドにデータを送ります。

チャットアプリを例にすると、フロントサイドが送ってきたデータを受け取って、他の人にサーバーサイドから転送したりするなどして使われています。

PHPの人気フレームワークの「Laravel」のフロント部分として、ジャバスクリプトの「Vue.js」が使われているのも、ジャバスクリプトのフレームワークの人気がある理由のうちの1つです。

スマホアプリの作成

 JavaScriptは、Webアプリだけでなく、スマートフォンアプリを作ることもできます。

先生
先生
スマートフォンアプリには次の2種類があるよ。

・ハイブリッドアプリ

・ネイティブアプリ

ハイブリッドアプリ

Webアプリとインストール型のスマホアプリの合わせ技のような感じで、HTMLやCSS、 JavaScriptで作られた、ブラウザ上で動くWebアプリを「Web View」と言う、iOSやAndroid OSにWebページを読み込んで表示する仕組みを使って作られます。

ネイティブアプリ

ネイティブアプリでは、HTMLやCSS、 JavaScriptと言う言語は基本的には使っていません。

iOSではSwiftなどを、Android OSの時にはJavaなどを使って作っています。

ネイティブアプリの場合は、スマートフォン本体に元々搭載されエチルカメラや電話帳機能などと連携することが簡単にできます。

また動作スピードがハイブリッドアプリよりも早いことも、ネイティブアプリの特徴の1つです。

しかし最近では、 JavaScriptのフレームワークでもネイティブアプリを作ることができるようになってきて、「Electron」や「React Native」などでデスクトップアプリやスマートフォンのアプリを作ることができるようになりました。

ChromeやFirefoxの拡張機能を作成

先生
先生
JavaScriptでは、ChromeやFirefoxなどのブラウザの拡張機能を作成することができるんだ。

・ブラウザで観ているWebページのスクリーンショットの撮影

・Webページの文章で使われている文字の色を確認するためのアドオン

などといったさまざまな種類が使われています。

これらは自分でも作成することができて、「json」と言う形式の設定ファイルやHTML、CSS、ジャバスクリプトを使って作ることができます。

ブックマークレットの作成

 JavaScriptでは、ブックマークレートを作ることもできます。

先生
先生
ブックマークレットというのは、ブラウザのブックマークに JavaScriptの短いコードを登録してクリックすることで実行できる技術のことだよ。

「閲覧しているページのURLをクリックしてコピーする」というような便利な細かい機能を自分で作成することができます。

プログラムを新規ブックマークとしてブラウザに登録すると作成完了です。

HTMLの操作・制御

 JavaScriptには色々な役割がたくさんありますが、その中でもHTMLを操作・制御することは特に重要です。

例えば

・ポップアップウィンドウを作成して表示させる、

・サーバーから取得したデータを元にあたらしいHTMLを作成する

など色々なケースが考えられますが、これらのことが簡単にできるのは、DOMが提供されているからです。

先生
先生
DOM(Document Object Model)とは、 JavaScriptを使ってHTMLを取得したり制御したりできる仕組みのことだよ。


出典:【React】仮想DOMって何!?コンポーネントのレンダリングと描画について理解しよう!

「document」の中にあHTMLのbodyタグやh1やa タグなどの馴染みのあるデータが収められています。

これは、ブラウザ側で自動的に作ってくれるので、後で JavaScriptからHTMLを簡単に操作できるようになっています。

ブラウザを起動すると JavaScriptから色々な制御が行えるように、「window」と呼ばれるデータの集まりが作られますが、このデータの中にある一つが「document」出会って、その中にHTML構造がデータとして納めれられています。

イベント処理

先生
先生
Webサイトには色々なユーザーアクションが必要になることがあるんだけれど、例えば次のような操作をみなさんもしたことがあるでしょう。

・ボタンをクリック

・画面を上下にスクロール

・キーボードで文字を入力

・リンクをクリック

これらは全部Webサイトを訪れたユーザーが何かしらの操作を行うことで発生するものです。

これをユーザーアクションと呼ぶのですが、このアクションに対して何らかの処理を行うためには JavaScriptが必要になります。

先生
先生
例えば、ボタンをクリックしたのに何も起こらなければ変だと感じるよね。

もっと言うと、ユーザーアクションがなくても、任意のタイミングで JavaScriptが実行されることがあります。

Webサイトが表示される瞬間や一定の時間が経過したタイミングで自動的に行われることがあるのですが、このように、色々なタイミングで JavaScriptが実行されるプログラムのことを「イベント処理」と言います

 JavaScriptに何が求められているかの参考記事

先生
先生
JavaScriptに何が求められているのかについて詳しく書かれている記事を見つけたから、リンクしておくね。

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

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

どちらの領域についても高いレベルを持った人材は珍しく、付加価値の高い人材になろうとすれば、どちらかを専門に選択しないといけません。

「フロントエンドエンジニア」として現代的なWeb技術を学ぶ方が付加価値の高い人材に慣れるのですが、その場合には JavaScriptの技術が必要になります。

エンジニアの求人サイトでも、フロントエンドエンジニアの求人で JavaScriptの技術を求められないことは稀です。

つまり、フロントエンドエンジニアとして働くには、HTMLやCSSはできて当たり前で、ポートフォリオを作る時にも、 JavaScriptのフレームワークやライブラリを使うことが当然必要になります。

JavaScriptフレームワークの勉強

 JavaScriptを勉強しようとすると、「フレームワーク」や「ライブラリ」と言う言葉を目にしますが、これは JavaScriptを簡単に描けるようにしたパッケージのようなものです。

JavaScriptの勉強をするには、 JavaScriptそのものだけでなく、このフレームワークやライブラリの学習も必要です。

世界的によく使われているフレームワーク(ライブラリ)は次の通りです。

・jQuery

・React.js

・Angular .js

・Express

・Vue.js

JavaScriptの勉強をするのにおすすめの人

先生
先生
ここまで JavaScriptについて詳しくお話ししてきたけれど、実際にジャバスクリプトを勉強するのはどんな人に雄めなのかは次の通りだよ。

・Webサイトを作りたい人

・プログラミング初心者

・Webアプリやスマホアプリを作りたい人

・仕事の作業を効率化させたい人

Webサイトを作りたい人

JavaScriptはHTMLやCSSを学んだ先で、Webサイトに動きをつけたいと言う方におすすめです。

アニメーションはCSSでもつけることはできますが、ブラウザのスクロール取得やクリックの検知などの「きっかけ」には、 JavaScriptが必要になります。

Webデザイナーやフロントエンジニアを目指している方におすすめです。

プログラミング初心者

JavaScriptは、プログラム初心者の方にも人気がある言語です。

その人気の理由は、テキストエディタとブラウザがあれば動作できる手軽な実行環境と、アニメーションとして動きが見えることでモチベーションが上がりやすいと言うところです。

Webアプリやスマホアプリを作りたい人

Webアプリやスマホアプリを作りたい方にも JavaScriptはおすすめの言語です。

ハイブリッドアプリという作成方法でスマホアプリの画面をできますし、ReactNativeなどの JavaScriptのフレームワークを利用することで、ネイティブアプリの開発もできます。

これから人気が出てくるものと予想されるので、今後のことも考えても勉強しておいて損にはならないでしょう。

仕事の作業を効率化させたい人

JavaScriptとは仕事の作業効率化にも利用することができます。

Webアプリケーションで集めたデータをCSVファイル形式で書き出し、エクセルでインポートすることでマーケティング業務で使うことができます。

また、オリジナルのアプリケーションも作ることができますので、Microsoft Officeのようなオリジナルアプリケーションも作ることができます。

JavaScriptの勉強方法

先生
先生
ここでは、プログラミングの基本から JavaScriptの基礎を学べるサービスについてご紹介するよ。

誰でも無理なく学べるサービスは次の3つです。

Webデザインを無料でも勉強できるサイト9選|試しにやってみよう!この授業は次のような方へおすすめです。 ・Webデザインに興味を持ち始めている方 ・お金をかけずに気軽にWebデザインの...

コードモンキー

コードモンキーは、ゲーム感覚で楽しみながらプログラムの概念や仕組みを学べるサービスです。

キャラクターの猿がステージに配置されているバナナを全て回収するというゲームのようなものから、プログラミングについて学べる内容です。

正しいプログラムを書いているのかを遊び感覚で自然に覚えることができるサービスです。

ドットインストール

ドットインストールは、約3分の短い動画が複数セットになったレッスンを提供しているサービスです。

JavaScriptだけでなく、主なWebプログラミングの基本をほとんど学べるようになっていて、6000本近くの動画講座があります。

 JavaScriptに関しては、基本的な構文学習からフレームワーク(ライブラリ)の使い方まで、幅広く学ぶことができます。

Progate

Progateは、テキストによる学習と実際にプログラムを入力することで学べるので、学習したことをその場ですぐに実践できる画期的なサービスです。

プログラムの学習環境を整えなくてもできるので、誰でもすぐに学習を始められるところが大きなメリットです。

イラストを使って詳しく説明されているので、難しい内容でもわかりやすく学ぶことができます。

パソコンだけでなく、スマホ版もあるので、いつでもどこでも学習することができます。

大人でも学べるJavaScriptのスクール

プログラミング×稼げる副業スキルはテックキャンプ

大人でも JavaScriptについて学べるスクールに、「テックキャンプ」があります。

東京に4校、名古屋に1校、大阪に1校あります。

・通学コースとオンラインの両方がある

・Webサービス開発・デザイン・AI(人工知能)が学べる

・講師に質問がたくさんできる

という魅力的なスクールです。

未経験からプログラミングスキルを身につけたい大人にとって力強いスクールです。

JavaScript実践のおすすめ記事

先生
先生
最後にJavaScriptを実践するのに参考になる記事を2つ紹介しておくね。

まとめ

先生
先生
この授業では次の35個のことについてお話ししたよ。

・JavaScriptって何?

・JavaScriptの特徴は?

・JavaScriptと他の言語との違い

・JavaScriptとjQueryとの比較

・JavaScriptとJavaの関係って?

・JavaScriptとRubyの比較

・JavaScript学習のおすすめ本

・JavaScriptでできる13個のこと

・Webサイトに動きを加える

・ポップアップウインドウ

・フォームを制御

・Ajax・非同期通信

・グラフをリアルタイムで動かす

・計算機としての役割も

・Webサイトの作成

・Webアプリの作成

・スマホアプリの作成

・ChromeやFirefoxの拡張機能を作成

・ブックマークレットの作成

・HTMLの操作・制御

・イベント処理

・JavaScriptに何が求められているかの参考記事

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

・JavaScriptフレームワークの勉強

・JavaScriptの勉強をするのにおすすめの人

・Webサイトを作りたい人

・プログラミング初心者

・Webアプリやスマホアプリを作りたい人

・仕事の作業を効率化させたい人

・JavaScriptの勉強方法

・コードモンキー

・ドットインストール

・Progate

・大人でも学べるJavaScriptのスクール

・JavaScript実践のおすすめ記事

デザイニャー
デザイニャー
Webサイトに動きをつけるプログラミング言語のことをJavaScriptと言うんだったニャン。

HTMLとCSSは比較的簡単ですが、JavaScriptになると難易度がアップします。

先生
先生
そんな時にはjQueryと言うフレームワークを使うと簡単にWebサイトに動きをつけられるんだったね。

JavaScriptについてゲーム感覚で学べるサービスも出てきていますので、それらを利用して、習得していきましょう。

私たちは頑張るあなたを応援しています。