Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブKD

2020年1月13日 By KD コメントを書く

2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

2020年もWeb業界の進歩は止まりません。今回は、JS周辺のバックエンド寄りの注目技術である「Deno」と「Entropic」をざっくり紹介します。

はじめに

2020年に入り、Web業界の特にJavaScript周りの動向を調査していたところ、「Predicting the Future of the Web Development (2020 and 2025)」という面白い動画を見つけました。2020年から5年後までのWeb業界の予測の動画で、ざっくり言うと、以下の4つの予想が示されています。

  1. TypeScriptが爆発的に人気を集めており、React/Vue/Anguarなどのフロントエンドフレームワークで利用可能になっている現状から、TypeScriptがJSプロジェクトで最も一般的な選択肢になるという予想
  2. ブラウザ上での大容量ファイルのダウンロードが許容されつつある現状から、WebAssemblyにより、ブラウザ経由でネイティブアプリのような大容量のWebアプリが提供されるようになるという予想
  3. NPMのパッケージレジストリやGitHub Package Registoryといった中央集権型のパッケージレジストリのセキュリティ問題を挙げ、多くのエンジニアが何かしらの悪意のあるNPMパッケージによる感染被害に合うという予想
  4. JSの代替手段の一つであるElmを取り上げ、JSより優れている点を示しつつも、ニッチであり続けるという予想

詳しくは実際に動画を見てみてください。

この動画の(1)で、なぜか触れられていなかったのですが、TypeScriptが今後主流になっていくだろうという予想の背景として、NodeJSの作者がTypeScriptのランタイムとして開発している「Deno」の存在があるはずです。まさにネクストNodeJSと言えるものなので、今回紹介することにしました。

この動画の(3)で、「The economics of open source by C J Silverio | JSConf EU 2019」で発表された「Entropic」という分散型のパッケージレジストリの話題も出ており、会場の誰も聞いたことがなかったようなので、これも紹介することにしました。

ということで、今回は多くの人が書いている2020年のフロントエンド寄りの記事に飽きた人向けに、バックエンド寄りで注目すべき技術「Deno」と「Entropic」をざっくり紹介しておきます。

Denoの紹介

まずは、ネクストNodeJS「Deno」の紹介です。

Denoとは?

「Deno」とは、JavaScriptとTypescriptを実行するための新しいランタイムであり、V8/Rust/Tokio/TypeScriptで作られています。

背景

NodeJSの作者Ryan Dahlさんの「Deno」の紹介動画「JSDC 2018#A01 – Deno, A New Server-Side Runtime By Ryan Dahl」や、比較的新しい動画「Ryan Dahl. Deno, a new way to JavaScript. JS Fest 2019 Spring」にて説明されています。(同じスライド使っていろいろなところで登壇していますね。)NodeJSが抱えている、(1)貧弱なモジュールシステム、(2)レガシーAPIのサポート、(3)セキュリティ問題、を解決し、楽しく生産的な実行環境を作ることが現在の目的です。背景としては、「Node.jsに関する10の反省点 Ryan Dahl – JSConf EU 2018」で語っている反省に起因しています。

試す

それでは、2018年にプロトタイプと言っていた「Deno」が2020年現在動くのか試してみましょう。

インストールする

まずは公式インストール手順に沿ってインストールします。

$ curl -fsSL https://deno.land/x/install/install.sh | sh
$ cat "export PATH=$HOME/.local/bin/deno:$PATH" >> ~/.zshrc
$ deno --version
deno 0.28.1
v8 8.0.192
typescript 3.7.2

TCPサーバーを書く

公式マニュアルを見て、簡単なTCPサーバーを書いてみましょう。

$ mkdir deno-echo-app
$ cd deno-echo-app
$ touch app.ts

app.ts

const PORT = 8080;

const listener = Deno.listen({ port: PORT });
console.log(`listening on 0.0.0.0:${PORT}`);

for await (const conn of listener) {
  Deno.copy(conn, conn);
}

エコーしてみる

TCPサーバーを実行します。

$ deno --allow-net app.ts
Compile file:///Users/user/deno-echo-app/app.ts
listening on 0.0.0.0:8080

エコーされるか確認します。

