JavaScript入門 – エンジニアの入り口 https://eng-entrance.com 「エンジニアの入り口」は、プログラミング入門やエンジニアリング入門の知識が満載の初心者のための勉強サイトです。プログラミングやサーバ、ネットワークの基礎知識や勉強方法を習得できます。 Tue, 01 Aug 2023 07:26:58 +0000 ja hourly 1 https://wordpress.org/?v=5.2.19 【超初心者向け】JavaScriptの基本的な書き方講座 https://eng-entrance.com/javascript-write https://eng-entrance.com/javascript-write#comments Fri, 29 Jul 2016 02:41:36 +0000 http://eng-entrance.com/?p=1969 JavaScriptはHTMLの上で動いていく。

なので、HTMLファイルに直接書き込んだり、外のJavaScriptファイルをHTMLファイルから見に行くことによって動かす形になる。

このページではJavaScriptの基本的な書き方をお伝えしよう。初心者の方は参考にしてほしい。

JavaScriptの書き方

JavaScriptはHTMLを操作できるプログラミング言語だ。

他にも色々とできるが、基本的に「HTMLを色々と動かせる！」くらいに考えておけばOKだろう。

HTMLとJavaScriptは異なるプログラミング言語だ。だから、この2つを一緒にするには特定のルールに従ってプログラミングコードを書くことが必要になる。

JavaScriptコードの書き方には、大きく分けて以下の2つがある。

  • 直接定義
  • 外部定義

これらは書きたいプログラムの目的や種類によって選ばれる。どちらの方法でも対処できるように書き方を整理しておこう。

JavaScriptの記述方法1: 直接定義

直接定義とは、HTMLファイルに直接JavaScriptのコードを書く方法のことをいう。イメージ的にそのままだ。

javascriptの書き方

要するに１ファイル目も２ファイル目も、３ファイル目にもJavaScriptを書いていく方法だ。

ルールはいたってシンプルでHTMLファイルの中に<script>タグを挿入し、そこにコードを書くだけでよい。

<script>
    // ここにJavaScriptコードを書く
</script>

HTMLファイルの中にJavaScriptを直接定義する最も基本的なサンプルは、以下の通りだ。実際に書いてみよう。

ファイル名はなんでもいいが、最後に「.html」をつけてHTMLファイルにしておく。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScriptの書き方1: 直接定義</title>
</head>
<body>
<!-- ここにHTMLを書くする -->
<script>
    // ここにJavaScriptを書く
    document.write('直接定義したJavaScriptからの書き込み');
</script>
</body>
</html>

このソースコードをブラウザで実行すると以下のようになる。

直接定義したJavaScriptからの書き込み

<script>タグの定義位置

サンプルの<script>タグが挿入されている位置に注目してほしい。

いくつか流儀があり、実は決まった位置がない。

最近の流行りは<body>のエンドタグのすぐ上、つまりHTMLの最後にコードを書く方法となっている。

が、<head>タグの中に入っていることも多いので、どちらかで書くといいだろう。

どちらがいいかはもう少しJavaScriptについて理解してからで十分だ。まずは気にせず行こう。

JavaScriptのコードの書き方2: 外部定義

外部定義とは、HTMLには「このファイルを読み込む！」という宣言だけを書き、JavaScriptのコード自体は外部ファイルに分割して書く方法のことをいう。

同じJavaScriptを何度も書く必要がないし、変更があったときにJavaScriptファイルだけ編集すればいいので楽だ。

外部定義したJavaScriptからの書き込み

外部定義はscriptタグにsrc属性を指定してコードを書くだけでよい。my-sample.jsというJavaScriptファイルを用意したら

<script src="my-sample.js"></script>

とHTMLファイルに書けば、読み込んだことになる。""の中にJavaScriptのファイル名を書けば言い訳だ。

では、実際に書いてみよう。

 

HTMLファイルの中にJavaScriptを外部定義する基本的なサンプルは、以下の通りだ。

HTMLファイル

ファイル名はなんでもいいが、最後に「.html」をつけてHTMLファイルにしておく。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Javascriptの書き方2: 外部定義</title>
</head>
<body>
<!-- ここにHTMLを書く -->
<script src="my-sample.js"></script>
</body>
</html>

JavaScriptファイル

こちらはmy-sample.jsという名前をつけよう。

document.write('外部定義したJavaScriptからの書き込み');

このソースコードを用意しておいて、HTMLファイルをダブルクリックしてみよう。

外部サーバーからのJavaScript外部定義ファイルの読み込み

ここで覚えておきたいのは、src属性は自分で用意したサーバー内のファイルだけではなく、世界中にあるサーバーのファイルURLを指定することができるということだ。

具体的なサンプルとして、JavaScriptライブラリであるjQueryを公式配信サーバーから直接自分のHTMLファイルに読み込む例を挙げておく。

ライブラリというのはまだわからないと思うが、便利な道具箱のようなものだと思って欲しい。これを読み込んでおくと、JavaScriptを簡単に書けたりする。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScriptの書き方2: 外部定義</title>
</head>
<body>
<!-- ここにHTMLを書く -->
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="my-sample.js"></script>
</body>
</html>

注意: 外部ファイルを自サーバー以外から読み込む際は、セキュリティリスクが常に付きまとうことを意識し、特に配布元に十分注意すること

直接定義と外部定義の比較

以上みてきたようなコードの書き方の違いの他に、この2つの定義方法にはそれぞれメリットデメリットがある。

 

直接定義

外部定義

メリット

読み込みが早い

HTMLとJavaScriptが分離され再利用しやすい、管理しやすい

何度も同じJavaScriptを書かなくて済む

デメリット

HTMLとJavaScriptが混在しコードが乱雑になる、管理しにくい

ファイルが増えると、読み込みが遅くなる

使いどころ

テストまたは小規模なプロジェクト、他人と共有しないもの

大規模なプロジェクト、ライブラリなど他人と共有するもの

基本的には外部に書くことのほうが多い。なんらかの理由があるときに直接書くことが多くなる。色々なファイルで呼び出して使えたほうが便利だからだ。

これらの特徴を理解しておき、JavaScriptの効果的なコーディングを心がけよう。

まとめ

このページではJavaScripの基本的な書き方についてご紹介した。まだ何を書いているかはわからないと思うが、書く場所がわからないと何もできない。

まずはこの２つの方法があることを知ることがJavaScriptの第一歩だ。

]]> https://eng-entrance.com/javascript-write/feed 3 【初心者向け】コンソールによるJavascriptのエラー表示方法 https://eng-entrance.com/javascript-display-error https://eng-entrance.com/javascript-display-error#comments Sat, 23 Jul 2016 04:46:02 +0000 http://eng-entrance.com/?p=1878 JavaScriptは書けばすぐに動く。

