こんにちは。ポートフォリオがいい感じになったとたん燃え尽き症候群に悩まされ始めたSarasaです。
力技プログラミングにも限界を感じ、今更になって「もしかして基礎が徹底できてない私ってヤバすぎ！？」なことに気が付きました。
「今までやってきたフロンドエンドの領域で何か新しいこと挑戦できないかな～」
「どうやらチームで開発するときはwebpackで環境構築したり、TypeScriptで型定義とやらができるといいらしいぞ！！」
「よし！さっそくはじめるぞい！！」
環境構築が終わらない
教材として活用したのはこちら
https://www.youtube.com/playlist?list=PLX8Rsrpnn3IW0REXnTWQp79mxCvHkIrad
これまではcreat-react-appで楽々プログラミングライフを送っていたのですが、webpackめっちゃ時間かかる・・涙目
（creat-react-appってすごかったんやな・・
しかし、webpackを学ばねければ出会えなかった素敵なツールと出会ってしまいました。
その名もESlintとPrettier
この二つ、
- ESlint
- 「コードの構文チェックなら私に任せて！！」
- Prettier
- 「ESlintだけだと頼りないから俺がコードの整形を担当するぞ！」
という自動でコードをきれいにしてくれる神ツールらしいのです・・・！
早速導入だあ～
導入編
まずパッケージをインストールします。
npm install --save-dev eslint eslint-config-prettier prettier
次に、package.jsonの設定をいじっていきます。
"scripts": {
"build": "webpack --mode=production",
"start": "webpack-cli serve --mode development",
//ここから追記
"lint": "eslint --fix 'src/**/*.{js,ts}'",
"lint-fix": "eslint --fix './src/**/*.{js,ts}'
&& prettier --write './src/**/*.{js,ts}'"
//ここまで
},
"lint-fix"で、ESlintとPrettierそれぞれの役割分担を記載します。
ここでは、ESlintは構文の変なところをチェック、Prettierは修正を担当するという役割になっています。
ついでに、ESlintの設定もいじります。
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"prettier",
"prettier/@typescript-eslint",
],
「んなこと言ってもほんとにちゃんとし仕事してくれるのか・・？」
という疑問がわいてきたのでチェック対象であるsrcフォルダ内のファイルを、ちょっと汚い感じのコードにしてみます。
export default class World {
message: string
constructor(message: string) {
this.message = message
}
public sayHello(elem: HTMLElement | null) {
if (elem) {
elem.innerText = this.message
}
}
}
最後の}をめっちゃスペース空けてみます。
この状態でコードを美しくする呪文npm run lint-fixを実行してみます。
すると、
怒られました。え？ファイル認識してくれないってどゆこと？？
「あなたのPCはMacですか？Windowsですか？」
どうやらパスのくくり方がMacとOKだけどWindowsで異なるらしいです。
調べれてみても
「シングルクオーテーション''でパスを囲めばエラー消えるぞ！」
って記載が多かったので「いや、それで動かないんですけどおお」となってしまったんですけどね。
（にしても結構調べるの苦戦したからプログラミングの世界だとWindowはマイノリティ・・？
ちなみにWindowsだとダブルクォーテーション""でくくるのが正解。
"lint": "eslint \"./src/**/*.{js,ts}\"",
"lint-fix": "eslint --fix \"./src/**/*.{js,ts}\"
&& prettier --write \"./src/**/*.{js,ts}\""
改めてnpm run lint-fixでhello.tsをきれいにしてみます。
えい！！
（うーん、エラーの表示は変わったけど、相変わらず動かんぞ・・？
「ちゃんとバージョンは確認した？？」
「写経してるのになんかエラー出るなあ・・」というときありがちなのが参考元と自分のインストールしたパッケージのバージョンが異なっていること。
エラーの内容を調べてみると、どうやら2021-02-21の時点で prettier/@typescript-eslintの記載が不要になっていたよう。
レッツコメントアウト
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"prettier",
// "prettier/@typescript-eslint",
],
パスの記載よし、バージョン確認よし・・npm run lint-fixだ・・！！
う、動いたぞコイツ・・！！
※ちなみに、"prettier"をコメントアウトしても動きました。（詳しいことは勉強中）
結論：ハマる要因は一つとは限らない
これって初心者あるあるだと思うのですが、「書いてある通りに動かせばコード書けるんじゃね？」思考に陥るとマジで根本的な要因見落とします涙
「コード書いた人と私の前提同じ？？」
となったら、OSやバージョンなど、コードだけではわからない要因に目を向けてみてもいい気がします。
「マネするのはよくない」ではなく、マネて失敗したところから自分のミスしやすい部分を分析していくことが結果的に自身の学習モチベーション、知識のアップデートに繋がっていく気がします。
書き終わって気づいたこと
え？TypeScriptの話してなくね？？？