$ nc localhost 8080
Hello, Deno!
Hello, Deno!

OKですね。自動的でコンパイルされて実行されるのは快適ですね。

「--allow-net」は外部のネットワークにアクセスする事を許可するためのフラグです。「Deno」はセキュリティを意識してい実装されているので、デフォルトでサンドボックス上で実行されるようになっており、外部のファイルシステム、ネットワーク、スクリプトの実行、環境変数にアクセスできないようになっています。

現状はまだ「mildly stable」のようですが、試す分には大丈夫なようです。気になる人は遊んでみてください。

Entropicの紹介

次に、分散型パッケージレジストリ「Entropic」の紹介です。

Entropicとは?

「Entropic」とは、新しい分散型(decentralized)の統合パッケージレジストリ(a federated package registry)であり、新しいCLI「ds」も付属されています。

背景

背景は、冒頭で紹介した動画「The economics of open source by C J Silverio | JSConf EU 2019」で語られています。NPMを会社化した経験から、中央集権型のサービスはお金がかかり過ぎる問題があり、かつ、パッケージレジストリをプライベートカンパニーがコントロールすべきではないと。そこで、新たなOSSとして、分散型のパッケージレジストリである「Entropic」を発表するに至ったというわけです。NPM inc自体は、「NPM Pro」という月額7ドルでプライベートリポジトリが使えるプランを用意していますが、Github Package Registryとガッツリ競合しているので、やはりこのままでは会社としては短命な雰囲気です。

試す

それでは、「Entropic」で自分のレジストリを作って、、、と思ったのですが、正直取り上げるのが早すぎた感があり、公式ドキュメントは未完なので、「ds」コマンドを少し試してみるだけにしようと思ったのですが、、、インストールも失敗して動きませんでした。残念ながら試す段階にも達していないようです。

「Entropic」は発想は面白いのですが、実用化されるのはまだまだ先という感じですね。興味がある人はぜひコントリビュートしてみてください。

最後に

いかがでしたか?「Deno」も「Entropic」も2020年に正式にリリースされるかは微妙なくらい新しいOSSですが(まだ数年かかりそう)、今後のJSの発展に寄与する技術だと思います。これらを知っていれば、バックエンド寄りのJS周辺の最新技術の動向に取り残されずに済むかもしれません。ちなみに、フロントエンドの注目技術は個人的には「Svelte」なのですが、それは別の記事にします。それでは。

環境

  • Deno: 0.28.1

カテゴリ : 技術 Tips & Tutorials タグ : deno, entropic, javascript, npm, typescript, yarn

2019年11月4日 By KD コメントを書く

今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

Java8からラムダ式による関数型プログラミングが記述できるようになりました。今回は、ムーブメントに乗り遅れた人向けに、改めてJavaで関数型プログラミングの基礎を紹介します。

はじめに

近年は関数型プログラミングが新しいパラダイムシフトとなっており、あらゆるプログラミング言語で関数型プログラミングをサポートしています。ここで言う関数型プログラミングとは、あくまでラムダ式による新しいコーディングのやり方の事です。モナド、カリー化、遅延評価、高階関数などのそもそもの関数型言語の概念を知りたければHaskellを学ぶのが一番だと言われていますが、今回はそういう話は扱いません。純粋にJavaでラムダ(Lambda)式、ストリーム(Stream)、関数型インターフェース(Functional Interfaces)を使ってプログラミングしたい人向けです。

それでは、Javaで関数型プログラミングに入門していきましょう。

ストリーム(Stream)を使ってみよう

java.util.streamのパッケージで基本的なものを使ってみましょう。

forEach

「forEach」でfor文を使わなくても流れるようにループ処理を記述できます。

    var numbers = List.of(18, 4, 22, 7, 31, 1, 12, 25, 36, 3);

    // 基本的な書き方
    numbers.stream()
      .forEach(number -> System.out.println(number));

    // メソッド参照で簡素に書ける
    numbers.stream()
      .forEach(System.out::println);

filter

「filter」は条件に合うデータだけになるようにフィルターをかけます。

    var numbers = List.of(18, 4, 22, 7, 31, 1, 12, 25, 36, 3);

    // 偶数だけフィルターする
    numbers.stream()
      .filter(number -> number % 2 == 0)
      .forEach(System.out::println);