反面、エラーは画面上にすぐに表示される訳ではなく、隠された場所で見る必要がある。ブラウザのコンソールで確認するのが一般的だ。

このページではJavaScriptのエラーを表示する方法と、代表的なエラーへの対処法をご紹介する。

JavaScriptを勉強し始めたばかりの方は参考にして欲しい。

JavaScriptのエラーを表示するには「コンソール」を活用しよう

JavaScriptを開発している途中、コードにエラーが発生して正常に動かないことがある。

そんな時の原因究明に役立つのが、Chromeやインターネットエクスプローラーなどのブラウザに標準搭載されている開発者ツール、その中にある「コンソール(console)」だ。

WEBブラウザのコンソールとは、ブラウザが用意しているWEB開発者向けの機能のうちの1つで、主に以下の目的に利用される。

  • プログラムの状態を確認するためのログの出力
  • プログラムで発生したエラーの表示
  • テスト目的の単純なプログラムの実行

ブラウザをインストールすればそのまま使えるので手間なく簡単だ。

対象ブラウザ

今回は、主要なモダンブラウザである以下の3ブラウザでのコンソールの出し方について解説する。

  • Google Chrome(version 51.0.2704.106)
  • Mozilla Firefox(version 47.0)
  • Microsoft Internet Explorer 11(version 11.494.10586.0)

他のブラウザでもやり方はほとんど同じなので確認してもらえればいいだろう。

また、現在ブラウザの世界シェアトップはChromeになっている。できるだけ、Chromeをインストールしておこう。

確認用のサンプルコード

コンソール上でエラーを表示するため、以下のコードを使用する。コードの内容は「タイプミスで存在しないメソッド名を呼んでしまった」場合を想定している。

メソッド名というのがわからなくても、「本当はdocument.writeと書くべきところを、document.wroteと書いてしまった」という捉え方で十分だ。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScriptでエラーを表示するには？</title>
</head>
<body>
<script>
    // JavaScriptの開始を確認する(プリントデバッグ用)
    console.log('JavaScript開始');
    // 正常系：WEBページに文字列が出力される
    document.write('これは正常なJavaScriptコードです');
    // 異常系：タイプミスでメソッド名を間違えてしまった
    document.wrote('これはエラーの発生するJavaScriptコードです');
    // エラーで止まるので、以下のメソッドは実行されることはない(プリントデバッグ用)
    console.log('JavaScript終了');
</script>
</body>
</html>

開発者ツールを開くには「F12」

各ブラウザのコンソールは「開発者ツール」の1機能として用意されている。そのため、まずは開発者ツールウィンドウを開く必要がある。

各ブラウザで開発者ツールを開く標準的なショートカットはキーボードのファンクションキー「F12」に統一されている。

F12を押して開いた開発者ツールウィンドウの中から、「コンソール」ないしは「console」タブを選択するとコンソールを開くことができる。

便利なショートカットなので覚えておこう。

各ブラウザでのコンソールの開き方

開発者ツールウィンドウの開き方さえわかれば、コンソールを開くことは容易だ。ショートカットキーを利用する他に、各ブラウザのメニューからコンソールを開く方法もあるので紹介しておく。

Google Chrome でのコンソール

右上にある「ハンバーガーメニューアイコン」をクリックする。

メニューから「その他ツール」を選択する。

メニューから「デベロッパーツール」を選択する。

chromeのコンソール画面

ブラウザの下部分に「開発者ツール」が開く。

「Console」タブを選択する。

ChromeによるJavaScriptエラー表示

コンソール内に「JavaScript開始」のログと「Uncaught TypeError: document.wrote is not a function」のエラー表示が確認できる。

画面の一番下を見て赤字になっているところがエラーだ。

Mozilla Firefox でのコンソール

右上にある「ハンバーガーメニューアイコン」をクリックする。

メニューから「開発者ツールアイコン」をクリックする。

Firefoxのコンソール画面

メニューから「Webコンソール」を選択する。

Webコンソール

ブラウザの下部分に「開発者ツール」が開く。

「コンソール」タブを選択する。

FirefoxによるJavaScriptエラー表示

コンソール内に「JavaScript開始」のログと「TypeError: document.wrote is not a function」のエラー表示が確認できる。

画面の一番下を見て赤の背景になっているところがエラーだ。

Microsoft Internet Explorer 11 でのコンソール

右上にある「歯車メニューアイコン」をクリックする。

メニューから「F12開発者ツール」を選択する。

InternetExplorerのコンソール画面表示

ブラウザの下部分に「開発者ツール」が開く。

「コンソール」タブを選択する。

開いたまま直後だと何も表示されていないので、ページをリロードする。

InternetExplorerでのJavaScriptエラー表示

コンソール内に「JavaScript開始」のログと「オブジェクトは'wrote'プロパティまたはメソッドをサポートしていません。」のエラー表示が確認できる。

画面の一番下を見て赤字になっているところがエラーだ。

JavaScriptの代表的なエラーとその対処法について

コンソールの開き方がわかったところで、代表的なJavaScriptエラーとその対処方法について解説する。

以降は、Google Chromeでの解決方法を解説したものになる。他のブラウザでも変わらないが、一応意識はしておいて頂きたい。

また、エラーによっては複雑な条件が絡み合って発生している場合もあるので、この方法で全て解決できるというわけではないことだけ、理解はしておこう。

