Clever Geek Handbook

いくつかの単純なJavaScriptは多くのことができます

私はプロのフロントエンド開発者として働いたことはありません。小規模なサイドプロジェクト用にHTML / CSS / JSを15年間書いていますが、すべてのプロジェクトは非常に小規模でした。これらのプロジェクトの間に何年もJavaScriptで記述していないことがあり、すべてを正しく行っているかどうかよくわかりません。



これが、ライブラリをよく使用する理由の1つです。10年前、私はjQueryを使用し、2017年以来、小規模プロジェクトでvue.jsを頻繁に使用しています（Vueの紹介として作成した小さなサッパーゲームをチェックできます）。



でも先週、久しぶりにライブラリなしの簡単なJavascriptを書いたので楽しかったので、少しお話したかったです！



単純なJavascriptの実験



私はVueが本当に好きです。しかし、先週、https：//questions.wizardzines.comの開発を開始したとき、通常とは少し異なる制限がありました-同じHTMLを使用してPDFを生成し（Princeを使用）、インタラクティブなバージョンを作成しました質問。



Vueでこれがどのように可能になるかは実際にはわかりませんでした（VueはすべてのHTMLを独自に作成したいためです）。これは小さなプロジェクトだったので、ライブラリなしのプレーンなJavascriptで書いてみることにしました<script src="js/script.js"> </script>。



私はこれをしばらく行っていません。その過程で、最初に思ったよりもプロセスを簡単にするいくつかのことを学びました。



CSSクラスを追加および削除することで、ほぼすべてのことを行います



トランジションをアニメーション化する場合は、CSSクラスを追加および削除し、CSSトランジションを使用するだけで、ほぼすべてのユーザーインターフェイスを実装することにしました。



これは、next質問のボタンをクリックしてクラスdoneを親divに追加する小さな例です。 



div.querySelector('.next-question').onclick = function () {
    show_next_row();
    this.parentElement.parentElement.classList.add('done');
}


それはかなりうまくいきました。私のCSSは、いつものように、少し混乱していますが、扱いやすいようです。



.classListを使用したCSSクラスの追加/削除



私は次のようにクラスの編集から始めましたx.className = 'new list of classes'。それは少し厄介ですが、もっと良い方法があるかどうか疑問に思いました。そして彼はそうでした！



CSSクラスは次のように追加できます。 



let x = document.querySelector('div');
x.classList.add('hi');
x.classList.remove('hi');


element.classList.remove('hi') -これは私の以前の方法よりもずっときれいです。



document.querySelectorAllを使用してアイテムを検索する



私がjQueryの学習を始めたとき、DOMで何かを簡単に見つける必要がある場合は、jQuery（たとえば$('.class')）を使用する必要があると思ったのを覚えています。今週私はあなたが代わりdocument.querySelectorAll('.some-class')に書くことができることを学びました、そしてあなたはどのライブラリにも依存する必要はありません！



紹介されて気になったquerySelectorAll。私は少しグーグルしました、そしてセレクターAPIが2008年と2013年の間にいつか作成されたようです- 2008年に提案された実装について議論しているjQueryの著者からのメッセージと2011年のブログ投稿を見つけました、それは一度にすべての主要なブラウザにあったので、jQueryを使い始めたときには存在していなかったかもしれませんが、かなり長い間使用されていました:)



.innerHTMLをインストールする



ある場所で、ボタンのHTMLコンテンツを変更したいと思いました。でDOM要素を作成するのはdocument.createElementかなり退屈なので、作業を最小限に抑え、代わり.innerHTMLに必要なHTML行を設定しようとしました。 



  button.innerHTML = `<i class="icon-lightbulb"></i>I learned something!
    <object data="/confetti.svg" width="30" height = "30"> </object>
    `;


.scrollIntoViewでページをスクロールする



私が見つけた最後の面白いことはこれ.scrollIntoViewです。誰かが「次の質問」ボタンをクリックしたときに、次の質問に自動スクロールしたかったのです。これは、たった1行のコードであることがわかります。 



row.classList.add('revealed');
row.scrollIntoView({behavior: 'smooth', block: 'center'});


バニラJSの別の例：peekobot



私が良いと思った単純なJSライブラリのもう1つの小さな例は、peekobotです。これは、100行のJS / CSSで構成される小さなチャットボットインターフェイスです。彼のJavascript



からわかるように、彼はいくつかの類似したパターンを使用しています。多くの場合、一部はDOMに要素を追加しています。 peekobotソースから、私は学びました.closest要素指定されたセレクタに一致する最も近い祖先を見つけ、。それは、私がJavascriptで書いた、もろいように見えるいくつかのものを取り除くための良い方法だと思われます。.classList.add.querySelectorAll



.parentElement.parentElement



単純なJavascriptは多くのことができます！



単純なJSでどれだけのことができるかに驚いた。結局、私がやりたいすべてのことを実行するJSの約50行を書き、ユーザーラーニングに関する匿名のメトリックを収集するためにもう少し書きました。



私のフロントエンドの投稿でいつものように、これはフロントエンドの開発に関する深刻なアドバイスではありません。私の目標は、基本的に機能するJavaScriptの行が200行未満の小さなWebサイトを書くことです。あなたもフロントエンドの世界にいるなら、これが少し役に立てば幸いです！


More articles:


All Articles