map

「map」はそれぞれのデータに共通の処理を記述できます。

    var numbers = List.of(18, 4, 22, 7, 31, 1, 12, 25, 36, 3);

    // 全ての数字を2乗する
    numbers.stream()
      .map(number -> number * number)
      .forEach(System.out::println);

reduce

「reduce」はデータをまとめます。

    var numbers = List.of(18, 4, 22, 7, 31, 1, 12, 25, 36, 3);

    // 合計を出す
    var sum = numbers.stream()
      .reduce(0, (x, y) -> x + y);
    // => 159

    // 奇数を3乗して足す
    var result = numbers.stream()
      .filter(number -> number % 2 != 0)
      .map(number -> number * number * number)
      .reduce(0, Integer::sum);
    // => 45787

collect

「collect」はストリームを再利用できる型に変換します。

    var numbers = List.of(18, 4, 22, 7, 31, 1, 12, 25, 36, 3);

    // それぞれ2乗したデータをListで返す
    var squaredNumbers = numbers.stream()
      .map(number -> 2 * number)
      .collect(Collectors.toList());
    // => [36, 8, 44, 14, 62, 2, 24, 50, 72, 6]

takeWhile

「takeWhile」は、ストリームの最初から条件に合うものを抽出していき、条件が合わなかったところまでの範囲で取り出します。

    var numbers = List.of(3, 6, 9, 12, 15, 16, 20, 24, 28, 36, 33, 36, 39, 42, 45);

    // 3の倍数をリストの最初からそれ以外がでるまでの範囲で取り出す
    var firstTripleNumbers = numbers.stream()
      .takeWhile(number -> number % 3 == 0)
      .collect(Collectors.toList());
    // => [3, 6, 9, 12, 15]

    // 3の倍数を全て取り出す
    var tripleNumbers = numbers.stream()
      .filter(number -> number % 3 == 0)
      .collect(Collectors.toList());
    // => [3, 6, 9, 12, 15, 24, 36, 33, 36, 39, 42, 45]

distinct

「distinct」は重複を省きます。

    var numbers = List.of(10, 3, 22, 3, 22, 10, 22, 3, 3, 3);

    var distinctNumbers = numbers.stream()
      .distinct()
      .collect(Collectors.toList());
    // => [10, 3, 22]

sorted

「sorted」はソートします。「Comparator」を渡すことで、ソート方法を指定できます。

    var numbers = List.of(18, 4, 22, 7, 31, 1, 12, 25, 36, 3);

    // 昇順
    var sortedNumbers = numbers.stream()
      .sorted()
      .collect(Collectors.toList());
    // => [1, 3, 4, 7, 12, 18, 22, 25, 31, 36]

    // 昇順
    var sortedNumbers2 = numbers.stream()
      .sorted(Comparator.naturalOrder())
      .collect(Collectors.toList());
    // => [1, 3, 4, 7, 12, 18, 22, 25, 31, 36]

    // 降順
    var reversedNumbers = numbers.stream()
      .sorted(Comparator.reverseOrder())
      .collect(Collectors.toList());
    // => [36, 31, 25, 22, 18, 12, 7, 4, 3, 1]

flatMap

「flatMap」はストリームのデータをフラットにします。

    var names = List
      .of("Keid", "Steve Jobs", "Jeff Bezos", "Larry Page", "Bill Gates", "Mark Zuckerberg");

    var list = names.stream()
      .map(str -> str.split(" ")) // 性と名を分けて
      .flatMap(Arrays::stream) // フラットな1次元配列にして
      .sorted() // アルファベット順にソートして
      .collect(Collectors.toList()); // リストにして返す
    // => [Bezos, Bill, Gates, Jeff, Jobs, Keid, Larry, Mark, Page, Steve, Zuckerberg]

range/rangeClosed

「range」と「rangeClosed」で指定した範囲の数字を扱えます。

    var sum1 = IntStream.range(1, 10).sum(); // => 45
    var sum2 = IntStream.rangeClosed(1, 10).sum(); // => 55
    var bigSum = LongStream.range(1, 100000000).parallel().mapToObj(BigInteger::valueOf)
      .reduce(BigInteger.ONE, BigInteger::add); // => 4999999950000063

