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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

解決済

5回答

1890閲覧

javascriptに関する素朴な疑問

2017js

総合スコア14

JavaScript

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

0グッド

1クリップ

投稿2017/04/05 00:34

編集2017/04/05 01:45

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

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

ベストアンサー

そもそも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 03:14

編集2017/04/06 00:59
miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

2017js

2017/04/05 04:03

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

0

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

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

投稿2017/04/05 00:44

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

2017js

2017/04/05 00:46

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

0

定番は下記です。

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

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

投稿2017/04/05 03:41

yamato_hikawa

総合スコア2092

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

2017js

2017/04/05 04:00

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

0

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

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

投稿2017/04/05 00:57

toutou

総合スコア2050

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

2017js

2017/04/05 01:04

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

0

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

投稿2017/04/05 00:42

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

2017js

2017/04/05 00:46

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問