エラーサンプル1「Uncaught SyntaxError: Invalid or unexpected token」

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScriptでのエラーサンプル1</title>
</head>
<body>
<script>
    // Uncaught SyntaxError: Invalid or unexpected token
    // 構文エラー: 不正または予期しないトークン
    document.write("This is NG);
</script>
</body>
</html>

構文エラーの一例で、document.write();の使い方が間違っているという内容だ。

本来「("...")」となっていなければならないところが「("...)」と閉じられていないことが原因となっている。

以下が、構文エラーを解決した正しいコードになる。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScriptでのエラーサンプル1</title>
</head>
<body>
<script>
    document.write("This is OK");
</script>
</body>
</html>

エラーサンプル2「Uncaught SyntaxError: Unexpected identifier」

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScriptでのエラーサンプル2</title>
</head>
<body>
<script>
    // Uncaught SyntaxError: Unexpected identifier
    // 構文エラー: 予期しない識別子
    document.write("This")document.write("is")document.write("NG")
</script>
</body>
</html>

構文エラーの一例で、こちらはJavaScriptの構文に誤りがあるという内容。

JavaScriptは行末を定義しなくてもよい言語だが、1行にたくさんのコードを書きたい場合は「;」を使って1つ1つ区切る必要がある。

以下が、構文エラーを解決した正しいコードになる。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScriptでのエラーサンプル2</title>
</head>
<body>
<script>
    document.write("This");document.write("is");document.write("OK");
</script>
</body>
</html>

エラーサンプル3「Uncaught TypeError: ***** is not a function」

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScriptでのエラーサンプル3</title>
</head>
<body>
<script>
    // Uncaught TypeError: document.wrote is not a function
    // 型エラー: document.wrote は関数ではない
    document.wrote("This is NG");
</script>
</body>
</html>

型エラーの一例で「document.wrote();」というメソッド名は存在しないという内容。

JavaScriptで定義されている正しいメソッド名に変更する必要がある。

以下が、型エラーを解決した正しいコードになる。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScriptでのエラーサンプル3</title>
</head>
<body>
<script>
    document.write("This is OK");
</script>
</body>
</html>

エラーサンプル4「Uncaught ReferenceError: ***** is not defined」

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScriptでのエラーサンプル4</title>
</head>
<body>
<script>
    // Uncaught ReferenceError: ghostValue is not defined
    // 参照エラー: ghostValue は定義されていない
    if (ghostValue) {
        document.write("This is NG");
    }
</script>
</body>
</html>

参照エラーの一例で「ghostValue」というオブジェクトは定義されていないという内容。

JavaScriptは事前に変数を宣言する必要のない言語だが、if文などで評価するオブジェクトは事前に宣言しておく必要がある。

以下が、参照エラーを解決した正しいコードになる。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScriptでのエラーサンプル4</title>
</head>
<body>
<script>
    var ghostValue = true;
    if (ghostValue) {
        document.write("This is OK");
    }
</script>
</body>
</html>

エラーが見つかったときの対処法

プログラミングはエラーとの戦いだ。「テスト+バグを見つけて消す」ことの方が、コーディングそのものよりも時間がかかることが多い。

エラーが見つかったら、まずはその行をJavaScriptコードを確認して、簡単なミスではないかを見てみる。

まったくわからなければ、エラーメッセージをGoogleの検索窓に貼り付けて検索をしてみよう。何でエラーが起きているかの大体の方向性がわかるはずだ。

また、デバッグツールを使ってデバッグしつつ、解決策を探すようにしよう。その方法については、別ページでご紹介できるように準備中だ。しばしお待ちを。

まとめ

JavaScriptのエラー表示方法についてまとめたがいかがだっただろうか？

プログラミングをする上で、エラーの発見とそれへの対処法はとても大事なスキルだ。まずは表示するだけでも、すぐに使えるように各ブラウザで知っておこう。

 

]]> https://eng-entrance.com/javascript-display-error/feed 2 JavaScript初心者でもすぐわかる！DOMとは何か？ https://eng-entrance.com/what-is-dom https://eng-entrance.com/what-is-dom#comments Sat, 16 Jul 2016 04:08:56 +0000 http://eng-entrance.com/?p=1705 DOMとはJavaScriptでhtmlの要素を操作するための仕組みのことだ。

JavaScriptを扱っていく上で、絶対に知らないといけない仕組みのひとつだろう。

このページではDOMの仕組みと使い方について初心者の方でもわかるように解説した。

DOMとは何か？

DOMとは「Document Object Model」の略だ。直訳すると、「ドキュメントを物として扱うモデル」になる。プログラムからHTMLやXMLを自由に操作するための仕組みだ。

例えばブラウザに表示される文字の色を変更したり、大きくしたりと、Webページの見た目をプログラムで処理をしたい場合があるだろう、しかし何もしていない状態のHTMLファイルではJavaScriptから手を出す事が出来ない。そこでファイルの特定の部分に目印を付けて「この部分」に「こういう事をしたい」という処理を可能にするための取り決めがDOMである。

DOMは以下のような特徴をもっている。

  • ツリー構造とも呼ばれる階層構造を取る
  • それぞれノードという言葉で説明される
  • WEBページとJavaScriptなどのプログラミング言語とを繋ぐ

それでは、DOMの特徴について1つ1つ詳細に見ていこう。

 

DOMは「階層構造」を取る

階層構造とは組織図のようなものだ。今回は高校の生徒会の組織図を例に出してみる。

DOMを簡単に説明

生徒会の組織図は、上の図にある通り生徒会長を頂点として、下に何人かの委員長と、その更に下に何人かの委員が所属して階層構造が作られている。

次に、HTMLの階層構造を見てみよう。

htmlのDOM構造

<body>を頂点として、下にいくつかの<section>と、そのさらに下にいくつかの<p>で構成されている。

これはHTMLで階層構造を構築した場合の一例だ。この階層構造を定義しているものがDOMと呼ばれる仕組みを使っていることになる。 

各要素は「ノード」という単語を用いて表現される

DOMで必ず出てくる用語「ノード」について補足しておく。

  • ノード
  • 子ノード
  • 親ノード
  • 兄弟姉妹ノード

ノードについて

上の図にあるように、ノードとは各要素(HTMLではエレメントやタグという)自体のことを表す。

特定のノードを基準としたときに、その上にあるノードを「親:parent」ノードと表現し、その下にあるノードを「子:childまたはchildren」ノードと表現する。

また同一階層にあるノードのことを「兄弟姉妹:siblings」ノードと表現する。

例えば「そのタグの子ノード全体を取得して、その親ノードから削除する」のような使い方をする。 

DOMは「WEBページとプログラミング言語を繋ぐ役割を持つ」

それでは、実際のソースコードを見てみよう。DOMに沿った記述を行ったHTMLファイルをJavaScriptから操作してみる。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <title>DOMとは「WEBページとプログラミング言語を繋ぐ役割を持つ」</title>
    <style>
        #section-1 {
            background-color: #C8E6C9;
        }
        #section-2 {
            background-color: #FFF9C4;
        }
    </style>
</head>
<body>
<section id="section-1">
    <h2>セクション1</h2>
    <p>子ノード1</p>
    <p>子ノード2</p>
    <p>子ノード3</p>
</section>
<section id="section-2">
    <h2>セクション2</h2>
    <p>子ノード1</p>
    <p>子ノード2</p>
    <p>子ノード3</p>
</section>
</body>
<script>
    // ここにJavaScriptコードを書いていく
    // ...
</script>
</html>

今回使用するソースコードは、簡略化のためにHTMLとCSSとJavaScriptが全て1つのページに書いてあるものにしてある。

これをWEBブラウザで表示すると図4のような表示になる。

画面

ID名からノードを取得して、操作する

ここでは詳しく解説しないが、ID名とはタグにつける一意の名前のことだ。CSSを勉強したときや、JavaScriptの基本で既に出てきているだろう。

今回のサンプルでは「section-1」と「section-2」がID名に該当する。

ID名を指定するメソッドは以下のように定義されている。

document.getElementById(id);

idはタグについているID名だ。

これを用いて「section-2」を取得して、その文字色を赤色に変更してみよう。

document.getElementById('section-2').style.color = 'red';

このJavaScriptをブラウザで実行すると図5のようになる。

