質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • JavaScript

    17479questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

javascriptに関する素朴な疑問

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 607

2017js

score 6

過去にhtml、css、jQueryを使ってWEBサイトを作ったことがあります。
このたびjavascriptを新たに勉強することにしました。

そこでjavascriptを使って「ストップウォッチ」や「おみくじ」など初歩的なページを作りました。
しかし、現実的には、例えば中小企業・個人事業のWEBサイトに「ストップウォッチ」や「おみくじ」などの機能は必要ありません。

WEBページでjavascriptが必要とされるのは、具体的にどのような場合で、どのように利用されているのでしょうか?(jQueryを除き)

javascriptの企業ページなどでの活用方法を教えてください。
よろしくお願いします。

【追記】
例えば美容院や整体院サイトでの「予約システム」などもjavascriptで作っているのでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

checkベストアンサー

+3

そもそもHTMLってのは、とある企業がWeb上で文書交換をするために作った様式です。
HTMLのタグ一覧を見れば、Wordの文書のようなものを作る為に作られた概念と一目でわかります。

JavaScriptはMS社が「ダイナミックHTML」と呼んだ事もあるように、
スクリプトコードにより計算を行い、HTMLを動的に改変できます。

でも、文書を動的に見せる為のJavaScriptって要るの?
いや、文書を改ざんしたらダメでしょ。要らないよ。
登場後、ろくな利用方法が見いだせないJavaScriptは長らく不遇の時代を迎えます。
(IEのセキュリティもダメダメで、ネットサーフィンする前にまずJavaScriptの設定をOFFにしますとか書かれる始末)

2002年になると、邪魔者だったJavaScript君を使いこなす画期的なサービスが登場します。
Google Mapです。
マウス操作で地図をグリグリ動かして、拡大・縮小も自由自在!
東京の地図を表示する時に、九州や北海道の情報は要るだろうか?必要な時に必要な情報を最小限取得することで軽い処理を実現!
(この必要な情報を最小限に裏で通信を行って取ってくる仕組みをAjaxと呼びます)

また、人間に見せる文書の情報量は少なければ少ない程良いということが分かってきました。
デフォルトでは補足情報は非表示にしておいて、ユーザーが気になった時だけ表示される仕組みを構築するようになりました。
参考サイト:初心者でもすぐできるスマホ対応jQueryアコーディオンメニューの作り方

更に2006年にはこれらの流れを組んで
Ajax通信を簡単に飛ばせ、簡単にDOMを操作できるjQueryというライブラリが登場します。
(それより先に出たprototype.jsがありますが、様々なライブラリと干渉するので現在は非推奨となっています)

さて、この前提を元に回答していきます。


WEBページでjavascriptが必要とされるのは、具体的にどのような場合で、どのように利用されているのでしょうか?

jQueryはJavaScriptで書かれた便利関数が詰まっているライブラリに過ぎないので、
スライドショーやアコーディオンメニューも立派なJavaScriptではあるのですが…

ユーザーが求めた時にだけ表示するこれらの仕組みはjQueryや、その関連ライブラリの作者の試みでほぼ解決していることでしょう。
そういった意味でいえば、確かにjQueryの基礎だけ知っていれば後はライブラリを探すだけで解決という感じになるので、JavaScriptを覚えるメリットが薄く感じるかもしれませんね。

単純にjQueryライブラリを探すだけでは解決出来ない…という例で幾つか挙げてみます

  • (Ajaxを利用して)膨大なリソースを検索させる
    例えば多数の商品を扱うショッピングサイトですね。
    毎回HTMLを表示し直すよりも、Ajaxを使って必要最小限の情報だけ取得して表示し直せば更に高速に表示させることが可能です。
  • EFO(エントリーフォーム最適化)
    フォームの必須項目の内、未入力項目を赤で塗りつぶしたりユーザーに教える仕組みを用意することで、
    購買意思があるのにエラーが出て逃げるユーザーが減るというメリットがあります。
    更にAjaxと併用して郵便番号から住所自動入力を行うということも可能です。

【追記】追記部分への回答

例えば美容院や整体院サイトでの「予約システム」などもjavascriptで作っているのでしょうか?

美容院や整体院サイトの予約システムは、
そのサービス提供側のWebサーバーに最新の予約情報があるはずです。

各ユーザーにダウンロードされてローカルで動作するJavaScriptのみでは不可能で、
PHP等のサーバー側のシステムで最新の予約情報を出力したり、予約を入れる仕組みを用意する必要があります。

ただし、JavaScriptが使えない訳ではありません。
JavaScriptにはAjax通信がありますので、併用すれば凝ったユーザーインターフェースを実現出来ます。
裏で好きなタイミングで最新の予約状況を取得したり、新しい予約を申請したり出来ますからね。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/05 13:03

    わー、歴史まで含めてとても詳しく、分かりやすく教えていただきました!
    ありがとうございます!!

    キャンセル

+3

以下のような場面ではないかと。

  • 複雑なアニメーションを実装する。
  • お問い合わせフォームで入力欄に正しい情報が入力されているか確認する。
  • ページ内のある部分だけをリアルタイムに更新する。
  • イベントまでのカウントダウン。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/05 09:46

    ありがとうございます!!

    キャンセル

+1

おもにデザインの調整が大きいと思いますが、最近はCSSで相当なことが
できるようになってきたのでそれ以外でいうと
ユーザーの入力補助やバリデート、およびajaxなど特殊なデータのやり取りなど
インタラクティブな処理が特徴的です
またグラフの表示などにも活用できますね

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/05 09:46

    ありがとうございます!!

    キャンセル

+1

おみくじは時間ごとに書き換え、おみくじはランダムな数字をつくるなどができるようになるので、役に立つ立たないではなくそこからどう展開していくかの問題かと思います。ストップウォッチやおみくじはわかりやすい例としてあげられてるのかと。

初心者必見!JavaScriptとは?最新の動向まで細かく解説! | Tech2GO
JavaScriptでできることとその事例まとめ【WEBサイト/WEBアプリ/スマホアプリ/ゲーム】 | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/05 10:04

    そうですね。おみくじやストップウォッチは「わかりやすい例」とは認識していました。
    ただ、ランダムな数字を発生させ企業などのページで具体的にどう展開すれば良いのか思いつきませんでした。
    ご意見ありがとうございます!

    キャンセル

+1

定番は下記です。

  • モーダル
  • カルーセル
  • スムーズスクロール
  • アコーディオンメニュー
  • パララックス

下記のように、JSを利用した機能を利用しているサイトをまとめたページがありますので、見てみると良いと思います。
上記の単語で調べてみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/05 13:00

    ありがとうございました!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17479questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。