MENU
なお
じゃぱざむ運営主
20歳 | WEBメディアの会社で部長をやりながら、じゃぱざむ・特化メディア・WEB制作~コンサル・SEOディレクター・投資・就活相談など幅広くやっています。
いまい
エンジニア志望の大学生
21歳 | 理系の大学3年生|Webアプリ開発を勉強中。クラウド系の自社開発企業(マザーズ上場企業)に内定。じゃぱざむでは、IT系記事の執筆とアイキャッチ画像の作成をしています。
【完全ガイド】大学生でもプログラミングで稼ぎ始めるためのロードマップ

JavaScriptで何ができる?できないことは?わかりやすく解説!

記事上バナー
テックキャンプの記事上バナー
レイズテックの記事上バナー
テックブーストの記事上バナー

これからプログラミングを学ぼうと色々調べている方は、「JavaScript」という言語をご存知かもしれません。

このJavaScriptは、Web系の開発をするにあたって必要不可欠と言って良い言語です。

実際に、多くの有名なサイトでJavaScriptが使われています。

本記事ではそんなJavaScriptのについて詳しくまとめました

  • JavaScriptはどんな仕組みで動いているのか
  • JavaScriptを使うメリットは何か
  • JavaScriptで作れるもの

など、プログラミング初心者に向けて解説しています。

本記事でJavaScriptに関する基礎知識を得ることが可能です。

これからプログラミングを学ぶ方、JavaScriptについて理解を深めたい方は、ぜひ最後までお読みください。

タップして好きなところから読めます

JavaScriptとは?Web制作には欠かせない言語!

JavaScriptは1995年に登場した言語であり、今も現役で活躍しています。これだけ長きに渡り活躍している言語は珍しいと言えますね。

そんなJavaScriptですが、実はWeb開発分野で必ずと言って良いほど使われる言語でもあります。

JavaScriptなしでWeb開発を行うことはほとんどありません。

具体的に、JavaScriptがWeb開発分野でどう使われているか、次の項目から見ていきましょう。

  • ちなみに「Java」という言語もありますが、JavaScriptとは別物なので注意しましょう。JavaはAndroidアプリや業務アプリの開発に用いられる言語であり、こちらも現役で活躍しています。

JavaScriptはWebブラウザ上の動作を書くことができる!

JavaScriptはWebブラウザ上動作するのが大きなポイントです。

どのようにWebブラウザ上でJavaScriptが動いているのか、本項目で解説していますのでご覧ください。

JavaScriptの基本的な挙動の仕組みを知ることができますよ。

JavaScriptがブラウザで動く仕組み

まず、私達が普段使っているブラウザがどのように動いているか見ていきましょう。

Webページが表示されるときは、パソコン(Webクライアントと呼びます)とWebサーバーが通信を行っています。

WebクライアントとWebサーバーは以下の流れで通信しています。

  1. ユーザーがWebページのURLを入力する
  2. WebクライアントがURLを元に「このページを見せて」Webサーバーに依頼する
  3. WebサーバーがそのページのデータをWebクライアントに返却する
  4. Webクライアントがデータを元にWebページを作成して表示する

JavaScriptはWebクライアント側で動くプログラムです。

Webサーバーが返却したデータを元に、Webページを作成しています。

つまり、JavaScriptは(4)のタイミングで動いているということです。

この、JavaScriptはWebクライアント側で動く、ということを覚えておきましょう。

Webページに「動き」をつけることができる!

JavaScriptを使うことで、Webページに「動き」をつけることを可能にします。

例えば、Webページに以下のような動きをつけられます。

  • 横にスワイプができるようにスライダー機能をつける
  • メニュー表をつける
  • 文字色や文字の大きさを変えられる

JavaScriptが使われている「動き」のあるページは「動的なページ」と呼ばれています。

反対に「動き」がないページは「静的なページ」と呼ばれていますね。

  • HTMLやCSSだけでは動きのあるサイトは作ることができません。

さまざまな処理ができる!

HTMLやCSSとは異なりJavaScriptはプログラミング言語の1つです。そのためWebページに動きをつける以外にも、さまざまな処理を行うことができます。

例えば、以下のような処理が可能です。

  • 現在時刻を取得して表示する
  • ポップアップウィンドウを表示する
  • フォームに入力させた内容を元にメッセージを表示する

JavaScriptを使うことで色々な処理が可能になり、より高度なWebページを作成できます。

非同期通信ができる!

JavaScriptは非同期通信ができるのもメリットの1つです。

非同期通信とは、WebクライアントとWebサーバーの通信タイミングを合わせずに通信を行うことです。

非同期通信はAjaxの通信方式で利用されています

Ajaxを利用することで、ページの一部分を後で表示させたり、編集中の文章を一時保存したりできます。

つまり、Ajaxを使えばページを遷移せずに情報を更新できる、ということです。

このAjaxの非同期通信の仕組みを利用して、様々なアプリが作られています

  • 例えばチャットアプリやTwitterのようなSNSも非同期通信が使われていますね。

さらに高度なこともできる!

JavaScriptを使ってさらに高度で面白いこともできます。

例えば、以下のサイトではJavaScriptを利用して、アニメーションを作成していますね。

Ball-Pool

このページでは、ユーザーの挙動によって表示内容を変更できるようになっています。

例えば、ボールをマウスでクリックして移動させるとボールがその通りに動いたり、何もないところでクリックするとボールがたくさん落ちてきたりします。

  • JavaScriptを使えば、このように遊び心に溢れたサイトも作ることが可能です。