出力画面

黄色の背景に入っている(section-2およびその子ノード全体の)文字色が赤くなっているのが確認できる。 

子ノードを取得して、操作する

子ノードを指定して、操作をしてみよう。

子ノードを指定するメソッドは以下のように定義されている。

var nodeList = elementNodeReference.childNodes;

  • elementNodeReferenceは基準ノードを指している
  • nodeList は基準ノードについている子ノード全てを指す

これを用いて「section-2」の子ノードのうち2番目の子ノードの文字列を変更してみよう。

var baseElement = document.getElementById('section-2');
var section2node2 = baseElement.childNodes[5];
section2node2.innerHTML = '子ノード2は変更されました';

このJavaScriptをブラウザで実行すると図6のようになる。

画面出力

セクション2の子ノード2の文字列が変更されているのが確認できる。

補足：baseElement.childNodes[5];は2番目のノードを取得したいのになぜ「5」なのか？

ChromeブラウザのchildNodesの実装が、ノードとノードの間に「空白のノード」を差し込むものになっているため、一見奇妙な配列の添え字になっている。

例えば、Chromeブラウザで1番目のノードを取得したい場合、添え字は「3」になる。

親ノードを取得して、操作する

親ノードを指定して、操作をしてみよう。

親ノードを指定するメソッドは以下のように定義されている。

var parentNode = elementNodeReference.parentNode

  • elementNodeReference ... 基準ノード
  • parentNode           ... 基準ノードの親ノード

これを用いて「section-2」の親ノードを取得して、その親ノードの子ノード(つまりsection-2)全てを削除してみよう。

var baseElement = document.getElementById('section-2');
var parentNode = baseElement.parentNode;
parentNode.removeChild(baseElement);

このJavaScriptをブラウザで実行すると図7のようになる。

DOMによる出力

セクション2が全て消えているのが確認できる。

このように、DOMに沿った書き方で定義された「ノード」を通じてJavaScriptからHTMLを操作することができることが理解できたと思う。

これが「DOM」が「WEBページを表示する言語であるところのHTML」と「プログラミング言語であるところのJavaScript」を繋ぐ役目を持つということだ。

まとめ

JavaScriptで登場するDOMについて簡単にご紹介してきたが、いかがだっただろうか？

階層構造であること、指定したノードやその親や子などを自由にJavaScriptから操作ができることを理解しておこう。

]]> https://eng-entrance.com/what-is-dom/feed 24 JavaScriptで配列の要素数を取得する方法【Array.length】 https://eng-entrance.com/javascript-array-length https://eng-entrance.com/javascript-array-length#respond Sat, 09 Jul 2016 04:20:15 +0000 http://eng-entrance.com/?p=1516 プログラミングでは、ループ処理など配列の要素数を数えることがよくある。

このページではJavaScriptにおける配列オブジェクトの要素数を数えるプロパティ「Array.length」についてお伝えしよう。

Array.lengthの基本的な使い方

使い方はいたってシンプルだ。プロパティなので、配列オブジェクトに対して呼び出すだけでよい。

配列オブジェクト.length

例えば、配列animalsの要素数を知りたければ次のようにすればいい。

animals.length

実際のコードを見てみよう。

var animals = ['ネズミ', 'ウシ', 'トラ', 'ウサギ', 'ドラゴン'];
console.log('出力結果: ' + animals);
console.log('出力結果: ' + animals.length);

array-length-001

lengthプロパティの操作

lengthプロパティを直接操作することもできる。

lengthプロパティを減らす

プロパティの数値を減らすと、配列要素が削除される。このとき削除された値は参照することができなくなる。

配列オブジェクト.length = 配列数

var animals = ['ネズミ', 'ウシ', 'トラ', 'ウサギ', 'ドラゴン'];
animals.length = 3;
console.log('出力結果: ' + animals); 
console.log('出力結果: ' + animals.length);
console.log('出力結果: ' + animals[4]);

array-length-002

lengthプロパティを増やす

反対にプロパティの数値を増やすと、配列要素が追加される。このとき追加された値は「undefined」になる。

var animals = ['ネズミ', 'ウシ', 'トラ', 'ウサギ', 'ドラゴン'];
animals.length = 12;
console.log('出力結果: ' + animals);
console.log('出力結果: ' + animals.length);
console.log('出力結果: ' + animals[10]);

array-length-003

lengthを指定するときの注意

「Array.length」プロパティは、プラスの値しかとることができない。マイナスの値を指定してしまうと、シンタックスエラーとなるので気をつけよう。

var animals = ['ネズミ', 'ウシ', 'トラ', 'ウサギ', 'ドラゴン'];
animals.length = -1;
console.log('出力結果: ' + animals);

array-length-004

まとめ

JavaScriptにおいて配列の要素数を数えたい場合は「Array.length」を利用する。基本的なプロパティで頻繁に使うことになるので覚えておこう。

]]> https://eng-entrance.com/javascript-array-length/feed 0 初心者向け！3分で理解するNode.jsとは何か? https://eng-entrance.com/what-is-nodejs https://eng-entrance.com/what-is-nodejs#comments Tue, 14 Jun 2016 10:58:25 +0000 http://eng-entrance.com/?p=979 Node.jsはサーバサイドで動くJavaScriptだ。

クライアント側とサーバー側を同じJavaScriptで書けるメリットは大きい。また、パフォーマンス向上に役立つ場合があることから近年注目を浴びている。

JavaScriptを知っている人であれば、「サーバサイドで動く？ え？」という気持ちになるだろう。このページでは難しいことを極力なくしてNode.jsとは何かを初心者の方向けに解説した。

3分間で概要を押さえられるはずだ。

Node.jsとは？

JavaScriptを簡単に解説

JavaScriptはブラウザ上で動くために開発されたプログラミング言語だ。ブラウザ上で、ページに動きを追加するのがメインのお仕事である。

  • クリックすると写真が大きくなったり
  • メイン画像が定期的に横にスライドしたり
  • ポップアップで注意が出たり

こういった動きはJavaScriptでできている。

Node.jsとは？

実は、JavaScriptはブラウザ上だけではなく、サーバサイドでも動く。PHPやJavaなどと同じような使い方ができるということだ。

サーバサイドJavaScriptと呼ばれるが、その中でも代表的なのがNode.jsだ。現状は、他にそこまで有名なものもないので、「Node.js = サーバサイドJavaScript」だと認識しておけばいいだろう。

MicrosoftやYahoo!などITの大手企業がNode.jsを推薦している。

node.jsへの推薦

なぜサーバサイドでJavaScript？

これほど注目を浴びている理由を端的にお伝えしよう。

「クライアントもサーバサイドも同じ言語で書けたら楽じゃない？」

これが最大の理由だ。

