フロントエンド開発者が知らない11の秘訣

本記事は、[Daniel Anderson](https://danthedev.medium.com/)氏による「[11 Frontend tricks that most Frontend Developers don't know about](https://medium.com/javascript-in-plain-english/11-frontend-tricks-that-most-frontend-developers-dont-know-about-68dc48199ed6)」（2020年10月14日公開）の和訳を、著者の許可を得て掲載しているものです。

#フロントエンド開発者が知らない11の秘訣

>HTML／JavaScript／CSSでできる面白いコツ

![Frontend tricks.HTML/CSS/JavaScript](https://miro.medium.com/max/576/0*aNXDLv8omJjaSpql)

Photo by [FLOUFFY](https://unsplash.com/@theflouffy?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=medium&utm_medium=referral)

##はじめに

多くのフロントエンド開発者が知らない、HTML／CSS／JavaScriptの秘訣を紹介します。

あなたが知らなかったことが、このリストの中に少なくともいくつかあることを願います！

##1. データリスト要素

なぜかあまり使われていないHTML要素です！

`<datalist>`タグは、`<input>`要素に「オートコンプリート」機能を追加するために使われます。入力すると、`<option>`で予め定義したドロップダウンリストが表示されます。

![Image for post](https://miro.medium.com/max/224/1*0U-rN1M_Vh0a2Cs_TAnGKw.png)

```html
<input list="animals" name="animal" id="animal">

<datalist id="animals">
  <option value="Cat">
  <option value="Dog">
  <option value="Chicken">
  <option value="Cow">
  <option value="Pig">
</datalist>
```

`<datalist>`のid属性は`<input>`のlist属性と同一にして、両者を結び付ける必要があります。

##2. クリッカブルラベル付きチェックボックス

チェックボックスにクリッカブルラベルを付けたい場合、通常、以下のように「for」属性を持つ`label`要素を使います。

```html
<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">I agree</label>
```

実は、チェックボックスを`label`要素で囲むだけで同じことができます。「I agree」をクリックすると、チェックボックスが選択されます！


```html
<label><input type="checkbox" name="checkbox" id="checkbox_id" value="value">I agree</label>
```

##3. 子セレクタ

ここで取り上げるコツの中で、おそらく最もよく使われているものですが、多くの人はその力量を知りません。

子セレクタは、指定された要素のすべての子要素を指定するために使い、2要素間の関係を与えます。

```css
/* 1st <li> element */
li:first-child {
  color: red;
}

/* Last <li> element */
li:last-child {
  color: green;
}

/* Select All <li> elements but The First Three */
li:nth-child(n+4) {
  color: yellow;
}

/* Select only the first 3 <li> elemets */
li:nth-child(-n+3) {
  color: green;
}

/* Styles are elements that are not a <p> */
.my-class:not(p) {
  display: none;
}
```

##4. 書き込みモード

書き込みモードはあまり知られていませんが、非常に強力なCSSプロパティです。

文字列を以下のように縦書きにできます。

![Image for post](https://miro.medium.com/max/224/1*xItikwe9cbOUDYNG-6MW6A.png)

コードは非常に簡単です。

```css
writing-mode: vertical-rl;
```

```html
<style>
.sideway {
  writing-mode: vertical-rl;
}
.normal {
  width: 5%;
  float: left;
}
</style>
<p class="normal">
  Hi some paragraph text
</p>
<p class="sideway">
  Hey I'm some sidway text
</p>
```

`writing-mode`プロパティには、指定できる値が5つあります。

```css
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;
```

##5. calc関数

`calc()`CSS関数は、CSSプロパティ値指定に計算式を使えます。

`calc()`で最も便利な機能は、%やpxなどの単位を組み合わせられることです。プリプロセッサはこれができません。これは、レンダリング時に実行されます。

```css
width: calc(5px + 100px);
width: calc(6em * 8);
width: calc(100% - 50px);
```

##6. Math.roundとMath.floorの代替

読みやすくはないかもしれませんが、格好いいコツです。

`Math.floor()`の代わりに`0|`を使えます。

```javascript
0|743.4343 // returns 743
Math.floor(743.4343) // returns 743
```

`Math.round()`の代わりに`+.5|0`を使えます。

```javascript
812.777+.5|0 // returns 813
Math.round(812.777) // returns 813
```

##7. Console.table

`console.log()`を使ったことがあれば良いのですが。これは配列またはオブジェクトを受け取り、表形式に整えてコンソールに表示できます。

```javascript
let car1 = { name : "Audi", model : "A4" }
let car2 = { name : "Volvo", model : "XC90" }
let car3 = { name : "Ford", model : "Fusion" }

console.table([car1, car2, car3]);
```

![Image for post](https://miro.medium.com/max/576/1*7UCwjFU2l66AdrXqqdWPgw.png)

##8. Console.time

もう1つの便利なconsoleのメソッドです。`console.time()`の引数にラベル名を渡してタイマーを開始します。次に`console.timeEnd()`の引数に同じラベル名を渡してタイマーを終了すると、`console.time()`から`console.timeEnd()`までの時間をミリ秒単位でコンソールに出力します。

![Image for post](https://miro.medium.com/max/576/1*H2fApbXE6q4mKBfWaUDILQ.png)

```javascript
// Starts the timer
console.time("MyTimer");

// Ends the timer and outputs the time in milliseconds
console.timeEnd("MyTimer");
```

##9. in演算子

in演算子は、配列にそのインデックスが存在するかを確認し、trueまたはfalseを返します。

```javascript
let cars = ['Audi', 'BMW', 'Mini', 'Bentley', 'Porsche'];
0 in cars // returns true
3 in cars // returns true
6 in cars // returns false
```

オブジェクトにプロパティが存在するかも確認できます。

```javascript
const person = { firstName : "Dave", surname: "Smith", age: 34 };
'firstName' in person // returns true
'surname' in person // returns true
'age' in person // returns true
'gendar' in person // returns false
```

##10. Chromeのテキストエディタ化

ちょっと変わったものも紹介します。URLバーに以下を入力してリターンキーを押すと、Chromeがメモ帳に変わります。

```
data:text/html, <html contenteditable>
```

##11. 波括弧のないifブロック内の複数文

私は実際あまり使用しませんが、それでも多くの人が知らないものです。秘訣はコンマです！

```javascript
if (1 === 1)
alert("Alert 1"), alert("Alert 2");
```

#まとめ

ここで取り上げた秘訣がすべて実用的という訳ではないかもしれませんが、フロントエンド開発で十分に使われていないものも間違いなくあり、フロントエンドのスキルを高めるために本当に役立ちます。他にも多くの秘訣があると思います！

楽しんでいただけたでしょうか？

この記事が気に入ったら、[**私達のYouTubeチャンネルDecoded**](https://www.youtube.com/channel/UCtipWUghju290NWcn8jhyAw)を購読して、類似コンテンツを手に入れてください！

翻訳協力

Original Author: [Daniel Anderson](https://danthedev.medium.com/)
Original Article: [11 Frontend tricks that most Frontend Developers don't know about](https://medium.com/javascript-in-plain-english/11-frontend-tricks-that-most-frontend-developers-dont-know-about-68dc48199ed6)
Thank you for letting us share your knowledge!

この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。
選定担当: @gracen
翻訳担当: @gracen
監査担当: -
公開担当: @gracen

##ご意見・ご感想をお待ちしております
今回の記事は、いかがだったでしょうか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に
コメント欄にてご投稿ください。[Twitter](https://twitter.com/BabyDegu?lang=ja)でもご意見を受け付けております。
皆様のメッセージをお待ちしております。