カテゴリー: JavaScript

【JavaScript 復習】querySelector()とclassListを使ってclassを着脱するサンプル

実装したサンプル

タイトルの通り、JavaScriptのquerySelector()とclassListを使い、DOM要素にclassをつけたり外したりするスクリプトのサンプルを作ってみました。

See the Pen
class attach test by kouichi hoshi (@kouichi_hoshi)
on CodePen.

querySelector()

引数で渡した値にマッチするhtml要素の最初のひとつを取得します。
HTMLElementが返されます。

const foo = document.querySelector("p");
const bar = document.querySelector("#id");
const baz = document.querySelector(".class");
const bee = document.querySelector("div.user-panel.main input[name='login']");

querySelectorAll()

マッチする全ての要素を取得したい場合はdocument.querySelectorAll()を使います。
NodeListが返却されます。

const all = document.querySelectorAll("p");

jQueryライクに記述できて便利です。

classList

document.querySelector("p").classList.add("red");

のように記述すると、取得したhtml要素に対して引数で渡した値をclassとして付与することができます。

document.querySelector("p").classList.remove("red");

のように記述すると、引数の値にマッチするclassを除去します。

document.querySelector("p").classList.contains("red");

classの有無を判定し、真偽値を返します。

document.querySelector("p").classList.toggle("red");

とし、クリックイベントなどで発火させればclassの着脱が可能。

IEを気にすることはほとんど無くなったし、jQuery無しのDOM操作が面倒だった時代は終わったのかもしれませんね。

参考サイト

JavaScript classListでクラス属性を操作するゾ – かもメモ

矢印付きボタンを作成するCSSジェネレーター「Button with Arrow.css」を公開しました。

Button with Arrow.css公開させて頂きました。
矢印付きのボタンのCSSを生成するジェネレーターです。

矢印付きのボタンをコーディングするのが面倒だったのでsassでmixinを作ったものの、それを使うことすら面倒だった(笑)のと、Vue.jsの勉強がしたかったのがこのツールを作ったきっかけです。

※現状、スマートフォンでの閲覧に対応しておりません。PCのブラウザでご利用ください。

使い方

EDITボタンをクリックするとスクリーンが編集モードに変形します。

編集エリアのフォームに任意の値を入力すると、画面右側のcodeエリアのCSSコードに動的に反映されます。

※codeエリアが閉じている場合は「get code」ボタンをクリックしてください。

入力が終わったら、codeエリアのcopyボタンをクリックしてコードをコピーし利用してください。

htmlとcssそれぞれ別になっています。

Vue.jsで作りました。

ここはアピールしておきたいところ(笑)。フレームワークとしてVue.jsを利用しています。

フォームに値を入力すると、codeエリアとボタンのプレビューに同期するようバインディングするコードを書いています。

cssで擬似要素を使っているので、これをVue.jsで扱うのに苦労しました。DOMではないので通常のバインディングができず、テキストノードとしてstyleタグを生成するなどしています。(何か他にいいやり方があるのかもしれませんね。)

ご質問やご意見はこの投稿にコメントいただくか、@stella_d_tweetにメンションなどお願いいたします。

最後に

非常に限られた需要しか無いと思われますが(汗)、よかったらお試しいただけると幸いです。

このツールを作るのに、@hrz31さんの以下の記事とサービスから非常に刺激を受けました。

自分のサービスを作ってみたいエンジニアな人は参考になると思います。おすすめです。

他にもtwitterでフォローしているフォロワーの方が続々とwebサービスをリリースをしており、こちらも大変気になっております。

話題のねこ本ももちろん買って読みました。ある程度JavaScriptの知識があることが前提ではありますが、Vue.jsの使い方のツボがいいかんじにまとめられていて、こういうときはどうすればいい?の答えにたどり着くスピードが格段に上がりました。みんな、読むといいよ！

さてこれから

次に作ってみたいwebサービスの構想がうすボンヤリ浮かんでいます。今度はより本格的なwebアプリを作ってみたいです。