近年、JavaScriptがWebの表舞台のど真ん中に立つようになった。Flashが姿を消し、パソコンの性能が年々上昇しているのがその理由だ。リッチなサイトやWebサービスがどんどん登場している。

サーバサイドがよくわからないWebデザイナーの人たちも、JavaScriptは触らざるを得なくなっており、「JavaScriptならやったことある！」という状態になっている。

だからこそ、サーバサイドプログラムもJavaScriptで書けると言われると、「なにそれ魅力的ですね」となり脚光を浴びているわけだ。

JavaScriptでサーバサイドもクライアントサイドも書けたら効率的だ。JavaScriptを書けるエンジニアだけを集めたらいい。

他にも色々と理由はあるが、注目を浴びているメインの理由はここにあるだろう。Yahoo!のNode.jsに対する推薦コメントを見てみると、それがうかがえる。

Node.jsは Manhattan (Yahoo!のPaaS) の中核です。一つの言語を使って一つのコードベースを構築することを可能にします - それは開発者にとってのパラダイスです。

Renaud Waldura

では実際にそれほど便利に使えるのか？

残念ながら夢のツールという訳ではない。WebデザイナーがNode.jsを使いこなしている姿を想像するのも正直難しい。結構、難しいと思ってほしい。

使い勝手よく使えるシチュエーションがあるというイメージだ。

Node.jsでできること

正直、まずはここまでの理解でも十分だ。

ここから先は詳細に入っていくが、読み流してほしい。初心者の方が全てを理解するのは大変だろう。

PHPなどとはまったく違う

サーバサイドで動くというとPHPなどと一緒だと思われたかもしれないが、実はまったく違う。

そもそもNode.jsがサーバサイドで動くプログラムという説明自体が正確ではない。より正確に言うと、Node.jsはサーバサイドでJavaScriptを実行できるようにしてくれるものだ。プラットフォームという表現が正しい。

Node.js

PHPに対するWebサーバのApache的な存在のようにも思えるが、Node.jsはサーバも構築できるし、アプリケーションプログラムも動かせる。

Node.jsが使える場所：リアルタイムWeb

例えばリアルタイムWebなどの分野はNode.jsがとても強い。

リアルタイムWebとは、リアルタイムな反応が必要なWebの分野のことだ。FacebookのメッセージやGoogleスプレッドシートなどがわかりやすい。LINE、Twitter、instagram、snapchat、Paypalなどもリアルタイム性が高い例だ。各種チャットツールもいい例だろう。

しかし、例えばLAMP開発環境でチャットアプリケーション開発することは、簡単ではない。

  • webブラウザとWebサーバ側が常時接続すること
  • データを保存し続け、Webブラウザ側に表示し続ける必要があること

これらの問題の為に、ユーザーがチャット画面を見るまでに必要以上の時間がかかってしまっていた。

Node.jsでは「新しい情報が来た！」と知らせてくれる機能を割と簡単に実装できる。お知らせが来たら、それを反映すればいい。チャットサービスなどがすんなりと作れる。

Node.jsが使える場所：多数のアクセスがある場所

Node.jsの第一目標は次のようになっている。

スケーラブルなネットワーク・プログラムを作成するための簡単な方法を提供すること

スケーラブルというのは拡張可能という意味だ。

JavaやPHPのようなプログラムでは、接続ごとに新しいスレッドが作られる。8GBのRAMで計算すると、最大ユーザー数は5000名以下しかアクセスができなくなる。これを増やそうと思ったら、コンピュータを増やすしかない。

Node.jsはこの問題を解決する数少ないプログラミング言語だ。シングルスレッドで非同期処理を行い、この問題に対応できる。（意味がわからなくても構わない。雰囲気だけ掴もう）

ただし、単純な処理以外にはそこまで強いイメージもない。一概に速度が速いとは言えないところがまた難しい。

Node.jsを使うときの注意点

色々とお伝えしてきたが、Node.jsは小規模で機動性の高いWebアプリケーションを使うのが無難だろう。特に、リアルタイム性が必要なアプリには最適だ。

アクセス多数問題は実際には、データベース側での対応でどうにか出来る側面も強い。大手企業での導入事例も多数あるが、まずは小規模アプリケーションで試すことをオススメする。

まとめ

Node.jsとは、について簡単にまとめてきたがいかがだっただろうか？

Node.jsはただサーバサイドでJavaScriptが動くというだけではなく、これまでのプログラミング言語とは違った特徴を持っている興味深い言語だ。

興味が出たら、ぜひインストールし、利用してみてほしい。

]]> https://eng-entrance.com/what-is-nodejs/feed 21 知っておきたい！人気JavaScriptフレームワーク10選 https://eng-entrance.com/javascript-framework https://eng-entrance.com/javascript-framework#comments Fri, 03 Jun 2016 02:59:15 +0000 http://eng-entrance.com/?p=661 JavaScriptでフレームワークを使うという発想は、以前にはあまりなかった。

JavaScriptはライブラリさえあれば十分に機能していたからだ。

しかし、Webアプリケーションが複雑になるにつれてJavaScriptフレームワークも一般的になりつつある。

現在注目を集めているJavaScriptフレームワークに、どのようなものがあるかを今からご紹介していく。

色々なフレームワークがここ数年で登場してきており、それぞれ特徴が大きく違っている。

今人気のJavaScriptフレームワークを知ることで、学習や構築をはじめる際の参考にして頂ければ幸いだ。

JavaScriptフレームワークその1 AngularJS

Angular.js

概要

AngularJSは、もっとも有名なJavaScriptフレームワークのひとつだ。

エンタープライズ系(企業向けのシステムを作る企業の事)のフレームワークとして人気が高く、多くの複雑なWebアプリケーションを開発するために使われている。

例えば、Apple、PayPal、Google、Domino’s Pizza、Ryanairといった誰もが知っている様々な有名企業が、AngularJSというJavaScriptフレームワークを用いて開発を行っている。

AngularJSの発信元はGoogleだ。Googleとコミュニティによって開発されているオープンソースのフレームワークになる。そのため信頼度が高い。反面、バージョンアップの間隔も早く、まったく別物になったりもする。

AngularJSはWebブラウザ上で使われるWebアプリケーションの開発にMVCアーキテクチャを取り入れることを目的として開発された。正確にはMVW（Model・View・Whatever=なんでも！）と呼ばれているが、要するに機能分化を意識して作られている。

主な機能

AngularJSはリッチなフレームワークだ。これさえあれば何もいらない、というとこを目指しているように見える。率直に言って、AngularJSを入れておけば、必要な機能の大半はまかなえる。

  • テンプレートエンジン
  • モデル/ビュー間での値の変更をお互いに反映させる双方向データバインディング
  • URLに応じてテンプレートを切り替えるルーティング
  • ビューに出力するデータを加工するフィルター
  • 非同期通信のサポート
  • セキィリティ対策

