Javascriptについて

スポンサーリンク
javascriptプログラミング

今回はJavascriptについてアウトプットしていきます。

間違ってたら言ってください。

スポンサーリンク

Javascriptについて

Javascriptとは

動的なウェブサイトを作るためによく使われている言語。

フロントサイド側の言語に位置する。

Javaと兄弟のように考える人が多いようだが、全く異なる。(兄弟だと思ってました)

使用される場面

・ウェブサイト上のある箇所にマウスを乗せるとプルダウンが出現

javascriptの機能

・いいね!ボタン

ブラウザがリロードされることなくボタンの表記だけが変わる。情報はデータベースに保管される。

EMCAScript

我々はjavascriptの中にあるEMCAScriptを使っていることが一般的。どうやらこれが国際規格みたい。

EMCA以外のjavascriptベースの言語もある。有名なのはNode.js

Javascriptのライブラリ、フレームワーク

簡単にいうと冗長なjavascriptの記述をもっと簡単に分かりやすくするためのもの。

これらは流行り廃りのスピードがかなり早いらしく、常に最新の情報をキャッチアップしていかなければ時代に取り残される。

jQuery

昔からある有名なライブラリ。Javascriptの記述をより簡単に書くことができる。

昔からあるのでリファレンスが多く、初心者はつまづいた時に解決しやすい。

以下に紹介する新興のライブラリ、フレームワークたちによって現在ダウントレンドにある模様。

React

facebookが開発をしたライブラリ。より早く高速なアプリケーションの実装が実現できる。

Vue.js

近年人気のJSのフレームワーク。冗長な記述を減らしたウェブアプリ。

非同期通信について

非同期通信は動作が早い

非同期通信とは、画面をリロードしなくても情報が反映されるアプリケーションの機能。

例えばメッセージを投稿するとブラウザの再読み込みがされることなく、データが更新される場面がよくあると思う。

これはjavascript/jQueryを使って実装することができる。

HTMLとAjax(非同期通信)の違いを比較する。

・HTML

レスポンスとして受け取るとブラウザの全てのHTMLを書き換える。

画面が再読み込みされる

・Ajax(非同期通信)

JSONという方法でレスポンスが行われる。これはブラウザの一部だけを更新することができる。

画面が再読み込みされない

DOMについて

DOMとはDocument Object Modelの略

DOMとはDocument Object Modelの略です。

HTMLを解析し、データを作成する仕組み。

DOMによって解析されたHTMLは階層構造のあるデータとなり、これをDOMツリーやドキュメントツリーと呼ぶ。

javascriptを使うと、DOMツリーを操作することができる。

j Queryの記述について

Javascriptのdocumentに当たるのが$。

$の後にセレクタと呼ばれるHTMLの指定方法を指定することでHTML要素が取得できる。

【よく使用するセレクタ】

  • IDセレクタ
  • クラスセレクタ
  • 要素セレクタ
  • 属性セレクタ

respond_toについて

Railsのコントローラーで使用できるrespond_toメソッドは、

「リクエストがHTMLのレスポンスを求めているのか、それともJSONのレスポンスを求めているのか」

を条件分岐してくれる。

まとめ

jQueryのライブラリを使った途端、理解もできるようになったし記述も半分くらいまで減った。

Javascriptだけだと最初は理解するのが難しいかも。

コメント