JavaScript本格入門のアウトプット

久しぶりに技術記事を書く気がします。
現場でReactとRedux、TypeScriptを使って開発しています。
その中で、時々JavaScriptの基礎が不足しているなーと思う場面があったので、
輪読的な形で技術書の各章ごとにアウトプットしていこうかなと思います。
これは、その最初のアウトプットですね。
1章と3章の気になった部分を書いていきます。

ブラウザdevツールの使い方

フロントの開発を行っていくと、必ずブラウザのデベロッパーツールにお世話になると思います。
この使い方がわからないと、かなり苦労するので、優先的に学んだ方がいいです。
※僕は最初かなり苦労しました。笑
ChromeだとCmd + Option + iで出現します。
↓こんな感じのやつですね。

よく使う項目と知らなかった項目に関して取り上げます。

Element(要素)タグ

このタグは、開いているHTMLとCSSの要素を見ることができます。
主にレイアウトの調整時に使うことが多く、僕は以下の目的で使うことが多いです。

• このCSS何で効いてないんだ
• ブロック要素とインライン要素どっちなんだ??
• Formとかinput要素のname、valueは何て名前になってるんだ??

また、CSSを試しに変えてみることも可能なので、
この要素を変えたらどうなるんだろう??的な試し打ちに使ったります。

コンソールタグ

ソースコードに仕込んだconsole.logのデバッグ目的や、エラーメッセージの確認で使うことが多いです。
恐らく一番使う場面が多いタグではないでしょうか。
エンジニアになる前は、バックエンドメインで勉強していたので、フロントのデバッグ出力が、このコンソールで確認できると知ったときは驚ききました。笑

ネットワークタグ

バックエンドへのAPIリクエストやレスポンスが正しく飛んでいるかどうかを確認します。

• 400エラーか500エラーの確認
  • クライアントエラーか、サーバーエラーかを確認したい
• ペイロード
  • 正しいリクエストが飛んでいるのか
• レスポンス
  • リクエストに関して正しいレスポンスボディが返ってきているか

Sources(ソース)タグ

JavaScriptのデバッグタグらしいのですが、僕は知らなかったです。
ただ、VueやReactなどのフレームワークを用いての開発が主になった今では、かなり使いづらいのでは??といった印象でした。
このdevツール上では、ReactやVueのコードから生のJavaScriptに変換されて、表示されている為、ReactやVue→生のJavaScriptの変換理解を頭で行わなくてはならない為、ソースコードにconsole.logを仕込んだほうが早いのでは??と思ってしまいました。

演算子

Reactを使う上でのアウトプットになるので、よく見る部分を改めてアウトプットしていきます。

分割代入

Reactでは、propsを通してコンポーネント間の値の受け渡しが多いので、この手法がよく見られます。
簡単にいうと、配列やオブジェクトに格納されている値をシンプルに見せるという感じでしょうか。
コードを見せた方が分かりやすいですね。

//配列の場合
let date:[] = [1,2,3,4,5]
let [num1,num2,num3,num4,num5] = date[]
console.log(num1)  //1

//オブジェクトの場合
let profile = {name: "taro", age: 25, gender: "men"}
let {name,age} = profile
console.log(name)  //"taro"

Reactで複数propsを貰う際は、
{a,b,c,d,e} = props
みたいな感じで使うことが多いです。