「parallel」はマルチスレッドで並列処理させます。

iterate

「iterate」は繰り返し処理を記述できます。

    var sum = IntStream.iterate(1, n -> n + 3).limit(5).peek(System.out::println).sum();
    // => 1
    // => 4
    // => 7
    // => 10
    // => 13
    System.out.println("total:" + sum);
    // => total:35

「peek」はストリームの途中の値を抜き出せます。ストリームのデバッグに便利です。

allMatch/anyMatch/noneMatch

「allMatch」は、全てのデータが条件に合っているかどうか、「anyMatch」は、データのどれかが条件に合っているかどうか、「noneMatch」は、全てのデータが条件に合っていないかどうか、を判定します。

    var names = List
      .of("Keid", "Steve Jobs", "Jeff Bezos", "Larry Page", "Bill Gates", "Mark Zuckerberg");

    System.out.println(names.stream().allMatch(name -> name.length() >= 4)); // => true
    System.out.println(names.stream().allMatch(name -> name.length() >= 10)); // => false

    System.out.println(names.stream().anyMatch(name -> name.length() == 4)); // => true
    System.out.println(names.stream().anyMatch(name -> name.length() > 15)); // => false

    System.out.println(names.stream().noneMatch(name -> name.length() > 15)); // => true
    System.out.println(names.stream().noneMatch(name -> name.length() == 10)); // => false

関数型インターフェース(Functional Interfaces)を知ろう

java.util.functionのパッケージにあるLambda式やメソッド参照で使う型を見ていきましょう。

Predicate

「Predicate」は、1つの引数を与えて、booleanの値を返します。

    var numbers = List.of(18, 4, 22, 7, 31, 1, 12, 25, 36, 3);

    // 奇数を判定するPredicate
    Predicate<Integer> isOdd = x -> x % 2 != 0;
    var oddNumbers = numbers.stream()
      .filter(isOdd)
      .collect(Collectors.toList());
    // => [7, 31, 1, 25, 3]

Function

「Function」は、1つの引数を与えて、1つの値を返します。

    // 倍にするFunction
    Function<Integer, Integer> doubleIt = x -> x + x;
    var doubleNumbers = numbers.stream()
      .map(doubleIt)
      .collect(Collectors.toList());
    // => [36, 8, 44, 14, 62, 2, 24, 50, 72, 6]

Consumer

「Consumer」は、1つの引数を与えて、voidで処理します。

    // 標準出力をするConsumer
    Consumer<Integer> print = x -> System.out.println(x);
    numbers.stream()
      .filter(isOdd)
      .map(doubleIt)
      .forEach(print);
    // => 14
    // => 62
    // => 2
    // => 50
    // => 6

BinaryOperator

「BinaryOperator」は、2つの引数を与えて、1つの値を返します。

    // 足し算をするBinaryOperator
    BinaryOperator<Integer> sum = (x, y) -> x + y;
    var oddSum = numbers.stream()
      .filter(isOdd)
      .reduce(sum);
    // => Optional[67]

Supplier

「Supplier」は、引数を与えずに、1つの値を返します。

    // 0〜99までの乱数を返すSupplier
    Supplier<Integer> randomInteger = () -> {
      Random random = new Random();
      return random.nextInt(100);
    };
    var randomNumber = randomInteger.get();

UnaryOperator

「UnaryOperator」は、1つの引数を与えて、1つの値を返します。Functionとの違いは引数と戻り値の型が同じというところです。

    // 10倍にするUnaryOperator
    UnaryOperator<Integer> multiplyByTen = x -> 10 * x;
    var tenfoldEvenNumbers = numbers.stream()
      .filter(x -> x % 2 == 0)
      .map(multiplyByTen)
      .collect(Collectors.toList());
    // => [180, 40, 220, 120, 360]

BiPredicate/BiFunction/BiConsumer

