ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

ReactでHTML(DOM)を表示させる

React

Rendering Elementsという項目でHTML(DOM)を表示させる方法を確認する

reactjs.org

<div id="test"></div>

上のように1行だけのdivタグがあった場合、これに対してDOMを追加する場合は、ReactDOMクラスのrenderメソッドを呼べばよい。

<div id="test"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">

ReactDOM.render(
  <div>Hello React</div>,
  document.getElementById('test')
);

</script>

簡単なHTMLであればReactDOM.renderメソッドで用が足りるが、複雑な場合は、React.Componentクラスのrenderメソッドを使えばいい。

class HelloMessage extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>Hello React</div>
  }
}

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('test')
);

Reactでstyle属性を直接表示(インライン表示)させる方法

React JavaScript

Reactで、例えば、CSSのbackground-imageを動的に設定したい場合、JSXで文字列結合してしまうとエラーが発生してしまう。

// エラー
class Hoge extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        return <div style="background-image:url(" + {this.props.imgURL} + ">Hello React</div>
    }
}

ReactDOM.render(
    <Hoge />,
    document.querySelector('#_foo')
);

そこで、インラインでstyle属性を表示させたい場合はどうすればいいのだろうか？

答えは、一度、変数にstyleの値を設定して、それを展開するというのが一番の近道だった。

class Hoge extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        let _style = {
            backgroundImage:'url(' + this.props.imgURL + ')'
        }
        return <div style={_style}>Hello React</div>
    }
}

ReactDOM.render(
    <Hoge />,
    document.querySelector('#_foo')
);

参考

reactjs.org

脱jQuery～JavaScriptに支配されないための真の思考法～ beforeメソッド

JavaScript jQuery

jQueryのbeforeメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。

// jQuery
$('#hoge').before('<div>before</div>');

// JavaScript
var _div = document.createElement('div');
_div.innerText = 'before';
var _hoge = document.querySelector('#hoge');
_hoge.parentNode.insertBefore(_div, _hoge);

脱jQuery～JavaScriptに支配されないための真の思考法～ removeメソッド

JavaScript jQuery

jQueryのremoveメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。

// jQuery
$('#hoge').remove();

// JavaScript
var _hoge = document.querySelector('#hoge');
_hoge.parentNode.removeChild(_hoge);

脱jQuery～JavaScriptに支配されないための真の思考法～ emptyメソッド

JavaScript jQuery

jQueryのemptyメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。

// jQuery
$('#hoge').empty();

// JavaScript
document.querySelector('#hoge').textContent = '';

非jQuery依存のタギングしてくれるJavaScriptライブラリTaggle.js

JavaScript

JavaScriptでタギングを実装する場合、今まで、jQuery Tags Inputを使っていました。

xoxco.com

上のプラグインも便利なのですが、一点だけ欠点があり、それは、jQuery依存ということ。

jQueryに依存しない独立したプラグインを探したところTaggle.jsというのを発見。

sean.is

まずは、npmを使ってプログラムをインストール。

npm install taggle --save

初期化をする前にまずはプログラムをインクルード。

var Taggle = require("taggle");

次に、第一引数にid属性の値を設定。

<div id="hoge"></div>
<script>
var Taggle = require("taggle");
new Taggle('hoge');

</script>

ついでにCSSも追加する必要がありそうです。

taggle.js/minimal.css at master · okcoker/taggle.js · GitHub

<link rel="stylesheet" href="./minimal.css">

初期値を設定したい場合は、初期化するタイミングで第二引数にtagsパラメータを設定すればいけそうです。

<div id="hoge"></div>
<script>
var Taggle = require("taggle");
new Taggle('hoge',{
  tags:['#foo','#bar']
});

</script>

デフォルトでは、小文字、大文字を区別しないので、厳密に、小文字と大文字を区別したい場合は、preserveCaseパラメータをtrueにすればよさそうです。

<div id="hoge"></div>
<script>
var Taggle = require("taggle");
new Taggle('hoge',{
  preserveCase: true
});

</script>

またデフォルトでプレースホルダーが表示されてしまっているので、何も表示させたくない場合、または、文言を変更したい場合は、placeholderパラメータを設定すれば変更できそうです。

<div id="hoge"></div>
<script>
var Taggle = require("taggle");
new Taggle('hoge',{
  placeholder: 'please input tags.'
});

</script>

<div id="hoge"></div>
<script>
var Taggle = require("taggle");
new Taggle('hoge',{
  placeholder: ''
});

</script>

便利なことに、入力できるタグ数もmaxTagsというパラメータで設定することができる。

<div id="hoge"></div>
<script>
var Taggle = require("taggle");
new Taggle('hoge',{
  maxTags: 10
});

</script>

任意のタイミングでタグを追加したい場合は、addメソッドを呼び出せば削除することができる。

<div id="hoge"></div>
<script>
var Taggle = require("taggle");
var taggle = new Taggle('hoge');
taggle.add('foo');
</script>

タグが追加される前に、そのの内容を確認し、追加するか、または、追加しないかを判断したい場合は、onBeforeTagAddメソッドで確認することができる。 onBeforeTagAddメソッドが呼ばれた時に、第二引数に入力されたタグが文字列として渡される。 入力されたタグを追加したくない場合は、returnでfalseを返せば設定されない。

<div id="hoge"></div>
<script>
var Taggle = require("taggle");
var taggle = new Taggle('hoge',{
  onBeforeTagAdd:function(event, tag){
    if(tag === '#bar'){
      return false;
    }
  }
});
</script>

他にも色々な機能があるので、また、使う際に確認していきたい。

ブラウザがinput type="date"とtype="time"に対応しているか調べる方法

JavaScript

ブラウザがinputタグのtype="date"に対応しているか、または、ブラウザが、inputタグのtype="time"に対応しているか調べる方法


var _test = document.createElement('input');
_test.type = 'date';

if(_test.type === 'text'){
  // dateに対応していない時の処理を実装

}


var _test = document.createElement('input');
_test.type = 'time';

if(_test.type === 'text'){
  // timeに対応していない時の処理を実装

}

最近、ネイティブJavaScript(Vanila JS)で書いているから、すんなり理解できた。

参考

developer.mozilla.org