などの機能がそろっている。

AngularJSの特徴として上げられるのが「HTML拡張」だ。

本来であるなら、JavaScriptでコードを書いていきながら、一つ一つHTMLタグの動作を指定していく必要があるのだが、この「HTML拡張」は「HTMLタグ」に対して新しい振る舞いや、機能、役割りを与える仕組みだ。

また、「双方向データバインディング」も便利である。簡単に言えばユーザによって入力されたデータを自動的に変更、保存、反映してくれる機能の事である。

データの更新はとても面倒な作業だが、この機能によってより少ないコードの記述でWebサービスを展開する事が可能になる。

他にも多数の機能が揃っており、学習コストは高いが、便利なフレームワークだ。まさしく、フルスタックと呼ばれるにふさわしいJavaScriptフレームワークになっている。

https://angularjs.org/

JavaScriptフレームワークその2 React.js

React.js

概要

React.jsはFacebookによって作られたJavaScriptフレームワークだ。最初にリリースされたのが2013年と、まだまだ新しいJavaScriptフレームワークになっている。React.jsもオープンソースとして公開されている。

使っている企業も年々増えてきているが、例えばAirbnB、Yahoo、Atlassian、Github AtomなどのIT企業で使われている。もちろんFacebookやInstagramにも用いられている。

「A JavaScript library for building user interfaces」と公式サイトにあるようにReact.jsはUIに集中したフレームワークだ。MVCのView機能だけを集中的に扱っているということになる。

主な機能

Reactの大きな特徴は、高速かつ、保守性の高いコードを書く事が出来る点だ。これに加えて、先ほども述べたが、View機能を中心として扱っているのも特徴だ。

Viewに集中することで、複雑かつ管理が難解になりがちのJavaScriptを管理しやすくしている。Angular.jsやBackbone.jsよりも大規模アプリケーションに対応しやすい。

反対に、小規模なアプリケーションであればReactを使うよりもjQueryやBackbone.jsを使ったほうがいいだろう。

React.jsはコンポーネントを定義して、それを組み合わせて画面を作る。コンポーネントとは構成要素の事だ。コンポーネントという部品を用いてWeb上に必要な機能を実装していく。

React.jsは、このコンポーネント（部品）をなるべく小さくすることにより、管理がしやすくわかりやすいJavaScriptを実現している。

旧来の既存のコードを書く手法よりも、より簡素に、わかりやすく記述する事が可能になる点がReact.jsを使うべき理由だろう。

https://facebook.github.io/react/

JavaScriptフレームワークその３ Backbone.js

backbone.js

概要

Backbone.jsは軽量なJavaScriptフレームワークとして、2010年にジェレミー・アシュカナスによってオープンソースソフトウェアの形でリリースされた。

現在ではTwitter、Pinterest、Hulu、Foursquare、Pandora Radioといったパワフルで大規模な開発を行っているWebサービスに使われている。

BackBone.jsもAngularやReact同様に有名なJavaScriptフレームワークだ。

主な機能

BackBone.jsの大きな特徴は、その制約の少なさだ。軽量なフレームワークなので、自由度の高いプログラミングが可能になる。jQueryなど既存のライブラリの力も使っているのも特徴のひとつだ。

反面、自由度が高いので、エンジニアの腕によっては見通しが悪いコードにもなりやすい。

BackBone.jsを導入してもコード量が大幅に減るという印象はなく、やはりメンテナンスのしやすさや、長期的な生産性の向上が導入のメリットになる。

初期の学習コストは少なく、JavaScriptフレームワークの概要をつかむための入り口として最適なフレームワークだ。

http://backbonejs.org/

JavaScriptフレームワークその4 Ember.js

Ember.js

概要

Ember.jsはプログラマーの生産性を高める事に焦点を当てたJavaScriptフレームワークだ。 2013年に正式にリリースされた。

Ember.jsもポピュラーなフレームワークであり、開発コアチームにはRuby on RailsやjQueryの開発に参加しているYehuda Katz氏のような優秀なプログラマーも名を連ねている。

Ember.jsもすでにお伝えしたフレームワークたちと同様、MV*モデルアーキテクチャを採用している。

AngularやBackbone、Reactと同じように、データが書き換えられると同時に、テンプレートとViewのエンジンが自動的にアップデートするようになっている。このお陰で、煩雑なコードライティングがだいぶ減る。

主な機能

軽量ではなく、リッチなフレームワーク側に位置する。BackboneよりもAngularに近く、フルスタックなフレームワークだ。そのため、学習コストは少々高い。しかし、その分、生産性が圧倒的に高くなる。

「このコードしょっちゅう書くな」というコードがあるだろう。例えば、DOMのイベントを受け取ってデータを更新して、それを表示させるなどだ。これを毎回書くのは非生産的だ。Enber.jsはこのような決まった処理をうまく扱って、代わりに行ってくれる。

ユーザインターフェースの向上など、本当に頭を絞ってやるべき業務に専念できるのが、Enber.jsのいいところだ。

http://emberjs.com/

JavaScriptフレームワークその５ jQuery

jQuery

概要

ご存知、JavaScriptの革命児jQuery。

JavaScriptフレームワークと言えるのかは大いに疑問だが、紹介せずにはいられない。jQeryはJavaScriptライブラリのデファクトスタンダードだ。多くのサービスやシステムに当然のようにしれっと入っている。

JavaScriptの記述の煩雑さを最小限に抑え、とにかく書きやすく、使いやすくした功績は大きい。Webデザイナーなどの非エンジニア系の人にも使いやすく爆発的に広まった。

簡単に導入ができるため、どんな規模のサイトにも利用できる。しかし、大規模になればなるほど管理ができなくなっていくため、AngularのようなJSフレームワークが生まれてきた経緯がある。

主な機能

  • 簡易なDOMの操作と変更
  • JavaScriptの動きをブラウザに依存させにくくする
  • 簡易なCSS操作
  • エフェクトやアニメーション
  • Ajax

などの機能が揃っている。jQueyを使ったライブラリは数多く世の中に出回っており、便利なものも多い。

UI関連でやりたいことは、一通りライブラリが揃っていると言っていいほど充実している。

若干速度が落ちる場合があるが、それも大きな問題にはならない。簡単なアプリケーションであれば、他のフレームワークよりも、素直にjQueyのみを使うのがいいだろう。

https://jquery.com/

JavaScriptフレームワークその6 Polaris

polaris

概要

ユーザーがウェブページのロードを待てる時間は年々短くなっている。「とにかく速く表示を」というのが現在のWebのひとつのキーワードだ。

例えば、Amazonでは100ミリ秒の遅延が1%もの利益を減少させると言われ、血眼になって改善を続けている。Googleもページの表示速度はユーザーへのフレンドリーさに直結すると考えており、表示速度を検索順位決定のひとつの指標にしている。

