Javascriptツールの使用例

レダ・サルミ

React 開発者

プログラミングのレベルアップに役立つ検索ツールJavaScriptをご紹介します。ESLint、Prettier、Huskyについてもっと知る！

どこを見るか、それは素晴らしいことだ。 ジャバスクリプト そして、その時代からどれだけ進化してきたか。ES2015の時代である。 ヴァール そして $(.submitBtn) ははるか彼方にある。javascriptが
進化し、それを取り巻くツール（フォーマッタ、リンタ、バンドル）はますます良くなっています。 ESLint (リンター）、もっとかわいく (フォーマッター）とハスキー (Gitフック) は開発者の経験を向上させ、アプリケーションに大きな影響を与えます。この記事では React しかし、これらのツールはどのようなJavascript/Nodeアプリケーションでも使用できることを覚えておいてください。Reactを生成することから始めましょう。プロジェクト使用して バイト 以下の手順で：

npm create vite@latest
プロジェクト名：js-tools
フレームワークを選択: react
バリアントを選択: react
cd js-tools
npm インストール

コード品質のためのESLint

ESLint は、JavaScriptの問題を見つけ、修正するのに役立つツールです。コード.を追加する
アプリは以下の手順で行う：

cd js-tools
npm init @eslint/config
# 設定を初期化するために以下の質問に答える必要があります。
ESLintをどのように使いたいですか？構文をチェックして問題を見つける
プロジェクトで使用するモジュールの種類は？JavaScriptモジュール（インポート/エクスポート）
どのフレームワークを使用していますか？React
あなたのプロジェクトはTypeScriptを使っていますか？いいえ
コードはどこで実行されますか？ブラウザ
コンフィグファイルの形式は？ジャバスクリプト
今すぐインストールしますか？はい
どのパッケージマネージャを使用しますか？ npm
#追加のプラグインをインストールします。
npm i --save-dev eslint-plugin-react-hooks eslint-plugin-jsx-a11y

これは .eslintrc.cjs ファイルには ESLint コンフィグをアプリのルートに置き、次のようにしよう。
インストールしたプラグインで設定ファイルを更新し ルール:

const error = 2；

module.exports = { 以下のようにします。
  env: {
    browser: true、
    es2021: true、
  },
  extends：[
    'eslint:recommended'、
    'plugin:react/recommended'、
    'plugin:react/jsx-runtime'、
    'plugin:react-hooks/recommended'、
    'plugin:jsx-a11y/recommended'、
  ],
  parserOptions：{
    ecmaFeatures：{
      jsx: true、
    },
    ecmaVersion: 'latest'、
    sourceType：module'、
  },
  plugins：['react']、
  ルール{
    'no-unused-vars': エラー、
  },
  settings：{
    react: {
      version: 'detect'、
    },
  },
  ignorePatterns：['node_modules', '.eslintrc.cjs', 'dist']、
};

各プラグインの推奨設定を使用しています。 未使用バーなし を追加する必要がある。 リント コマンドを package.json ファイルを以下のように変更する：

{
  ...,
    "スクリプト"：{
        "dev"："vite"、
        "build"："vite build"、
        "preview"："vite preview"、
        "lint"："eslint --ext js,jsx ."
    },
  ...
}

今、私たちは ESLintのセットアップ 準備ができたので、アプリを更新してテストを行い、次のことを確認します。
どのように機能するかまず最初にすることは App.jsx ファイルを ソース このコンポーネントには、画像、基本的なビデオ・プレーヤー、ビデオ・プレーヤーを切り替えるボタンが含まれています。
クリックすると再生/一時停止状態になる：

インポート { useEffect, useRef, useState } from 'react'；

エクスポート default function () {
  const videoRef = useRef(null)；
  const [isPlaying, setIsPlaying] = useState(false)；
  const heading = 'Hello ESLint + Prettier + Husky'；

  useEffect(() =&gt; {)
    if (!isPlaying) {
      videoRef.current.play()；
    } else { { videoRef.current.pause()
      videoRef.current.pause()；
    }
  }, []);

  const togglePlay = () =&gt; setIsPlaying(!isPlaying)；

  return (
    <div>
      <button type="button" onclick="{togglePlay}">
        {isPlaying ?'Pause' : 'Play'}.
      </button>

      <div>
        <video
          loop
 playsinline
 ref="{videoRef}"          src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
        />
      </div>

      <div>
        <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" />
      </div>
    </div>
  );
}

インポート { useEffect, useRef, useState } from 'react'；

エクスポート default function () {
const videoRef = useRef(null)；
const [isPlaying, setIsPlaying] = useState(false)；
const heading = 'Hello ESLint + Prettier + Husky'；

useEffect(() =&gt; {)
if (!isPlaying) {
videoRef.current.play()；
} else { { videoRef.current.pause()
videoRef.current.pause()；
}
}, []);

const togglePlay = () =&gt; setIsPlaying(!isPlaying)；

return (

<div>
    <video
      loop
 playsinline
 ref="{videoRef}"      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    />
  </div>

  <div>
    <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" />
  </div>
</div>
);
}

では リント コマンドは、私たちの App.jsx コード

Reactに関連するもの、a11yに関連するもの、そして未使用の変数を禁止するために追加したルールに起因するものです。ESLintの素晴らしいところは、エラーをキャッチして解決方法を示してくれることと、すべてのルールが非常によく文書化されていることです。私たちのコードを修正するには、次のことが必要です：

- コンポーネントに名前を付ける

- 変数 `heading` を使うか、無駄なら削除する。

- 動画プレーヤーのキャプションに `track` タグを追加する。

- 意味のあるテキストを含む `alt` 属性を image 要素に追加する。

lint`コマンドを実行してこれらの修正を適用したところ、エラーは発生しなくなった：

  インポート { useEffect, useRef, useState } from 'react'；

エクスポート default function App() {
const videoRef = useRef(null)；
const [isPlaying, setIsPlaying] = useState(false)；
const heading = 'Hello ESLint + Prettier + Husky'；

useEffect(() =&gt; {)
if (!isPlaying) {
videoRef.current.play()；
} else { { videoRef.current.pause()
videoRef.current.pause()；
}
}, [isPlaying])；

const togglePlay = () =&gt; setIsPlaying(!isPlaying)；

return (

{ヘッディング｝

<div>
    <video
      loop
 playsinline
 ref="{videoRef}"      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    >
      <track kind="captions" src="flower-en.vtt" srclang="en" />
    </video>
  </div>

  <div>
    <img
      alt="グレープフルーツのスライス"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

を使わなければならないのは少し煩わしい。 リント gitフックを設定することで、この作業を自動化し、この問題を解決することができます。ハスキーセクションを参照されたい。

コードの書式をより美しく

もっとかわいく は、多くの言語をサポートし、多くのコード・エディターと統合できる、意見を取り入れたコード・フォーマッターだ。私たちのアプリにprettierを追加してみよう：

npm install --save-dev --save-exact prettier

アプリのルートに2つのファイルを作成する必要がある。 .prettierignore ファイルで、フォーマットしたくないファイルやフォルダを無視する：

node_modules/
dist/
public/

そして .prettierrc.json ファイルを作成する：

{
"arrowParens"："always"、
"bracketSameLine": false、
"bracketSpacing": true、
"endOfLine"："lf"、
"embeddedLanguageFormatting"："auto"、
"htmlWhitespaceSensitivity"："css"、
"insertPragma": false、
"jsxSingleQuote": false、
"printWidth"：80,
"proseWrap"："always"、
"quoteProps"："as-needed"（必要に応じて）、
「requirePragma": false、
"semi": true、
「singleQuote": true、
tabWidth": true、"tabWidth": 2：2,
「trailingComma"：「all": true、
「useTabs": true
}

Prettierの設定はカスタマイズ可能なので、Prettierのプレイグラウンドを弄って、自分に一番合う設定を見つけることができる。prettierとうまく連動させるための追加ステップ ESLint は、追加のESLintプラグインをインストールすることです：

npm i --save-dev eslint-config-prettier

また .eslintrc.cjs ファイルに プリティ に対する 拡張 配列に入れる必要がある。最後の位置で他の設定を上書きする：

const error = 2；

module.exports = {.
...,
extends：[
'eslint:recommended'、
'plugin:react/recommended'、
'plugin:react/jsx-runtime'、
'plugin:react-hooks/recommended'、
'plugin:jsx-a11y/recommended'、
'prettier'、
],
...

prettierの実行は簡単で単純である。 npx prettier --write . コマンドを使えば、キーボードショートカットを使うか、ファイルを保存するたびに自動的にPrettierの機能を最大限に活用できる。コーディング中に行が長くなって画面に収まりきらなくなったら、キーを押すだけで、魔法のように複数の行に折り返されるのを見ることができる！また、コードを貼り付けてインデントが乱れてしまったときも、Prettierがエディタを離れることなく修正してくれます。

しかしそれでも、開発者のひとりがプリティアをサポートしていないエディターを使っていて プリティ この問題を解決する方法がある。ハスキーセクションを参照されたい。

Gitフック用ハスキー

ハスキー を使うと、コミットやプッシュの際に git フックをセットアップしてコミットメッセージの lint やテストの実行、コードの lint などを行うことができます。私たちは、lint-staged を使ってコミット前のコードのリントや整形を自動化しようと考えています。

npx husky-init && npm install
npm i --save-dev lint-staged

これは ハスキー フォルダに コミット前 ファイルを更新します。次のステップは package.json ファイルをセットアップする 前後期 コマンドを実行し、現在のコミットで変更されたファイルをフォーマットするよう指示する：

{
...,
"scripts"：{
"dev"："vite"、
"build"："vite build"、
"preview"："vite preview"、
"lint"："eslint --ext js,jsx ."、
"prepare"："husky install"
},
"lint-staged"：{
"**/*.+(js|jsx|json|css)"："prettier --write --ignore-unknown"
},
...
}

最後のステップは コミット前 ファイルで リント コマンドを実行し、変更されたファイルを 前後期 コマンドを使用している：

usr/bin/env sh

."$(dirname -- "$0")/_/husky.sh"

npm run lint
npx lint-staged
```

VideoPlayer.jsxコンポーネントを作成し、App.jsxで使用する：

javascript
インポート { useEffect, useRef } from 'react'；

export default function VideoPlayer({ isPlaying, videoSrc, trackSrc }) { { { videoRef = useRef.
const videoRef = useRef(null)；

useEffect(() => { )
if (!isPlaying) { { videoRef.current.play()
videoRef.current.play()；
} else { videoRef.current.pause()
videoRef.current.pause()；
}
}, [isPlaying])；

return (

);
}

import { useState } from 'react'；
import VideoPlayer from './VideoPlayer'；

エクスポート default function App() {
const [isPlaying, setIsPlaying] = useState(false)；
const heading = 'Hello ESLint + Prettier + Husky'；

const togglePlay = () =&gt; setIsPlaying(!isPlaying)；

return ()
 
{ヘッディング｝
 <div>
    <videoplayer
      isplaying="{isPlaying}"      tracksrc="flower-en.vtt"
      videosrc="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
    />
  </div>

  <div>
    <img
      alt="グレープフルーツのスライス"
      src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg"
    />
  </div>
</div>
);
}

これでコードに満足したので、変更をコミットしてどうなるか見てみよう。

今回もまたエラーが発生し、propsのバリデーションが欠落しているため、コミットが成功していないことがわかります。最初にPropTypesをインストールすることでこれを修正しましょう npm i prop-types を更新する。 ビデオプレーヤー コンポーネントを使用している：

import { useEffect, useRef } from 'react'；
import PropTypes from 'prop-types'；

export default function VideoPlayer({ isPlaying, videoSrc, trackSrc }) { { { videoPlayer({ isPlaying, videoSrc, trackSrc })
const videoRef = useRef(null)；

useEffect(() => { )
if (!isPlaying) { { videoRef.current.play()
videoRef.current.play()；
} else { videoRef.current.pause()
videoRef.current.pause()；
}
}, [isPlaying])；

return (

);
}

VideoPlayer.propTypes = { {.
isPlaying：PropTypes.bool.isRequired、
videoSrc：PropTypes.string.isRequired、
trackSrc：PropTypes.string.isRequired、
};

これらのエラーを修正した後、リントとコードフォーマットのコマンドを実行すると、コミットは成功しました。このように、Huskyでは基本的にこのコミット前フックを使ってリントとフォーマットを自動化し、コードベースに不要なコードを残さないようにしている。また、エディタの非互換性やコマンドの実行忘れなどの問題も解決している。

概要

ESLint, もっとかわいく そして ハスキー は、コードの保守を助けてくれる素晴らしいツールだ。これらを組み合わせることで、素晴らしい開発者体験が得られ、コードのメンテナンスが容易になる。

この記事では、リントとフォーマットについて話したが、利用できるツールや可能性はもっと広い。 ハスキー を使うことで、アプリ内のタイプされていないコードをスキップすることができる。

続きを読む

Vueの長所と短所

間違ったコーディングでプロジェクトを台無しにする方法

React：ヒントとコツ

ソフトウェア開発

将来を見据えたウェブ・アプリケーションの構築：The Codestのエキスパート・チームによる洞察

The Codestが、最先端技術を駆使してスケーラブルでインタラクティブなウェブアプリケーションを作成し、あらゆるプラットフォームでシームレスなユーザー体験を提供することにどのように秀でているかをご覧ください。The Codestの専門知識がどのようにデジタルトランスフォーメーションとビジネス...

ザ・コデスト