プログラミング | b00k.jp-積み上げ式読書ノート-

【Three.js】静止画面表示のサンプル

three.jsをコーディングするなら、コード補完も使えるTypeScriptでの開発が断然おすすめ！
【Three.js】TypeScript+Visual Studioでコード補完しながら開発するための環境構築手順

単純なオブジェクトをレンダリングするサンプル。
アニメーションなどはなし。

デモ

このページはiframe対応ブラウザで表示してください。

JavaScript

function init() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xEEEEEE));
    renderer.setSize(window.innerWidth, window.innerHeight);
    var axes = new THREE.AxisHelper(20);
    scene.add(axes);
    var planeGeometry = new THREE.PlaneGeometry(60, 20);
    var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.y = 15;
    plane.position.y = 0;
    plane.position.z = 0;
    scene.add(plane);
    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
    var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    cube.position.x = -4;
    cube.position.y = 3;
    cube.position.z = 0;
    scene.add(cube);
    var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
    var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x7777ff, wireframe: true });
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
    sphere.position.x = 20;
    sphere.position.y = 4;
    sphere.position.z = 2;
    scene.add(sphere);
    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(scene.position);
    document.getElementById("WebGL-output").appendChild(renderer.domElement);
    renderer.render(scene, camera);
}
;
window.onload = init;

function init() {

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();

renderer.setClearColor(new THREE.Color(0xEEEEEE));

renderer.setSize(window.innerWidth, window.innerHeight);

var axes = new THREE.AxisHelper(20);

scene.add(axes);

var planeGeometry = new THREE.PlaneGeometry(60, 20);

var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc });

var plane = new THREE.Mesh(planeGeometry, planeMaterial);

plane.rotation.x = -0.5 * Math.PI;

plane.position.y = 15;

plane.position.y = 0;

plane.position.z = 0;

scene.add(plane);

var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);

var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

cube.position.x = -4;

cube.position.y = 3;

cube.position.z = 0;

scene.add(cube);

var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);

var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x7777ff, wireframe: true });

var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

sphere.position.x = 20;

sphere.position.y = 4;

sphere.position.z = 2;

scene.add(sphere);

camera.position.x = -30;

camera.position.y = 40;

camera.position.z = 30;

camera.lookAt(scene.position);

document.getElementById("WebGL-output").appendChild(renderer.domElement);

renderer.render(scene, camera);

}

;

window.onload = init;

TypeScript

/// <reference path="three.d.ts" />

function init() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xEEEEEE));
    renderer.setSize(window.innerWidth, window.innerHeight);

    var axes = new THREE.AxisHelper(20);
    scene.add(axes);

    var planeGeometry = new THREE.PlaneGeometry(60, 20);
    var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc });
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);

    plane.rotation.x = -0.5 * Math.PI;
    plane.position.y = 15;
    plane.position.y = 0;
    plane.position.z = 0;

    scene.add(plane);

    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
    var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    cube.position.x = -4;
    cube.position.y = 3;
    cube.position.z = 0;

    scene.add(cube);

    var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
    var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x7777ff, wireframe: true });
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

    sphere.position.x = 20;
    sphere.position.y = 4;
    sphere.position.z = 2;

    scene.add(sphere);
    
    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(scene.position);

    document.getElementById("WebGL-output").appendChild(renderer.domElement);
    renderer.render(scene, camera);
};
window.onload = init;

/// <reference path="three.d.ts" />

function init() {

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();

renderer.setClearColor(new THREE.Color(0xEEEEEE));

renderer.setSize(window.innerWidth, window.innerHeight);

var axes = new THREE.AxisHelper(20);

scene.add(axes);

var planeGeometry = new THREE.PlaneGeometry(60, 20);

var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc });

var plane = new THREE.Mesh(planeGeometry, planeMaterial);

plane.rotation.x = -0.5 * Math.PI;

plane.position.y = 15;

plane.position.y = 0;

plane.position.z = 0;

scene.add(plane);

var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);

var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });

var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

cube.position.x = -4;

cube.position.y = 3;

cube.position.z = 0;

scene.add(cube);

var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);

var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x7777ff, wireframe: true });

var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

sphere.position.x = 20;

sphere.position.y = 4;

sphere.position.z = 2;

scene.add(sphere);

camera.position.x = -30;

camera.position.y = 40;

camera.position.z = 30;

