TIL

Today I Learned. 知ったこと、学んだことを書いていく

要素の削除 - JavaScript

JavaScript

要素を削除するには２通りあるらしい(今のところ知っている範囲だと)

  • removeChild()：親要素から子要素を削除する
  • remove()：自分自身を削除する


例）child1というidをもった要素を削除したいとき

removeChild()

親要素を取得し、子要素である自分を削除する感じ

const child = document.getElementById("child1");
child.parentNode.removeChild(child);

remove()

自分自身を削除することができる

document.getElementById("child1").remove();

使い分けは？

親から見て、削除したいときにはremoveChild()がいいのかな？ よくわかんない

参考文献

自動補完(Autocomplete)の追加

JavaScript CodeMirror

エディタのいろいろな設定 CodeMirror - JavaScript - TIL の続き

www.youtube.com

自動補完機能はaddonを使うことで実装できる。でも、CSSとJavaScriptとHTMLだけなのかな？

addonフォルダ内にアドオンは入っている。ダウンロードしたフォルダに入っているaddonをコピーしてくる

.
├── index.html
├── addon    // コピーしてくる
├── lib
├── mode
└── theme

自動保管を行うためには以下の手順で行う

  1. 必要なjsファイルとcssファイルを読み込む
  2. キーマップを設定する

まず、必要なファイルを読み込む

自動補完のためのファイルはaddon/hintに入っている。今回はCSSの自動補完をしたいため、以下の３つのファイルを読み込む

  • show-hint.js
  • show-hint.css
  • css-hint.js

※ show-hint.jsとshow-hint.cssはどの言語の自動補完をする時も必ず読み込むこと

<head>
  <script src="addon/hint/show-hint.js"></script>
  <script src="addon/hint/css-hint.js"></script>
  <link rel="stylesheet" href="addon/hint/show-hint.css">
</head>


次に、自動保管を行うためのキーマップを設定する。今回はCtrl + Spaceで自動補完をするようにする
extraKeysで指定する

const conf = {
  extraKeys: {"Ctrl-Space": "autocomplete"},
};

Ctrl+Spaceを押すと以下のように表示される！

f:id:tmg1998:20180416224558p:plain:w200

おぉ！！できてる！！！

こんな面白いこともできるっぽい！！

CodeMirrorでEmoji AutoCompleteをする

チュートリアルは一段落したから、色々いじってみて、テキストエディタを充実させるぞ！！！

参考文献

エディタのいろいろな設定 CodeMirror - JavaScript

テーマの設定 CodeMirror - JavaScript - TIL の続き

www.youtube.com

コンストラクタに渡すことで簡単にいろいろな設定ができる

タブのサイズの設定

tabSizeで指定できる。デフォルトは4

  • tabSize: integer

例）タブのサイズを8に設定

const conf = {
  tabSize: 8,
};

行数の表示

lineNumbersで指定する。trueで表示。デフォルトはfalse

  • lineNumbers: boolean
const conf = {
  lineNumbers: true,
};

f:id:tmg1998:20180416220931p:plain:w300

最初の行数の指定

firstLineNumberで指定する。初期値は1

  • firstLineNumber: integer

例）行数を20からにする

const conf = {
  firstLineNumber: 20,
};

f:id:tmg1998:20180416221001p:plain:w300

たくさん設定できるっぽいからいろいろいじってみよう！！

参考文献

テーマの設定 CodeMirror - JavaScript

JavaScript CodeMirror

シンタックスハイライトの設定 CodeMirror - JavaScript - TIL の続き

www.youtube.com

この動画を見て、実際にテーマの変更をしてみた
すごい簡単にできてびっくりした

themeフォルダにテーマ(.cssファイル)は格納されている

以下のようにthemeフォルダをコピーしてくる

.
├── index.html
├── lib
├── mode
└── theme   // コピーしてくる

themeの中を見てみたんだけど、gruvboxがない！！！！！大好きなテーマがなくて少しショック...

テーマの設定

今回はテーマをmonokaiにしてみる

f:id:tmg1998:20180415211447p:plain:w200

テーマの設定をするには以下のようにする

  1. theme内にあるcssファイルを読み込む
  2. CodeMirrorオブジェクト生成時にthemeでテーマを指定する

まずはCSSの読み込み

<head>
  ...
  <link rel="stylesheet" href="theme/monokai.css">
  ...
</head>


次に、CodeMirrorオブジェクトの生成時にテーマを指定する theme: テーマ名とすることで設定できる

<body>
  ...
  <script>
    const editor = CodeMirror(document.getElementById("codeeditor"), {
      mode: "css",
      theme: "monokai"  /* テーマの設定 */
    });
  <script>
<body>


設定はdictionaryで渡すこともできる！

<body>
  ...
  <script>
    // dictionaryを生成して渡す
    const conf = {
      mode: "css",
      theme: "monokai"
    };
    const editor = CodeMirror(document.getElementById("codeeditor"), conf);
  <script>
<body>

参考文献

シンタックスハイライトの設定 CodeMirror - JavaScript

JavaScript CodeMirror

それっぽいテキストエディタを簡単に実装 CodeMirror - JavaScript - TIL の続き

www.youtube.com

この動画でCodeMirrorのエディタのシンタックスハイライトの設定を学んだ

フォルダ構造は以下のようになっている

.
├── index.html
├── lib
└── mode

シンタックスハイライトの設定

シンタックスを適用するには以下の手順で行う

  1. 適用したい言語のシンタックスの設定ファイルを取り込む
  2. CodeMirrorオブジェクトの生成時にmodeで言語を指定する

まずはシンタックスの設定ファイルを読み込む

modeフォルダにいろんな言語のシンタックスの設定ファイル(.jsファイル)が入っている
CSSのシンタックスハイライトをしたい場合、CSSの設定ファイルを取り込む。CSSの設定ファイルは以下の場所にある。

.
├── index.html
├── lib
│   ├── codemirror.css
│   └── codemirror.js
└── mode
    ...
    ├── css
    │   ├── css.js       // これがCSSのシンタックスハイライトのファイル
    │   ├── gss.html
    │   ├── gss_test.js
    │   ├── index.html
    │   ├── less.html
    │   ├── less_test.js
    │   ├── scss.html
    │   ├── scss_test.js
    │   └── test.js
    ...

CSSのシンタックスのファイルはmode/css/css.jsなので、以下のように読み込む
(CSSだから少しややこしいけど、JavaScriptの場合、mode/css/javascript.jsとなる)

<head>
  <script src="mode/css/css.js"></script>
</head>

もし、なにも読み込んでいなかった場合、色は変わらない


次に、CodeMirrorオブジェクトの生成時にシンタックスを指定する
mode: モードというように指定する。もし指定しなかった場合(modeすら渡さない)、最初に読み込んでいるシンタックスの設定ファイルが適用される

<body>
  ...
  <script>
    const editor = CodeMirror(document.getElementById("codeeditor"), {
      mode: "css"   /* CSSのシンタックス */
    });
  </script>
</body>

全体のソース

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CodeMirror</title>
  <!-- 以下の2つは必ず読み込む -->
  <link rel="stylesheet" href="lib/codemirror.css">
  <link rel="stylesheet" href="theme/monokai.css">
  <script src="lib/codemirror.js"></script>
  <script src="mode/css/css.js"></script>

  <style>
    body {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div id="codeeditor"></div>

  <script>
    const editor = CodeMirror(document.getElementById("codeeditor"), {
      mode: "css"    /* modeの指定 */
    });
  </script>
</body>
</html>

参考文献