きままに記録箱

フロントエンドたまに他のはなし

フロントエンド

「Jestではじめるテスト入門」ゆるく感想

約1年前に予約してた「Jestではじめるテスト入門」の電子版の配信が始まっていたので早速読んでみました。 peaks.cc TLDR Jestの導入と入門からやりたい人はマストバイ TypeScriptわからない人は結構厳しいかも ビジュアルリグレッションテストに関する記載…

自分がVue.jsを学ぶときに使った本・サイトを紹介する

今回はVue.jsの勉強についての話です。 最近のはてブやツイッター辺りでプログラミングスクール云々の議論から発展して、独学で学ぶにはどうすればいいのかみたいみたいな記事・呟きを多く見かけるようになった。この流れを見て、実際にWebエンジニアとして…

ESLint+JestでJavaScriptのコードをテストするための解決策

最近作成しているプロジェクトにJestを導入したのはいいが、ESLintを導入していたためにJestが使用できなくなって困ったので解決策の備忘録。 いつもよりは内容短いです。サンプルコードは入れていません。 今回の対象読者 作成中のコードにESLintとJestを導…

webpack入門その1(JavaScriptファイルをバンドルする)

今回はフロントエンドで近年ほぼ必須となっているwebpackについて基本的な使い方を紹介する。 ただし一気に全部紹介してしまうと、初見では意味がわかりづらい横文字も多く読んでいくうちによくわからずに挫折しかける人も多そうなのでシンプルにJavaScript…

ESLint+PrettierでAirbnb JavaScript Styleを適用する

今回は有名なコーディングスタイルの一つであるAirbnb JavaScript Styleを適用し、JavaScriptで書かれたコードをスタイルにそって書けるようにする方法を紹介。 今回の対象読者 ESLint・Prettierの基本的な使い方を使っていること Airbnb JavaScript Styleを…

ESLintでJavaScriptの文法をチェックする(VS Code拡張機能の使い方も)

今回はESLintを使ってシンプルなJavaScriptの文法チェックする方法を紹介。 今回の対象読者 ESLintとはなにか、使い方を知りたい人 VS Codeの拡張機能の使い方を知りたい人 前提条件 PCにバージョン10.12.0以上のNode.jsインストール済みであること ESLintっ…

Prettierの使用メリットと設定ファイル作成

前回は拡張機能をインストールし、とりあえず何も設定してない状態でコードが綺麗に整形(フォーマット)されているところまで確認した。リンクはこちら。 katanugramer.hatenablog.com 今回は引き続き拡張機能を使用し、整形方法の設定方法と使用メリットな…

VS CodeのPrettier拡張機能の使い方

フロントエンドとかnpmとかコマンドとかよくわかんないから、拡張機能だけ入れてすぐ使いたい人のためにメモ。 ※VS Codeは「Visual Studio Code」の略です。 まずPrettierって何? 一言で言うと、ソースコードを自動で整形してくれるツール。 色んな言語に対…