Polarisは、「ウェブページの待ち時間を短くする」ことを目的とした新しいフレームワークだ。MITが開発元で、2016年にリリースされた。オープンソース化も予定されている。

主な機能

特徴は「速さ」だ。

色々なサイトで実験したところ、ページ表示速度を最大34%も高速化することに成功したとのこと。

仕組みは次の通りだ。

  • もともとWebページは画像やCSSなど色々なリソースを色々なところからかき集めてくる
  • それぞれのリソースにはさらに依存する他のリソースがあり、積み重なって時間がかかる
  • Polarisは要求に応じて、リソースの依存ツリーを事前に用意し、最適な順番でリソースを引っ張ってこられるようにする

簡単にいうと、このような理由で速くなる。

34%速くなるのはWebアプリケーションにおいて画期的だ。本番へ導入するとなると少し先になるだろうが、追いかけておきたいフレームワークだ。

http://web.mit.edu/polaris/

JavaScriptフレームワークその7 Knockout.js

knockout.js

概要

KnockoutJSは、2010年にスティーブサンダーソンとマイクロソフトの社員によってリリースされたJavaScriptフレームワークで、現在もオープンソースプロジェクトとして維持されている。

KnockoutJSライブラリは、シンプルなデータ駆動型のインターフェイスを処理するために簡単な方法を提供している。

主な機能

  • Backbone.jsほど軽くはないが、高機能
  • Angular.jsほど高機能ではないが、軽量

という立ち位置だ。

学習コストも低めなので、導入しやすい。機能がシンプルなので拡張性も高い。お陰で、すでに走っているアプリケーションへの導入もやりやすい。

データバインディングや依存トラッキングなど概ねの機能は揃っている。また、jQueryとの併用も可能で、住み分けができている。

http://knockoutjs.com/

JavaScriptフレームワークその8 Vue.js

Vue.js

概要

Vue.jsは本格的なフレームワークではなく、Viewに特化したライブラリに近い。

全体的にシンプルで学習コストが低い。Vue.jsはWebアプリケーション上で存在感を発揮するというよりは、サポートに回っている感覚だ。Angularであれば、Angularルールのもと動かないといけないが、Vue.jsは柔軟で自己主張をしない。

特徴・機能

Vue.jsは「シンプル」である事を売りにしたJavaScriptフレームワークだ。Knockout.jsと傾向はにているが、Knockout.jsよりもわかりやすくシンプルなAPIを提供している。

双方向データバインディングも行える。

もしも機能が足りないと感じた時は、Web上から好きなライブラリを選択し、機能拡張を行える汎用性も持っている。

サイトもシンプルでわかりやすく好ましい。

https://jp.vuejs.org/

JavaScriptフレームワークその 9 Feathers

feathers

概要

Feahersは複雑なリアルタイムアプリを作るのに便利なフレームワークだ。

アプリはブラウザだけではなく、サーバでもネイティブでも動作する。

特徴・機能

「ミニマリスト」として宣言している通り、シンプルな構造をしている。スケーラブルでリアルタイム性が必要なアプリに使えるフレームワークだ。

プロトタイプをすぐに使えると歌っている通り、チャット系のサービスがすぐに作れる。

http://feathersjs.com/

JavaScriptフレームワークその10 Meteor.js

Meteor

概要

Meteor.jsは「簡単さ」に焦点を当てたフレームワークだ。Meteor.jsはインストールするだけでWebアプリケーションを開発するための環境構築が行われる。

他のJavacriptフレームワークよりも、「初心者」のために作られたものだと思っていい。楽しいフルスタックなJavaScriptフレームワークだ。

主な機能

例えば、

  • 一瞬でコードを書き始められる
  • ログインの処理が準備されており、１行でログイン処理を作れる
  • どんなデバイスにも対応できる

など初心者にとって嬉しい機能ばかりだ。

反面、Meteor.jsにすべての機能を依存してしまうため、拡張性はない。自社のアプリケーションを作るには不便な部分も多いだろう。

更新を前提としない一発アプリケーションを作るには便利なフレームワークだ。

https://www.meteor.com/

フレームワークそれぞれの使い道

AngularJSは何でも来いだが、大規模アプリケーション向きだ。

jQueryもAngularとは別の意味で何でも来いだが、これだけでいいという意味では軽いアプリケーション向きになっている。

Backbone.jsはカスタマイズして使うときに重宝される。

Ember.jsとKnockout.jsは高機能なフレームワークを手軽に使いたいときに使える。

React.jsは簡単にコードを書きたいときや、Viewが複雑になりそうな大規模アプリケーションに有用だ。

その他はそれぞれある分野に特化されたフレームワークを選んでいるので、詳細を読んでみてほしい。

まとめ

JavaScriptのフレームワークを10種類ご紹介してきた。有名なもの、そうでないものも含めてご紹介したが、いかがだっただろうか？

JavaScriptフレームワークの導入は積極的に行われているとはまだまだ言い難い。しかし、必ず近い将来JavaScriptはフレームワークを使うのが普通という状態になる。

AngularやReactなど有名どころは、とりあえず一度は触ってみて、導入を検討してみてはいかがだろうか？

]]> https://eng-entrance.com/javascript-framework/feed 2 【ざっくりわかる！】JavaScriptでできること15選 まとめてみた https://eng-entrance.com/javascript-can-do https://eng-entrance.com/javascript-can-do#comments Wed, 01 Jun 2016 11:47:59 +0000 http://eng-entrance.com/?p=616 JavaScriptはWebサービスやWebサイトで使われるプログラミング言語だ。

主に動きのあるユーザーの画面を作るときに使われる。カーソルを当てるとメニューが開いたり、ボタンをクリックすると動き出すページには基本的にJavaScriptが使われている。

しかし、実はJavaScriptでできることはそれだけではない。様々な分野で活躍するプログラミング言語だ。

このページではJavaScriptでできることを初心者の方向けにまとめてみた。JavaScriptに関心がある方は参考にしてみてほしい。

JavaScriptというプログラミング言語の特徴とは？

できることを紹介する前に、JavaScriptの特徴を見ておこう。

JavaScriptとはInternet ExplorerやChromeなど、インターネットを見るブラウザというソフトの上で動くプログラミング言語だ。

画像が横に動くスライダーや、マウスの動きによるアニメーションなどはJavaScriptで作られている。一部CSSというデザイン要素だけでできるようになってきたが、基本的に初心者の方はJavaScriptで全部やっていると思っておいた方がわかりやすくていいだろう。

名前Javaと付いているが、Java言語とは別物で関連性も薄い。

日本語さえわかればわかる！JavaとJavaScriptの違い

JavaScriptでできることまとめ（ユーザー画面編）

それでは早速JavaScriptでできることを見ていこう。まずはユーザー画面でできることをご紹介する。