オープンデータも活用したいし、firebaseを使えばよりスケールアップしたアプリが作れそう。micro:bitもまだ手付かずだし、blenderもやってみたい。(あぁ、もう全部やるのは無理だw)

時間の割り振りがなかなか難しいですがほそぼそやっていこうと思っています。

[JavaScript]ES2015のclass構文のお作法まとめ。

脱初心者、目指せ中級者！
このところJavaScriptのclass構文を集中して学習しています。そこから得た知識のメモです。

言葉の定義を整理する

  • クラス
  • インスタンス
  • コンストラクタ
  • プロパティ(メンバ変数)
  • メソッド(メンバ関数)
  • 継承

まずは簡単なclassの構文サンプルをご紹介。

class name{
	constructor(myoji,namae){
		this.myoji = myoji;
		this.namae = namae;
	}
	getfullName(){
		return this.myoji　+ this.namae;
	}
}

var N = new name('やまだ','たろう');
console.log(N.getfullName());

クラス

class name{
    // コンストラクタで初期化
    // メソッドを記述
}

まずはclassキーワードを使ってclassを宣言します。(変数に代入して定義する方法もあるようです。)

後述するコンストラクタやメソッドを定義し、newキーワードでインスタンス化して使用します。メソッドを実行するにはインスタンス化した後に呼び出す必要があります。

コンストラクタ

コンストラクタ は、new式でクラスから定義されるオブジェクトの生成時に(クラスをインスタンス化するときに)、自動的に呼び出されるメソッドです。プロパティ(メンバ変数)の初期化を行います。

class name{
    //コンストラクタを定義
    constructor(myoji,namae){
        this.myoji = myoji; //プロパティを初期化
        this.namae = namae; //プロパティを初期化
    }
}

メソッド

class宣言直下に記述した関数のことをメソッドと呼びます。通常の関数とは振る舞いが異なります。

メソッドでプロパティを使うには、this.をつけて呼び出します。

JavaScriptのclassでは、class宣言の直下ではコンストラクタとメソッドしか定義できません。通常の関数のようなfunction宣言は不要です。(というか、構文エラー)

class name{
    constructor(myoji,namae){
        this.myoji = myoji; //プロパティを初期化
        this.namae = namae; //プロパティを初期化
    }
    //メソッドを定義
    getfullName(){
        return this.myoji　+ this.namae;
    }
}

インスタンス

クラスからインスタンスを生成します。メソッドも呼び出します。

class name{
    constructor(myoji,namae){
        this.myoji = myoji; //プロパティを初期化
        this.namae = namae; //プロパティを初期化
    }
    //メソッドを定義
    getfullName(){
        return this.myoji　+ this.namae;
    }
}

var N = new name('やまだ','たろう'); //インスタンスを生成
console.log(N.getfullName()); //メソッドを実行 -> やまだたろう

継承

あらかじめ作成した別のクラスを継承して新しいクラスを作ることもできます。構文としてはextendsキーワードを使います。

継承元からプロパティやメソッドを呼び出すにはsuper.キーワードを使います。

継承元にあるメソッドと同じ名前でメソッドを作るとオーバーライドすることができます。

class person extends name{
	constructor(myoji,namae,age,blood,address){
		super(myoji,namae); //継承元のコンストラクタを呼び出す
		this.age = age;
		this.blood = blood;
		this.address = address;
	}

	createPerson(){
		let fullName = super.getfullName(); //継承元のメソッドを呼び出す
		return fullName + 'の血液型は' + this.blood + '型で、年齢は' + this.age + '歳' + 'です。' + this.address + 'に住んでいます。';
	}
}

var p = new person('さとう','たろう','1','A','北海道');
console.log(p.createPerson()); //さとうたろうの血液型はA型で、年齢は1歳です。北海道に住んでいます。

classに関する機能や構文、仕様はまだまだたくさんあるようですが、ひとまず自分が現状で分かった範囲はこのような感じです。

もっともっと学習と実践を重ねてよりよいコードが書けるようがんばります！