camera.lookAt(scene.position);

document.getElementById("WebGL-output").appendChild(renderer.domElement);

renderer.render(scene, camera);

};

window.onload = init;

【Three.js】TypeScript+Visual Studioでコード補完しながら開発するための環境構築手順

three.jsに限った話ではないが、開発をする上ではできればコード補完(インテリセンス)を効かせたい。
開発効率も上がるし、タイプミス、それに伴うバグを防ぐことができる。
three.jsでもTypeScriptを使うことによって、コード補完を効かせることが可能。
そのためには、ライブラリのオブジェクトの型を定義した型定義ファイル(.d.ts)をソリューションに追加する必要がある。
以下にTypeScriptによるコード補完を使用したthree.js開発環境の構築手順を記す。

型定義ファイルのインポート

TypeScriptからthree.jsのライブラリを参照するためには、型定義ファイルと呼ばれるファイルが必要。
これは、ライブラリ(ここではthree.js)で定義されているオブジェクトの定義情報を記載したファイルのこと。
TypeScriptからこの情報を参照することで、型判定やコード補完を効かせることができるようになる。

型定義ファイルは、GitHub上の「DefinitelyTyped」と呼ばれるリポジトリに配置されている。
上記はコミュニティ主導のリポジトリではあるが、実質TypeScriptの公式リポジトリである。
TypeScriptから参照したいライブラリがある場合、このDefinitelyTypedリポジトリからファイルをCloneやダウンロードすればよい。

ただし、VisualStudioを使って開発を行う場合はNuGetを使用して、もっと簡単に型定義ファイルの設定ができる。
ソリューションエクスプローラーからソリューションを選択し、「右クリック＞NuGetパッケージの管理」などからNuGetパッケージマネジャーを起動する。
NuGetパッケージマネジャーの検索バーに「threejs DefinitelyTyped」と入力し、「threejs.TypeScript.DefinitelyTyped」をインストール。

ソリューション直下に、Scrripts＞typings＞threejsのようにフォルダが作成され、配下に型定義ファイル(d.ts)が配置されていればOK。

TypeScriptから型定義ファイルを参照する

NuGetから型定義ファイルをダウンロードしただけでは、TypeScriptから参照することはできない。

TypeScriptのファイルに以下のように記述することで、型定義ファイルを参照することができるようになる。

/// <reference path="scripts/typings/jquery/jquery.d.ts" />

1	/// <reference path="scripts/typings/jquery/jquery.d.ts" />

また、直接記述する以外にも、参照元TypeScriptファイルに型定義ファイルをドラッグ＆ドロップすることでも可能。
こちらの方が記述間違いなども起こらないので、特別な理由がない場合は、こちらを推奨。

また、NuGetからインストールしただけだとビルドが通らないので、以下を実施する必要がある。
three.d.tsをソリューションの直下にコピー、その後TypeScriptに型定義の参照設定の記述をする。
Scripts配下のフォルダーをソリューションから除外する。

three.js本体をソリューションに追加

以下からthree.js本体をダウンロード。
https://threejs.org/

ダウンロード、展開すると大量のファイルがあるが、ひとまず必要なのは、build配下のthree.jsやthree.jsなどのファイルのみ。
それらのファイルをソリューションに追加する。
(ソリューションを右クリック＞追加＞既存の項目から上のファイルを選択)

最終的なソリューション構成は以下のような感じになる。

これでTypeScriptからコード補完を使用しながらthree.jsのコーディングが可能になる。

参考

Visual StudioとTypeScriptでJavaScriptライブラリを活用する – Build Insider
[TypeScript][WebGL][Three.js] 3D で遊ぼう～C#er も TypeScript で楽々 WebGL～ ― 準備編 (プログラミング C# – 翔ソフトウェア (Sho’s))

【jQuery】Class属性の追加、削除、切り替えのサンプル

jQueryでは直接インラインでスタイルを指定することができるが、これを多用してしまうとどこでスタイルを設定しているのか、スタイルを確認するためにJavaScriptのコードを読まないといけないといった問題が起きる。
そのため、スタイルはCSSで設定し、Class属性を着脱、切り替えることでスタイルを適用する方が良い。
以下は、スタイルを切り替える際のサンプル。

■デモ

アイテム１

■HTML

<style type="text/css">
    .sample {
        background-color : yellow;
        border : solid 2px Lime;
        color : red;
    }
