JSFiddle - React, Tailwind, and code Playground

by mejileben

HTML

<div class='hogehoge'>
    before
</div>
<div id='hogehoge'>
    before
</div>
<div class='hogehoge'>
    before
</div>

JavaScript

// 変数$に関数を代入する
var $ = function(elementName){
    // [参考]
    // var系の変数宣言はメソッドの最初にまとめてしておく
    // http://qiita.com/Chrowa3/items/a11adcd811e253a0b333
    var myJQuery,
        elements = [],
        targetElementList,
        targetClass,
        targetId;

    // ［準備］
    // elementNameが指す要素をelementsという配列に入れていく作業
    // elementNameがドットから始まるか、
    // シャープから始まるかによって処理を分岐している
    // textメソッドで使うので、配列elementｓに要素を代入しておく
    if(elementName.startsWith('.')){
        // 文字列からドットを取り除く
        targetClass = elementName.replace('.', '');

        // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName
        // class名のリストが返ってくる
        // classなので複数要素があるかもしれないため、配列がtargetElementListに入る
        targetElementList = document.getElementsByClassName(targetClass);

        for(var i = 0; i < targetElementList.length; i++){
            // https://developer.mozilla.org/ja/docs/Web/API/HTMLCollection
            // この辺の詳細は参考までに。
            // 配列の末尾にHTML要素を追加していく
            elements.push(targetElementList.item(i));
        }
    }else if(elementName.startsWith('#')){
        targetId = elementName.replace('#', '');

        // IDは1つだけなので特に繰り返し文はいらない
        elements.push(document.getElementById(targetId));
    }

    // ［本題］
    // textメソッドをmyJQueryオブジェクトに追加する
    myJQuery = {
        text: function(text){
            // もしelementsが空だったらエラーになるのでreturnしておく
            if(!elements.length){
                return false;
            }

            // 配列elementsの一つ一つに対して、innerTextを書き換える
            // https://developer.mozilla.org/ja/docs/Web/API/Node/innerText
            // forEach文は、配列の要素一つ一つに対して、引数で渡した関数を実行する
            // 引数で渡す関数をinnerTextを書き換える関数にしておけば、全elementのinnerTextを書き換える
            elements.forEach(function(element){
                element.innerText = text;
            });
            return true;
        }
    };

    // 最後にtextメソッドをプロパティとして持っているmyJQueryオブジェクトを返す
    return...