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>

参考文献

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

JavaScript CodeMirror

CodeMirrorって何！？

JavaScriptで簡単にそれっぽいテキストエディタを生成できるライブラリ！GitHubやCodePenでも使われてる
また、カスタマイズもできるらしく、面白そう！！！！

実装してみた

以下の動画を見るとわかるが、本当にすごい簡単に実装できる。3分もあればできちゃう。

www.youtube.com

動画をみながら実際にやってみた

準備

CodeMirrorのページからCodeMirrorを動作させるためのファイルをZIPでダウンロードする
ダウンロードし、解凍したら、libとmodeという2つのフォルダをコピーしてくる

こんな感じ

.
├── index.html  // 作成する
├── lib
└── mode

libはCodeMirrorを動作させるために必須な物が入っている。modeは言語のシンタックスの設定ファイル。(themeというものもあるが、これはエディタのテーマ)

次にindex.htmlを編集する

コアとなるCSSとJavaScriptを読み込む

以下の2つはCodeMirrorを使うときには必ず読み込むファイル

  • lib/codemirror.css
  • lib/codemirror.js

modeフォルダのファイルには言語のシンタックスの情報が記述されている

<head>
  ...
  <!-- 以下の2つは必ず読み込む -->
  <link rel="stylesheet" href="lib/codemirror.css">
  <script src="lib/codemirror.js"></script>
  ...
</head>

エディタの生成

エディタの生成するにはCodeMirrorオブジェクトを作るだけ
CodeMirrorのコンストラクタである要素を渡すと、その要素の中にエディタを生成してくれる(内側にできるんだね...てっきり外側に出来てるのかと思ってた...)

以下の例では、idがcodeeditorのdiv要素の中にエディタを生成している

<body>
  <div id="codeeditor"></div>

  <script>
    const editor = CodeMirror(document.getElementById("codeeditor"));
  </script>
</body>

HTMLが読み込まれると、以下のようにエディタができる！！！
(テキストは入力した)

f:id:tmg1998:20180415214818p:plain:w400

全体のソース

index.html

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

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

  <script>
    const editor = CodeMirror(document.getElementById("codeeditor"));
  </script>
</body>
</html>

参考文献

CodeMirrorを使ってみた - JavaScript

CSS HTML JavaScript テキストエディタ作成

コーディング用のテキストエリアを簡単に実装できるライブラリを見つけたので使ってみた
textareとリンクさせて使うのが一般的な気がするけど、今回はすでにある要素と置き換えるようにしてみた

CodeMirror

まずは、http://codemirror.net/ にアクセスしてダウンロードする。(gitでcloneするのもいいらしい)

コーディング

まず、CodeMirrorを使うために必要なファイルをheadで読み込む

<head>
  <script src="lib/codemirror.js"></script>
  <link rel="stylesheet" href="lib/codemirror.css">
  <!-- ハイライトしたい言語を選んで読み込むらしい -->
  <script src="mode/javascript/javascript.js"></script>
</head>

第1引数に設定した要素の中にテキストエリアを作成する。第2引数にはテキストエリアの設定をdictionaryで渡すことができる。

CodeMirror(要素, テキストエリアの設定);

body内にテキストエリアを作成してみる

CodeMirror(document.body);

modeで言語の指定、valueで初期値を設定できる

CodeMirror(document.body, {
  mode: "javascript",
  value: "const text = () => {return 0;}"
});

縦、横幅の指定

setSize()で指定できるらしい。

横を100px、縦を200pxに指定する場合

const cm = CodeMirror(elem);
cm.setSize("100px", "200px");

stackoverflow.com

すでにある要素と置き換え

/**
 * CodeMirrorに置き換える
 * @param {Object} 置き換えるHTMLElement
 */
const replaceCodeMirror = (elem) => {

  // 行数の表示
  const conf = {
    lineNumbers: true,
  };

  // 置き換え
  const editor = CodeMirror(elt => {
    elem.parentNode.replaceChild(elt, elem); 
  }, conf);

  editor.setSize("100%", "100%");
};

replaceCodeMirror(document.getElementById("editor1"));

公式ページに乗ってた方法を使って置き換えをしてみた
idがeditor1の要素をCodeMirrorに置き換えている

普通の使い方はtextareaとリンクさせるらしい

いろんな設定ができるらしいから少しずつやっていこう

参考文献