</style>
<ul id="list1">
    <li id="item1">アイテム１</li>
</ul>
<br>
<input type="button" id="button-add" value="classを追加"/><br>
<input type="button" id="button-reset" value="classを削除"/><br>
<input type="button" id="button-toggle" value="classのON/OFFを切り替え"/><br>

.sample {

background-color : yellow;

border : solid 2px Lime;

color : red;

}

</style>

</ul>

<br>

■JavaScript

jQuery(function($) {

  //classを追加
  $('#button-add').click(function(e) {
    $('ul li').addClass('sample');
  });

  //classを削除
  $('#button-reset').click(function(e) {
    $('#list1 li').removeClass('sample');
  });
  
  //classのon/offを切り替え
  $('#button-toggle').click(function(e) {
    $('#list1 li').toggleClass('sample');
  });
})

jQuery(function($) {

//classを追加

$('#button-add').click(function(e) {

$('ul li').addClass('sample');

});

//classを削除

$('#button-reset').click(function(e) {

$('#list1 li').removeClass('sample');

});

//classのon/offを切り替え

$('#button-toggle').click(function(e) {

$('#list1 li').toggleClass('sample');

});

})

【jQuery】フォトギャラリーのサンプル

jQueryを使ったフォトギャラリーのサンプル。
上の画像をクリックすると、下に拡大表示される。
(サンプルコードでは、リストにマウスオーバー時にサムネイルの色が変わるが、デモでは機能していないので注意)

■デモ

■HTML

<div class="sumbnail-List" style="clear:both;">
    <ul class="sideImgList">
        <li><img src="/wp-content/uploads/2018/09/jQuery.jpg"></li>
        <li><img src="/wp-content/uploads/2018/08/bash.jpg"></li>
        <li><img src="/wp-content/uploads/2018/06/SQLServer.jpg"></li>
        <li><img src="/wp-content/uploads/2018/06/mongoDB.jpg"></li>
        <li><img src="/wp-content/uploads/2018/06/JavaScript.jpg"></li>
        <li><img src="/wp-content/uploads/2018/05/C.png"></li>
    </ul>
</div>
<div style="clear:both;"></div>
<hr/>
<div class="mainArea">
    <img />
</div>

</ul>

</div>

<hr/>

<img />

</div>

■CSS

<style type="text/css">
        /*拡大表示エリア*/
        .mainArea {
            width : 300px !important;
        }
        .mainArea img {
            /*表示エリアの横幅に合わせて表示させる*/
            width : 300px !important;
            object-fit: contain !important;
        }
        
        /*サムネイルリスト*/
        .sideImgList {
            list-style-type: none !important; /*リストのスタイルを解除*/
            padding:0px !important;
        }
        .sideImgList li {
            float: left !important; /*リストを横並びに表示*/
            height: 85px !important;
            widows: 85px !important;
            margin: 5px !important;
        }
        .sideImgList li img {
            height: 80px !important;
            width: 80px !important;
            cursor: pointer !important;
            object-fit: contain !important;
            background-color: rgb(238, 238, 238) !important;
        }

        /*サムネイルリストマウスオーバー用のCSS*/
        .list-selected {
            width: 80px !important;
            height: 80px !important;
            background-color: aqua !important; /* カラーフィルタ効果の色を指定 */
        }
        .list-selected img {
            opacity: 0.6 !important;    /* カラーフィルタ効果の度合いを指定(※) */
        }

    </style>

/*拡大表示エリア*/

.mainArea {

width : 300px !important;

}

.mainArea img {

/*表示エリアの横幅に合わせて表示させる*/

width : 300px !important;

object-fit: contain !important;

}

/*サムネイルリスト*/

.sideImgList {

list-style-type: none !important; /*リストのスタイルを解除*/

padding:0px !important;

}

.sideImgList li {

float: left !important; /*リストを横並びに表示*/

height: 85px !important;

widows: 85px !important;

margin: 5px !important;

}

.sideImgList li img {

height: 80px !important;

width: 80px !important;

cursor: pointer !important;

object-fit: contain !important;

background-color: rgb(238, 238, 238) !important;

}

/*サムネイルリストマウスオーバー用のCSS*/

.list-selected {

width: 80px !important;

height: 80px !important;

background-color: aqua !important; /* カラーフィルタ効果の色を指定 */

}

.list-selected img {

opacity: 0.6 !important; /* カラーフィルタ効果の度合いを指定(※) */

}

</style>

■JavaScript

jQuery(function($) {
    //ページ読み込み時にリストの先頭の画像を拡大表示する。
    $('.mainArea img').attr('src', $('.sumbnail-List img:first').attr('src'));

    //リストのアイテムがマウスオーバーされたら色を変える。
    $('.sumbnail-List li img').hover(
        function() {
            $(this).wrap("<div class='list-selected'></div>");
        },
        //マウスオーバー解除されたら戻す。
        function() {
            $(this).unwrap();
        }
    );

    //リストのアイテムがクリックされたら拡大表示する。
    $('.sumbnail-List img').click(function() {
        $('.mainArea img').attr('src', $(this).attr('src'));
    });
})

jQuery(function($) {

//ページ読み込み時にリストの先頭の画像を拡大表示する。

$('.mainArea img').attr('src', $('.sumbnail-List img:first').attr('src'));

//リストのアイテムがマウスオーバーされたら色を変える。

$('.sumbnail-List li img').hover(

function() {

$(this).wrap("<div class='list-selected'></div>");

//マウスオーバー解除されたら戻す。

function() {

$(this).unwrap();

}

);

//リストのアイテムがクリックされたら拡大表示する。

$('.sumbnail-List img').click(function() {

$('.mainArea img').attr('src', $(this).attr('src'));

});

})

【jQuery】基本セレクターのサンプル

■デモ

リンク1

リンク2

リンク3

id=listの下にあるa要素のCSSを変更
class=itemの直下にあるa要素のCSSを変更
class=itemの次にある兄弟ノードのp要素のCSSを変更
class=itemの次以降にある兄弟ノードのp要素のCSSを変更
id=list配下すべての要素のstyleをリセット

■HTML

<div id="list">
    <p class="item"><a href="#">リンク1</a></p>
    <p><a href="#">リンク2</a></p>
    <p><a href="#">リンク3</a></p>
</div>
<br>
<input type="button" id="button1" value="CSSを変更1"/> id=listの下にあるa要素のCSSを変更<br>
<input type="button" id="button2" value="CSSを変更2"/> class=itemの直下にあるa要素のCSSを変更<br>
<input type="button" id="button3" value="CSSを変更3"/> class=itemの次にある兄弟ノードのp要素のCSSを変更<br>
<input type="button" id="button4" value="CSSを変更4"/> class=itemの次以降にある兄弟ノードのp要素のCSSを変更<br>
<input type="button" id="button-reset" value="CSSをリセット"/>id=list配下すべての要素のstyleをリセット<br>

</div>

<br>

<input type="button" id="button1" value="CSSを変更1"/> id=listの下にあるa要素のCSSを変更<br>

<input type="button" id="button2" value="CSSを変更2"/> class=itemの直下にあるa要素のCSSを変更<br>

<input type="button" id="button3" value="CSSを変更3"/> class=itemの次にある兄弟ノードのp要素のCSSを変更<br>

<input type="button" id="button4" value="CSSを変更4"/> class=itemの次以降にある兄弟ノードのp要素のCSSを変更<br>

<input type="button" id="button-reset" value="CSSをリセット"/>id=list配下すべての要素のstyleをリセット<br>

■JavaScript

jQuery(function($) {
   //id=listの下にあるa要素のCSSを変更
  $('#button1').click(function(e) {
    $('#list a').css('border', 'solid 2px Lime');
  });

  //class=itemの直下にあるa要素のCSSを変更
  $('#button2').click(function(e) {
    $('.item > a').css('background-color', 'red');
  });

  //class=itemの次にある兄弟ノードのp要素のCSSを変更
  $('#button3').click(function(e) {
    $('.item + p').css('background-color', 'aqua');
  });

  //class=itemの次以降にある兄弟ノードのp要素のCSSを変更
  $('#button4').click(function(e) {
    $('.item ~ p').css('background-color', 'green');
  });

  //id=list配下すべての要素のstyleをリセット
  $('#button-reset').click(function(e) {
    $('#list *').removeAttr('style');
  });
})

jQuery(function($) {

//id=listの下にあるa要素のCSSを変更

$('#button1').click(function(e) {

$('#list a').css('border', 'solid 2px Lime');

});

//class=itemの直下にあるa要素のCSSを変更

$('#button2').click(function(e) {

$('.item > a').css('background-color', 'red');

});

//class=itemの次にある兄弟ノードのp要素のCSSを変更

$('#button3').click(function(e) {

$('.item + p').css('background-color', 'aqua');

});

//class=itemの次以降にある兄弟ノードのp要素のCSSを変更

$('#button4').click(function(e) {

$('.item ~ p').css('background-color', 'green');

});

//id=list配下すべての要素のstyleをリセット

$('#button-reset').click(function(e) {

$('#list *').removeAttr('style');

});

})

【jQuery】属性セレクターのサンプル

■デモ

アイテム１
アイテム２
アイテム３

id属性を持つli要素にスタイルを設定する。
id属性がitem3であるli要素にスタイルを設定する。
id属性がitem3でないli要素にスタイルを設定する。
曖昧条件に一致する要素にスタイルを設定する。
曖昧条件に一致する要素にスタイルを設定する。

■HTML

<ul id="list1">
    <li id="item1">アイテム１</li>
    <li class="item2">アイテム２</li>
    <li id="item3">アイテム３</li>
</ul>
<br>
<input type="button" id="button1" value="CSSを変更1"/> id属性を持つli要素にスタイルを設定する。<br>
<input type="button" id="button2" value="CSSを変更2"/> id属性がitem3であるli要素にスタイルを設定する。<br>
<input type="button" id="button3" value="CSSを変更3"/> id属性がitem3でないli要素にスタイルを設定する。<br>
<input type="button" id="button4" value="CSSを変更4"/> 曖昧条件に一致する要素にスタイルを設定する。<br>
<input type="button" id="button5" value="CSSを変更5"/> 曖昧条件に一致する要素にスタイルを設定する。<br>
<input type="button" id="button-reset" value="CSSをリセット"/><br>

</ul>

<br>

<input type="button" id="button1" value="CSSを変更1"/> id属性を持つli要素にスタイルを設定する。<br>

<input type="button" id="button2" value="CSSを変更2"/> id属性がitem3であるli要素にスタイルを設定する。<br>

<input type="button" id="button3" value="CSSを変更3"/> id属性がitem3でないli要素にスタイルを設定する。<br>

<input type="button" id="button4" value="CSSを変更4"/> 曖昧条件に一致する要素にスタイルを設定する。<br>

<input type="button" id="button5" value="CSSを変更5"/> 曖昧条件に一致する要素にスタイルを設定する。<br>

■JavaScript

jQuery(function($) {

  //id属性を持つli要素にスタイルを設定する。
  $('#button1').click(function(e) {
    $('#list1 li[id]').css('background-color', 'yellow');
  });

  //id属性がitem3であるli要素にスタイルを設定する。
  $('#button2').click(function(e) {
    $('#list1 li[id = "item3"]').css('background-color', 'pink');
  });

  //id属性がitem3でないli要素にスタイルを設定する。
  $('#button3').click(function(e) {
    $('#list1 li[id != "item3"]').css('background-color', 'pink');
  });

  //曖昧条件に一致する要素にスタイルを設定する。
  $('#button4').click(function(e) {
    $('#list1 li[id ^= "item"]').css('background-color', 'pink'); //前方一致
    $('#list1 li[id $= "3"]').css('border','solid 2px Lime');     //後方一致
    $('#list1 li[class *= "tem"]').css("color","red");            //部分一致
  });
  
  //属性フィルターを組み合わせる。
  $('#button5').click(function(e) {
    //id属性がitemから始まり、かつ3を含んでいない要素
    $('#list1 li[id ^= "item"]:not([id *= 3])').css('background-color', 'pink');
  });

  //id=list配下すべての要素のstyleをリセット
  $('#button-reset').click(function(e) {
    $('#list1 *').removeAttr('style');
  });
})

jQuery(function($) {

//id属性を持つli要素にスタイルを設定する。

$('#button1').click(function(e) {

$('#list1 li[id]').css('background-color', 'yellow');

});

//id属性がitem3であるli要素にスタイルを設定する。

$('#button2').click(function(e) {

$('#list1 li[id = "item3"]').css('background-color', 'pink');

});

//id属性がitem3でないli要素にスタイルを設定する。

$('#button3').click(function(e) {

$('#list1 li[id != "item3"]').css('background-color', 'pink');

});

//曖昧条件に一致する要素にスタイルを設定する。

$('#button4').click(function(e) {

$('#list1 li[id ^= "item"]').css('background-color', 'pink'); //前方一致

$('#list1 li[id $= "3"]').css('border','solid 2px Lime'); //後方一致

$('#list1 li[class *= "tem"]').css("color","red"); //部分一致

});

//属性フィルターを組み合わせる。

$('#button5').click(function(e) {

//id属性がitemから始まり、かつ3を含んでいない要素

$('#list1 li[id ^= "item"]:not([id *= 3])').css('background-color', 'pink');

});

//id=list配下すべての要素のstyleをリセット

$('#button-reset').click(function(e) {

$('#list1 *').removeAttr('style');

});

})

【jQuery】複数スタイルを設定するサンプル

ハッシュを使用することで、複数のスタイルをまとめて設定することができる。
ハッシュで指定する場合、CSSのプロパティ名は以下のようにキャメルケースとなるため注意。
background-color → backgroundColor

アイテム１

複数スタイルをまとめて設定。

■HTML

<ul id="list1">
    <li id="item1">アイテム１</li>
</ul>
<br>
<input type="button" id="button1" value="CSSを変更1"/> 複数スタイルをまとめて設定。<br>
<input type="button" id="button-reset" value="CSSをリセット"/><br>

</ul>

<br>

<input type="button" id="button1" value="CSSを変更1"/> 複数スタイルをまとめて設定。<br>

■JavaScript

jQuery(function($) {

  //id属性を持つli要素にスタイルを設定する。
  $('#button1').click(function(e) {
    $('#list1 li').css({
        backgroundColor : 'yellow',
        border : 'solid 2px Lime',
        color : "red",
    });
  });

  //id=list配下すべての要素のstyleをリセット
  $('#button-reset').click(function(e) {
    $('#list1 *').removeAttr('style');
  });
})

jQuery(function($) {

//id属性を持つli要素にスタイルを設定する。

$('#button1').click(function(e) {

$('#list1 li').css({

backgroundColor : 'yellow',

border : 'solid 2px Lime',

color : "red",

});

//id=list配下すべての要素のstyleをリセット

$('#button-reset').click(function(e) {

$('#list1 *').removeAttr('style');

});

})

【jQuery】要素フィルターのサンプル

■デモ

アイテム１
アイテム２
アイテム３

アイテム１
アイテム２
アイテム３

アイテム１

全てのul要素の配下の子アイテムを取得し、最初と最後の要素にスタイルを設定する
奇数と偶数要素にスタイルを設定する。
n番目の要素にスタイルを設定する。
n番目より前/後ろの要素にスタイルを設定する。
テキストの内容で絞り込む。
特定の子要素を持つ要素を絞り込む。
親要素を起点に合致する最初と最後の要素を取り出す。
n個おきに要素にスタイルを設定する。
唯一の子要素にスタイルを設定する。

■HTML

<ul id="list1">
    <li id="item1">アイテム１</li>
    <li id="item2"><a href="#" target="_blank">アイテム２</a></li>
    <li id="item3">アイテム３</li>
</ul>
<ul id="list2">
    <li id="item1">アイテム１</li>
    <li id="item2"><a href="#" target="_blank">アイテム２</a></li>
    <li id="item3">アイテム３</li>
</ul>
<ul id="list3">
    <li id="item1">アイテム１</li>
</ul>
<br>
<input type="button" id="button1" value="CSSを変更1"/> 全てのul要素の配下の子アイテムを取得し、最初と最後の要素にスタイルを設定する<br>
<input type="button" id="button2" value="CSSを変更2"/> 奇数と偶数要素にスタイルを設定する。<br>
<input type="button" id="button3" value="CSSを変更3"/> n番目の要素にスタイルを設定する。<br>
<input type="button" id="button4" value="CSSを変更4"/> n番目より前/後ろの要素にスタイルを設定する。<br>
<input type="button" id="button5" value="CSSを変更5"/> テキストの内容で絞り込む。<br>
<input type="button" id="button6" value="CSSを変更6"/> 特定の子要素を持つ要素を絞り込む。<br>
<input type="button" id="button7" value="CSSを変更7"/> 親要素を起点に合致する最初と最後の要素を取り出す。<br>
<input type="button" id="button8" value="CSSを変更8"/> n個おきに要素にスタイルを設定する。<br>
<input type="button" id="button9" value="CSSを変更9"/> 唯一の子要素にスタイルを設定する。<br>
<input type="button" id="button-reset" value="CSSをリセット"/><br>

</ul>

</ul>

</ul>

<br>

<input type="button" id="button1" value="CSSを変更1"/> 全てのul要素の配下の子アイテムを取得し、最初と最後の要素にスタイルを設定する<br>

<input type="button" id="button2" value="CSSを変更2"/> 奇数と偶数要素にスタイルを設定する。<br>

<input type="button" id="button3" value="CSSを変更3"/> n番目の要素にスタイルを設定する。<br>

<input type="button" id="button4" value="CSSを変更4"/> n番目より前/後ろの要素にスタイルを設定する。<br>

<input type="button" id="button5" value="CSSを変更5"/> テキストの内容で絞り込む。<br>

<input type="button" id="button6" value="CSSを変更6"/> 特定の子要素を持つ要素を絞り込む。<br>

<input type="button" id="button7" value="CSSを変更7"/> 親要素を起点に合致する最初と最後の要素を取り出す。<br>

<input type="button" id="button8" value="CSSを変更8"/> n個おきに要素にスタイルを設定する。<br>

<input type="button" id="button9" value="CSSを変更9"/> 唯一の子要素にスタイルを設定する。<br>

■JavaScript

jQuery(function($) {

  //全てのul要素の配下の子アイテムを取得し、最初と最後の要素にスタイルを設定する
  $('#button1').click(function(e) {
    $('ul[id ^= "list"] li:first').css('background-color', 'blue');
    $('ul[id ^= "list"] li:last').css('background-color', 'red');
  });

  //奇数と偶数要素にスタイルを設定する。
  $('#button2').click(function(e) {
    $('ul[id ^= "list"] li:even').css('background-color', 'yellow');
    $('ul[id ^= "list"] li:odd').css('background-color', 'green');
  });

  //n番目の要素にスタイルを設定する。
  $('#button3').click(function(e) {
    //1番目の要素は0となるので注意
    $('ul[id ^= "list"] li:eq(3)').css('background-color', 'aqua');
  });
  
  //n番目より前/後ろの要素にスタイルを設定する。
  $('#button4').click(function(e) {
    $('ul[id ^= "list"] li:lt(3)').css('background-color', 'aqua');
    $('ul[id ^= "list"] li:gt(3)').css('background-color', 'aqua');
  });

  //テキストの内容で絞り込む。
  $('#button5').click(function(e) {
    $('ul[id ^= "list"] li:contains("アイテム３")').css('border', 'solid 2px aqua');
  });
  
  //特定の子要素を持つ要素を絞り込む。
  $('#button6').click(function(e) {
    $('ul[id ^= "list"] li:has(a)').css('border', 'solid 2px pink');
  });
  
  //親要素を起点に合致する最初と最後の要素を取り出す。
  $('#button7').click(function(e) {
    $('ul[id ^= "list"] li:first-child').css('border', 'solid 2px gray');
    $('ul[id ^= "list"] li:last-child').css('border', 'solid 2px gray');
  });

  //n個おきに要素にスタイルを設定する。
  $('#button8').click(function(e) {
    //1番目の要素が1になるので注意
    $('ul[id ^= "list"] li:nth-child(3n+1)').css('background-color', 'pink');
    $('ul[id ^= "list"] li:nth-child(3n+2)').css('background-color', 'aqua');
    $('ul[id ^= "list"] li:nth-child(3n)').css('background-color', 'lime');
  });
  
  //唯一の子要素にスタイルを設定する。
  $('#button9').click(function(e) {
    //1番目の要素が1になるので注意
    $('ul[id ^= "list"] li:only-child').css('background-color', 'pink');
  });

  //id=list配下すべての要素のstyleをリセット
  $('#button-reset').click(function(e) {
    $('#list1 *').removeAttr('style');
    $('#list2 *').removeAttr('style');
    $('#list3 *').removeAttr('style');
  });
})

jQuery(function($) {

//全てのul要素の配下の子アイテムを取得し、最初と最後の要素にスタイルを設定する

$('#button1').click(function(e) {

$('ul[id ^= "list"] li:first').css('background-color', 'blue');

$('ul[id ^= "list"] li:last').css('background-color', 'red');

});

//奇数と偶数要素にスタイルを設定する。

$('#button2').click(function(e) {

$('ul[id ^= "list"] li:even').css('background-color', 'yellow');

$('ul[id ^= "list"] li:odd').css('background-color', 'green');

});

//n番目の要素にスタイルを設定する。

$('#button3').click(function(e) {

//1番目の要素は0となるので注意

$('ul[id ^= "list"] li:eq(3)').css('background-color', 'aqua');

});

//n番目より前/後ろの要素にスタイルを設定する。

$('#button4').click(function(e) {

$('ul[id ^= "list"] li:lt(3)').css('background-color', 'aqua');

$('ul[id ^= "list"] li:gt(3)').css('background-color', 'aqua');

});

//テキストの内容で絞り込む。

$('#button5').click(function(e) {

$('ul[id ^= "list"] li:contains("アイテム３")').css('border', 'solid 2px aqua');

});

//特定の子要素を持つ要素を絞り込む。

$('#button6').click(function(e) {

$('ul[id ^= "list"] li:has(a)').css('border', 'solid 2px pink');

});

//親要素を起点に合致する最初と最後の要素を取り出す。

$('#button7').click(function(e) {

$('ul[id ^= "list"] li:first-child').css('border', 'solid 2px gray');

$('ul[id ^= "list"] li:last-child').css('border', 'solid 2px gray');

});

//n個おきに要素にスタイルを設定する。

$('#button8').click(function(e) {

//1番目の要素が1になるので注意

$('ul[id ^= "list"] li:nth-child(3n+1)').css('background-color', 'pink');

$('ul[id ^= "list"] li:nth-child(3n+2)').css('background-color', 'aqua');

$('ul[id ^= "list"] li:nth-child(3n)').css('background-color', 'lime');

});

//唯一の子要素にスタイルを設定する。

$('#button9').click(function(e) {

//1番目の要素が1になるので注意

$('ul[id ^= "list"] li:only-child').css('background-color', 'pink');

});

//id=list配下すべての要素のstyleをリセット

$('#button-reset').click(function(e) {

$('#list1 *').removeAttr('style');

$('#list2 *').removeAttr('style');

$('#list3 *').removeAttr('style');

});

})

【JavaScript】関数内で引数の数をチェックするサンプル

argumentsオブジェクトは関数に渡された引数を全て持つ。
なので、argumentsオブジェクトを使用することで、以下のように引数の数をチェックすることができる。

function showMsg(value) {
   if(arguments.length !== 1) {
       throw new Error('引数の数が間違っています。：' + arguments.length);
   } 
   console.log(value);
}

try {
    showMsg('メッセージ1', 'メッセージ2');
} catch(e) {
    console.log(e.message); //引数の数が間違っています。：2
}

function showMsg(value) {

if(arguments.length !== 1) {

throw new Error('引数の数が間違っています。：' + arguments.length);

}

console.log(value);

}

try {

showMsg('メッセージ1', 'メッセージ2');

} catch(e) {

console.log(e.message); //引数の数が間違っています。：2

}

【JavaScript】関数を引数として渡す-高階関数

JavaScriptでは、関数を変数のように渡すことができる。
これにより、渡した関数によって動的に処理を切り替えることができる。

//呼び出し元処理
function main(data , func) {
    for (var key in data) {
        func(data[key]);
    }
}

//配列の合計を出す
var resultSum = 0;
function sumData(value) {
    resultSum += value;
}

//配列を掛け合わした合計を出す
var resultMulti = 1;
function multipleData(value) {
    resultMulti = resultMulti * value;
}

//呼び出し
var ary = [1, 2, 3, 4];
main(ary, sumData);
console.log(resultSum);     //10(1+2+3+4)
main(ary, multipleData);
console.log(resultMulti);   //24(1*2*3*4)

//呼び出し元処理

function main(data , func) {

for (var key in data) {

func(data[key]);

}

//配列の合計を出す

var resultSum = 0;

function sumData(value) {

resultSum += value;

}

//配列を掛け合わした合計を出す

var resultMulti = 1;

function multipleData(value) {

resultMulti = resultMulti * value;

}

//呼び出し

var ary = [1, 2, 3, 4];

main(ary, sumData);

console.log(resultSum); //10(1+2+3+4)

main(ary, multipleData);

console.log(resultMulti); //24(1*2*3*4)