できることその１　ポップアップウィンドウ

JavaScriptを学習し出して、多くの場合、最初に教わるのがポップアップウィンドウだ。注意を促す場合に用いられる。例えば、「削除したファイルは元に戻せません」などのような注意だ。

javascriptポップアップ

ブラウザに入っている基本的なものだけだとこのような形になるが、デザインをつけることも可能だ。その方が、わかりやすく表現できる。

javascriptポップアップ２

JavaScriptはページを移動しない状態で確認ができるほとんど唯一の手段だ。こういった注意警告系のポップアップは重宝され、とてもよく使われている。 

できることその２　Ajax

Ajaxという言葉はIT業界にいると、必ず何度も耳にする言葉だ。Ajaxとは、ページを移動しなくてもデータを取得できたり、表示したりできる機能だと思っていただければいい。JavaScriptを使って行う技術だ。

Ajaxを使ったページで一番驚きを持って迎えられたのが、ご存知Google Mapである。

中の地図を自由に動かせること自体が画期的だった。Ajaxという言葉自体もGoogle Mapによって広がっている。

今では色々なWebサービスで使われている技術だ。

できることその３　サイトの利便性アップ

サイトの利便性を上げるためにJavaScriptで色々とできることがある。

例えば、情報量が大きくなりすぎてしまったときにタブでまとめることができる。

javascript タブ

メニューにカーソルを合わせると、詳細メニューが表示されるのは良く見る機能だろう。こちらもJavaScriptだ。

javascript メニュー

できることその４　サイトをブラッシュアップできる

JavaScriptを使うことでサイトのUIをブラッシュアップすることができる。

例えば、よくあるのがスライダーだ。

javascript スライダー

http://www.apple.com/jp/

Appleのサイトでも用いられているが、メイン画像が横にスライドして切り替わっていく。

このようにデザイン品質を上げることも、JavaScriptを用いるとできる。他にもゆっくり消えて、別の画像に変わるなど様々な表現が可能だ。

楽しくなって、あまり使いすぎると美しさのないサイトになるので、適度に活用しよう。

できることその５　カウントダウンタイマーが作れる

現在時刻を取得したり、そこから計算をすることもできるため、カウントダウンタイマーを作ることができる。

javascript カウントダウンタイマー

https://yyengine.jp/jquery-yycountdown/

JavaScriptらしい「できること」だ。

できることその６　ソートや検索機能も作れる

データが羅列された表を用意したとしよう。データが並んでいるなら、並び替えや検索、ページ分割機能があるとより便利だ。

しかし、これをプログラムで組むとなると、そこそこに厄介（面倒）だ。JavaScriptを使うことで手軽に表のソートや検索機能を使うことができる。

ゼロから書くのは大変なので、Datatablesというライブラリを使う。とても便利で美しいライブラリだ。

javascript ソート

https://datatables.net/

できることその７　文字を爆発させることができる

これはとても楽しいライブラリだ。下の画面のどこかをクリックしてみてほしい。文字が爆発するのがわかるはずだ。

http://fontbomb.ilex.ca/

fontBombというライブラリ（追加機能）を利用している。作った方の発想が素晴らしい。

できることその８ お絵かきツールが作れる

canvasという新し目の機能とJavaScriptを組み合わせると図形に関して様々なことができるようになっている。例えば、お絵かきソフトをや図形の描画もすることができる。

javascript お絵かき

http://caimansys.com/painter/

できることその９　 リアルタイムで動くグラフ

株価などのチャートは常に動いているが、JavaScriptを使うとそれを表現することも可能だ。

javascript chart

静止画を載せているが、このグラフが１秒ごとに最新版にアップされて表示させることもJavaScriptであれば可能だ。

できることその１０　 面白い動きをするサイトが作れる

次のように面白い動きをするサイトが作れる。楽しい動きをするので、リンク先でも見てみてほしい。

http://mrdoob.com/projects/chromeexperiments/ball-pool/

 

JavaScriptでできることまとめ（その他編）

ユーザ画面を動かす以外にも、様々できることがあるのがJavaScriptだ。

できることその１１　実はブラウザ以外でも動く

ブラウザで動くことばかりが強調されるJavaScriptだが、実はブラウザ以外の場所でも動かすことができる。それがNode.jsだ。

Node.jsは他のプログラミング言語と同じような場所で動かせる。

node.js

特にWebサービスを作るときに注目を浴びている。なぜなら、ブラウザで動くのもJavaScript、企業がもっているサーバと呼ばれるコンピュータでも動いているのはJavaScriptという状態にできるからだ。

  • 同じプログラミング言語を知っていれば、両方とも書くことができる
  • ブラウザとサーバのプログラムの相性がよくなる（同じ言語だから当たり前だ）

Node.jsは注目のプログラミング言語だ。

できることその１２　Webで動くゲームが作れる

Web上だけで完結できるゲームは、JavaScriptがあれば作成できてしまう。例えば、シューティングゲームやパズルゲームなどは初心者からでも勉強すればと作れてしまうだろう。

enchant.jsというJavaScriptのテンプレートがあり、これを使うとより色々なゲームが手軽に作成できる。

enchant.js

http://enchantjs.com/ja/

できることその１３　 Unityでプログラミングできる

JavaScriptでゲームを作ることができるというのは、一つ前にご紹介した。

それだけではなく、Unityというゲーム開発ソフトウェアもJavaScriptを採用している。

unity

Unityを使うと本当に様々なゲームが作れる。JavaScriptでプログラムを組めるというのはありがたい。

できることその１４　ChromeやFirefoxの拡張機能を作れる

ブラウザには拡張機能というものがあって、色々と機能を追加することができる。

プラグイン

Webブラウザでの作業が効率化されるいいツールが揃っている。これらの多くはJavaScriptで作られている。

できることその１５　 ハイブリッドアプリという形でスマホアプリが作れる

スマートフォンアプリは、通常iPhoneとAndroidで使うプログラミング言語が違う。iPhoneではSwiftという言語が使われ、AndroidではJavaが使われている。

しかし、JavaScriptを使うとハイブリッドアプリという形で、両方のスマホで使えるスマホアプリを作ることができる。これは結構便利だ。なぜなら２種類のスマホに対応する必要がなくなり、開発する時間も半分になるからだ。

ハイブリットアプリ

ハイブリッドアプリの導入が徐々に進んできており、今後も加速度的に進んでいくだろう。

まとめ

このページではJavaScriptでできることをまとめてきた。

JavaScriptはユーザにリッチな体験をしてもらうだけではなく、様々な分野で成長が見られるプログラミング言語だ。プログラミング言語人気ランキングも年々上昇している。

JavaScriptでできることに興味をもったら、ぜひ学習にチャレンジしてみてほしい。

]]> https://eng-entrance.com/javascript-can-do/feed 14