「BiPredicate」は、2つの引数を与えて、booleanの値を返します。「BiFunction」は、2つの引数を与えて、1つの値を返します。「BiConsumer」は、2つの引数を与えて、voidで処理します。

    // Idが100以上かつNameにD.を含むかどうかを判定するBiPredicate
    BiPredicate<Integer, String> isProtagonist = (id, name) -> {
      return id >= 100 && name.contains("D.");
    };
    // IdとNameを結合するBiFunction
    BiFunction<Integer, String, String> joinIdAndName = (id, name) -> {
      return id + ":" + name;
    };
    // IdとNameを結合して標準出力するBiConsumer
    BiConsumer<Integer, String> printIdAndName = (id, name) -> {
      System.out.println(id + ":" + name);
    };

    class Hero {

      private int id;
      private String name;

      public Hero(int id, String name) {
        this.id = id;
        this.name = name;
      }

      public int getId() {
        return id;
      }

      public String getName() {
        return name;
      }
    }

    var protagonistName = List.of(
      new Hero(200, "Edward Teach"),
      new Hero(30, "Rocks D. Shanks"),
      new Hero(100, "Monkey D. Luffy")
    ).stream()
      .peek(hero -> printIdAndName.accept(hero.id, hero.name))
      .filter(hero -> isProtagonist.test(hero.id, hero.name))
      .map(hero -> joinIdAndName.apply(hero.id, hero.name))
      .findFirst();
    // => 200:Edward Teach
    // => 30:Rocks D. Shanks
    // => 100:Monkey D. Luffy
    System.out
      .println("The protagonist in One Piece is " + protagonistName.orElse("Nothing") + "!");
    // => The protagonist in One Piece is 100:Monkey D. Luffy!

以上、ここまで分かれば、リファレンスだけで使いこなせるでしょう。

おまけ

ストリームによるファイル操作

「Files.lines」を使うことで、ファイルを読み込んでストリームで扱えます。

以下のCSVファイルを準備して読み込んでみます。

file.csv

Keid,Steve Jobs,Jeff Bezos
Larry Page,Bill Gates,Mark Zuckerberg

行ごとに読み込んで、カンマで分割し、それぞれを出力してみます。

    Files.lines(Paths.get("file.csv"))
      .map(str -> str.split((",")))
      .flatMap(Arrays::stream)
      .forEach(System.out::println);
    // => Keid
    // => Steve Jobs
    // => Jeff Bezos
    // => Larry Page
    // => Bill Gates
    // => Mark Zuckerberg

ファイル操作も簡単になりましたね。

最後に

いかがでしたか?これでJavaで関数型プログラミングが記述できるようになったのではないでしょうか。あとは、java.util.streamおよびjava.util.functionのパッケージを見ていろいろ試してみると良いでしょう。では。

環境

  • Java: 11.0.4

カテゴリ : 技術 Tips & Tutorials タグ : functional-interfaces, functional-programming, java, lambda-expressions

2019年10月30日 By KD コメントを書く

ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

Reactの開発環境でEslintおよびPretteirを設定する方法を紹介します。

はじめに

JavaScriptのコードフォーマッターと言えば「Eslint」と「Pretteir」を組み合わせるのが主流です。今回は、以前の記事「Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)」をインプットにして、React用にゼロからEslintおよびPretteirを設定する方法を紹介します。

それでは、ReactにEslintおよびPrettierを設定していきましょう。

JavaScriptのコーディングスタイル

JavaScriptのコーディングスタイルは以下の3つが代表的です。

  • Airbnb JavaScript Style Guide
  • Google JavaScript Style Guide
  • JavaScript Standard Style

どれを使うのがベストか?ということになりますが、コーディングスタイルは主観に大きく左右されるので、綺麗な解を出すのは難しいです。なので、強い個人的な主張がなければ、それぞれのコーディングスタイルの特徴を理解した上で、どれが人気か?ということを見て判断するのが良いでしょう。尖ったスタイルは後でEslintとPretteirでカスタマイズできますからね。そこで、これらのコーディングスタイルを比較しているサイトとして「Comparing eslint-config-airbnb vs. eslint-config-google vs. standard」を見てみましょう。このサイトの結果では、Airbnbのコーディングスタイルが一番人気があり良さそうです。

ということで、今回はコーディングスタイルとして「Airbnb JavaScript Style Guide」を適用します。

ReactにEslintおよびPrettierを設定する

前提