JavaScriptはWebアプリ開発ができる!

JavaScriptは主にWebアプリ開発の分野で活躍します。

具体的に、Webアプリ開発の分野でどのように使われているか見ていきましょう。

本項目を読むことで、JavaScriptを使ってどのようにWeb開発するか分かります。

Node.jsを使えばサーバー側でも動かすことができる!

先程解説したように、JavaScriptはWebクライアント側で動くのが普通です。

しかし実は、Node.jsを使うことでサーバーサイドの処理もできるのです。

Node.jsによって、JavaScriptはWebクライアント側、Webサーバー側の両方で利用可能となりました。

例えば、大手検索サイトの「Yahoo!」でも、node.jsが使われています。

フロントエンドとバックエンドどっちも開発できる!

なぜフロントエンド(クライアントサイド)とバックエンド(サーバサイド)で、同じJavaScriptを使うのか。

理由は、使用する言語を統一することにより、プログラムの管理がしやすくなるからです。

少人数で開発する場合、プログラマーはフロントエンドとバックエンドの開発両方を担当します。

フロントエンドとバックエンドで違う言語を使う場合、プログラマーは両方の言語を使いこなせなる必要があります。

言語がJavaScriptで統一されていると、プログラマーの負担が減るので、プログラムの管理もしやすくなりますよね。

  • フロントエンドとバックエンドに関しては、下記の記事に詳しくまとめてあります。こちらもお読み頂けると、JavaScriptに関する理解がより深まります。

JavaScriptはスマホアプリ開発ができる!

実はJavaScriptは、Webアプリ開発だけでなくスマホアプリ開発にも利用できます

JavaScriptでどのようにスマホアプリ開発を行うのか、詳しく見ていきましょう。

スマホアプリが作れる!

JavaScriptを使ってスマホアプリも作ることができます。

スマホアプリ開発でJavaScriptを使うメリットは、開発コストを削減できることです。

以前はスマホアプリを作る場合、AndroidアプリではJava、iOSではObjective-C、というように別々の言語が使われていました。

これだとプログラマーは、2つの言語を習得しないといけません。そこでJavaScriptの出番です。

最近HTML5が登場したことにより、JavaScript1つでAndroidとiOS両方のアプリが作れるようになりました。

JavaScriptでスマホアプリを作る場合、「React Native」などのフレームワークを使うのが一般的です。

このフレームワークを使えば、JavaScriptでも簡単にスマホアプリ開発ができます。

ハイブリッドアプリも作れる!

JavaScriptは、ハイブリットアプリも作ることができます

ハイブリットアプリとは、Webアプリとスマホアプリの良い所を取り入れたアプリのことです。

Webアプリのようにマルチプラットフォームでありながら、ネイティブ機能も使用できます。

ハイブリットアプリを作る場合「WebView」というソフトが必要です。

このWebViewによって、Webアプリとして作ったプログラムをスマホでも動かせます。

JavaScriptでスマホアプリを開発する方法
  • スマホアプリ⇒「React Native」などのフレームワークを使う
  • ハイブリッドアプリ⇒「WebView」

JavaScriptはツールの拡張ができる!

JavaScriptは、GoogleスプレッドシードやChromeといったツールの拡張もできます。

ツールの拡張ができると、効率的に作業を行えるなどの利点がありますね。

具体的に、JavaScriptでどのようにツールの拡張を行うのか、見ていきましょう。

Googleスプレッドシードのスクリプトを作れる!

JavaScriptを使って、Googleスプレッドシートのスクリプトが作れます

Googleスプレッドシートとは、ブラウザ上で動かせるExcelと似たようなもののことです。

Googleスプレッドシート内でJavaScriptを使うことで、Excelのユーザー定義関数などを作成できます

JavaScriptによってGoogleスプレッドシートがより便利に使えます。

Chromeの拡張機能を作れる!

JavaScriptを使って、Chromeの拡張機能を作ることも可能です。

拡張機能を使うことでChromeをさらに便利に使うことができます。

拡張機能は数多くの種類が公開されている他、個人でも作成することが可能です。

開発にあたって特別なツールも必要なく、Google Chromeさえあれば誰でも拡張機能を作ることができます。

JavaScriptって何ができないの?JavaScriptの苦手なこと

JavaScriptは、処理速度が若干遅いのがデメリットです。

処理速度がシビアに求められるWebアプリでは、非同期通信を利用するなどの工夫をする必要があります。

また、JavaScriptはブラウザによって挙動が異なる場合があるのも難点です。

そのため、Web開発をする場合、ChromeやFirefoxなどさまざまなブラウザで挙動テストを行う必要があります。

  • JavaScriptに苦手なことは、プログラマーが補ってあげる必要があると言えますね。

JavaScriptで何ができる?まとめ

JavaScriptでできること
  • Webアプリ開発が作れる!
  • スマホアプリ開発が作れる!
  • ツールの拡張ができる!

本記事では、JavaScriptについて解説しました。

JavaScriptができることや、JavaScriptを使うメリット、などがお分かり頂けたかと思います。

JavaScriptは、Webアプリやスマホアプリ開発など、幅広い分野で活躍する言語です。

そのためJavaScriptを習得することで、さまざまな仕事を請けることができます。

JavaScriptは勉強する価値の高いプログラミング言語ということです

プログラミング初心者の方は、JavaScriptをぜひ習得してみてくださいね。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
タップして好きなところから読めます
閉じる