【fnm, node.js】fnmを使ってnode.jsをプロジェクトごとに管理する。

js

Dockerを導入していないプロジェクトがある場合にプロジェクトごとにnodeのバージョンを管理したい。そんな時はfnmを使用する。 fnmとは、Rustで構築された高速でシンプルなNode.jsバージョンマネージャ。クロスプラットフォームのサポート（macOS、Windows…

2020-03-10

【js】DOM ノードを追加、置換、削除する

js

ノードの追加、置換、削除についてまとめます。 HTMLの編集には、innerHTMLプロパティを利用することもできますが、今回紹介する方法だと以下のようなメリットがあります。オブジェクトツリーとして操作できるので、対象となるコンテンツが複雑になった場合…

2020-03-09

【js】DOM イベント操作

js

属性値やテキストを取得、設定する方法にについてまとめます。コードを使用したページ Qiita 特定の属性を取得、設定不特定の属性を取得テキストを取得、設定特定の属性を取得、設定多くの属性は要素ノードの同名のプロパティとしてアクセスできます。 …

2020-03-08

【js 】DOM 文書ツリー間を行き来するノードウォーキング

js

getElementByIdやquerySelectorAllメソッドはいずれもピンポイントで特定の要素ノード（群）を取得するためのメソッドです。しかし、いちいち文書全体から目的の要素を検索するのは無駄が多くそれはそのままパフォーマンス低下の原因にもなります。そこでD…

2020-03-08

【js】DOM 要素の検索まとめ

js

DOM（Document Object Model）はHTMLをJavascriptから操作できるようにしたインターフェイスのことです。 JavascriptからはDOM APIを通じてHTMLの情報を取得、変更、イベントの登録などができます。今回は情報を取得するために要素の検索についてまとめます…

2020-03-06

【js】ES6 モジュール

js

ES6から言語としてモジュールがサポートされました。モジュールとは、関連性を持たせて切り離された一塊のコード群のことです。モジュールのメリットモジュールを使うことで、以下のようなメリットがあります。他のコードとの依存性が少なくなるので、変…

2020-03-05

【js】ES6 オブジェクトリテラル

js

オブジェクトリテラル ES6ではオブジェクトリテラルの構文もシンプルに表現できるようになりました。 const title = 'この素晴らしい世界に祝福を'; const mainCharacter = 'カズマ'; const Anime = { title: title, mainCharacter: mainCharacter, subTitle…

2020-03-04

【js】クラスを定義する

js

ES6からjsでもclassを定義することができるようになりました。オブジェクト指向に関わる箇所なので、是非マスターしたいところです。オブジェクト指向については以前記事にまとめてあります。 https://takuma521.hatenablog.com/entry/2019/07/15/214850 …

2020-03-03

【js】配列を操作するメソッドまとめ

js

今回は配列を操作するときに便利なメソッドをまとめます！ forEach let titles = ['このすば', 'リゼロ', '幼女戦記', 'オバロ'] titles.forEach((title) => { console.log(title); }); // このすば // リゼロ // 幼女戦記 // オバロ function showTitle(tit…

2020-03-02

【js】クロージャ

js

クロージャとは、ローカル変数を参照している関数内関数のことです。なんのこっちゃわからないので、次のコードを見てください。 function countPoint(init) { let point = init; return () => { return ++point; } } let myCounter = countPoint(1); conso…

2020-03-01

【js】スコープチェーン

js

jsではスクリプトの実行時に、内部的にGlobalオブジェクト（グローバルオブジェクト）を生成します。グローバルオブジェクトとは、グローバル変数やグローバル関数を管理するためにjsが自動的に生成する便宜的なオブジェクトなのです。グローバル変数/関数…

2020-02-29

【js】ES6 タグ付きテンプレート文字列

js

テンプレート文字列を利用することで、文字リテラルに変数を埋め込めますが、変数をそのまま埋め込むのではなく、加工した上で埋め込みたいということもあるでしょう。例えば、 let subaru = '<strong>スバルくん</strong>' let barusu = '<strong>バルス</strong>' console.log(`${subaru}素…