ウェブ開発者としてのあなたの生産性を高める7つのチップス🚀

ソフトウェア開発者としてより生産的であることは、単に仕事のために適切なツールを使用することによってされることができます.もし1日1分を節約できるならば、休暇をとっていないならば、一年に4時間は節約できます.)
したがって、ここでの理由なしで、時間を節約するのを助けることができた私の7つのチップは、あります:

より速いquerySelectorウェブ開発者として、我々はブラウザで多くの時間を過ごします、あるいは、我々のブラウザのdevtoolで、私は言うべきです.これらのdevtoolsのコンソールからよく、あなたはどちらかによって要素を選ぶことができますdocument.getElementById APIまたはより汎用性からdocument.querySelector and document.querySelectorAll エイプ.
しかし、それを行うには高速な方法です.代わりに

$('.some-class') // instead of document.querySelector
$$('.some-class') // instead of document.querySelectorAll

注意querySelectorAll nodelistを返します$$ 配列を返します.

要素の検査
もう一つの便利な機能を使用すると、要素を検査するときには$0 . 要素を検査した後に、コンソールでそれを$0 :

"$ 0 "で要素を検査する

勢力console オブジェクト
あなたがウェブプロジェクトで働いているならば、チャンスはあなたが使用しているということですconsole.log あなたのアプリケーションをデバッグするには.あなたは知っていますかconsole オブジェクトには、コードをデバッグするのに役立つ他のメソッドがありますか?
The console.table 例えば、あまり知られていない方法ですが、あなたの変数の値をすばやくソートすることができます.( console.table 番目の引数を保持したいカラムの配列として受け取り、残りのカラムをフィルタリングします)

コンソールを使う.テーブル
もう一つの便利な方法はconsole.dir . このメソッドでは、HTMLの代わりにDOM要素のJavaScriptオブジェクトをログ出力できます.

const element = $$('your-component')[0];

console.log(element); // displays the HTML element

console.dir(element); // displays the list of the element's properties

デバッグするより良い方法
The console オブジェクトは大きいです、しかし、あなたがコードをデバッグするためにそれを使っているならば、あなたはあなたが必要とするより多くの時間を費やすかもしれません.コンソールロギングの代わりに、あなたは変数をコンソールで調べますdebugger スコープのすべての変数にアクセスしますdebugger が存在する.
使用例を見るdebugger ベロー

デバッガの使用

あなたは知っていましたかdesignMode ?
次のシナリオを想像してみましょう.内部にテキストを保持するコンポーネントをスタイリングする作業をしています.また、コンポーネントのテキストを変更することによって、いくつかのエッジケースをテストしたい場合は、例えば、めちゃくちゃ長いテキストやテキストをまったく入れて.
DOMツリーまたはソースコードのコンポーネントのHTMLを編集することでこれを達成することができますが、最も簡単な方法はdesignMode ドキュメントのプロパティ'on' , その後、Webページ上で直接テキストを変更します.
devtools実行中:document.designMode = 'on' :

ドキュメントの設定.のモードを
デバッグについては、いくつかのコードを書いている間、より生産的になる方法を見てみましょう.

オブジェクトの破壊を利用する
ES 6、または任意のトランスポーターを使用している場合は、すぐにオブジェクト(および配列)プロパティにアクセスすることによって破壊を利用することができます.
つの大きなユースケースは新しい変数を宣言しています.以下に例を示します:

// Using it on arrays

const geolocation = [1.420000, 42.10000];
// Slow to type
const long = geolocation[0];
const lat  = geolocation[1];
// Fast
const [long, lat] = geolocation;

// Same goes for objects:

const geolocation = { long: 1.420000, lat: 42.10000 }
// Slow to type
const long = geolocation.long;
const lat  = geolocation.lat;
// Fast
const { long, lat } = geolocation;

破壊のもう一つの大きな使用法は、変数値を交換することです.次のようにします.

let a = 1; 
let b = 2;

[a, b] = [b, a]

console.log(a, b) // 2, 1

ℹ️ 破壊は広大な主題です.あなたはそれについての詳細を読むことができますthis article .

スプレッド演算子
最後になるが、最後に、この最後のヒントは、リストの私のお気に入りの1つ、私はすべての時間を使用するものです.スプレッド演算子のおかげで、JavaScriptはこれまで以上にダイナミックになっている.
この演算子を使用する1つの方法は、配列とオブジェクトをコピーして結合する方法です.

// For arrays

const arr1 = [0, 1];
const arr2 = [2, 3];

const copyOfArr1 = [...arr1];
const concatenating = [...arr1, ...arr2]; // [0, 1, 2, 3]

// Same works with objects:

const ob1 = { name: 'mark' };
const ob2 = { surname: 'smith' };

const copyOfOb1 = {...ob1};
const concatenating = {...ob1, ...ob2}; // { name: 'mark', surname: 'smith' }

また、スプレッド演算子を使用して、オブジェクトや配列に値をプッシュ/シフトできません.以下に例を示します.

let array = [1, 2, 3];

array = [0, ...array, 4]; // [0, 1, 2, 3, 4]

これはオブジェクトに対しても動作しますが、プロパティが既にオブジェクト内で定義されている場合は、上書きされます.

let ob = { name: 'mark', age: 30 };

ob = { ...ob, age: 20 };
console.log(ob); // { name: 'mark, age: 20 }

あなたが利用できるスプレッド演算子の別の使用は、引数の配列を持つ関数を呼び出すことです.

const numbers = [1, 2, 3, 4, 5, 6, 7];

Math.max(...numbers); // 7

これがこのポストです.閉じるこの動画はお気に入りから削除されています.あなたがした場合は、お友達や同僚と共有してください.また、それは非常に私を助けるだろうTwitterで私に従うことができます.
良い一日を!

次に何を読むか.

7 amazing CSS properties you may not know (yet)

Mustapha Aouas ・ Apr 20 '20 ・ 5 min read

#css #webdev #design #beginners