以下の設定が事前に完了している必要があります。

  • NodeJSがインストールされていること
  • 「Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)」の設定が完了していること

EslintおよびPretteirのモジュールをインストールする

ReactのプロジェクトにEslint、Pretteir、関連モジュールをインストールします。

$ cd my-react-app
$ yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jest eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
$ yarn add --dev eslint-plugin-babel eslint-plugin-flowtype
$ yarn add --dev babel-eslint eslint-loader
$ yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier
$ yarn add --dev husky lint-staged

Pretteirの設定をする

Pretteirの設定ファイルを作成し、設定を書きます。

$ touch prettier.config.js

prettier.config.js

module.exports = {
  trailingComma: 'es5',
  tabWidth: 2,
  semi: false,
  singleQuote: true,
}

流行りのセミコロン無しの設定にしています。

また、設定ファイルのフォーマットは、Pretteirに限らず、JSON、YAML、JavaScriptが選択可能になっていることが多いですが、結局JavaScriptで設定ファイルを書くのが一番使いやすいと感じています。コメントが書けたり、設定を整理したい時に便利だからです。

Eslintの設定をする

Eslintの設定ファイルを作成して、設定を書きます。

$ yarn eslint --init
...
? How would you like to use ESLint? To check syntax, find problems, and enforce code style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? React
? Does your project use TypeScript? No
? Where does your code run? Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)
? What format do you want your config file to be in? JavaScript
Checking peerDependencies of eslint-config-airbnb@latest
The config that you've selected requires the following dependencies:
...
? Would you like to install them now with npm? No
...

.eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:flowtype/recommended',
    'plugin:jest/recommended',
    'plugin:jest/style',
    'prettier',
    'prettier/babel',
    'prettier/react',
    'prettier/flowtype',
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parser: 'babel-eslint',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: ['babel', 'flowtype', 'jest', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'react/jsx-filename-extension': 'off',
    'react/prop-types': 'off',
    'react/default-props-match-prop-types': 'off',
    'react/require-default-props': 'off',
    'flowtype/no-types-missing-file-annotation': 'off',
    'flowtype/define-flow-type': 'warn',
    'flowtype/use-flow-type': 'warn',
  },
}

自動作成された設定に、Babel、Flow、Jest、Pretteirのための設定を追加してあります。

Webpackに設定を追加する

Webpackで開発中にEslintを毎回実行するようにローダーの設定を追加します。

$ vi webpack.config.babel.js
{
...
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          fix: true,
        },
      },
...
    ],
  },
...
}

コミット時にリンターを実行する設定をする

コミット時に必ずチェックするようにしておけば安心です。

$ vi package.json
{
...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx}": [
      "yarn eslint --fix",
      "git add"
    ]
  },
...
}

以上で完了です。あとは、エラーがになる箇所があればルールに従って修正していってください。

最後に

いかがでしたか?これでゼロからReact用にEslintおよびPretteirを設定できるようになったことでしょう。それでは。

環境

  • NodeJS: v12.12.0
  • eslint: 6.6.0
  • eslint-config-airbnb: 18.0.1
  • eslint-plugin-import: 2.18.2
  • eslint-plugin-jest: 23.0.2
  • eslint-plugin-jsx-a11y: 6.2.3
  • eslint-plugin-react: 7.16.0
  • eslint-plugin-react-hooks: 2.2.0
  • eslint-plugin-babel: 5.3.0
  • eslint-plugin-flowtype: 4.3.0
  • babel-eslint: 10.0.3
  • eslint-loader: 3.0.2
  • prettier: 1.18.2
  • eslint-plugin-prettier: 3.1.1
  • eslint-config-prettier: 6.5.0
  • husky: 3.0.9
  • lint-staged: 9.4.2

カテゴリ : 技術 Tips & Tutorials タグ : eslint, prettier, react, webpack

  • 1
  • 2
  • 3
  • …
  • 51
  • 次のページ »

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
    SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • 爆速でJenkinsをマスターしよう(メール通知編) ~ パイプラインのビルド失敗時にメールで通知する方法 ~
    爆速でJenkinsをマスターしよう(メール通知編) ~ パイプラインのビルド失敗時にメールで通知する方法 ~

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes