きままに記録箱

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

2020-06-01から1ヶ月間の記事一覧

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

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

VSCodeでGitを利用する+Github連携まで(WSL1編)

先日VSCode上から初めてGitとGithubにリポジトリをプッシュしてきたので、備忘録として書く。 batファイルは使いません。 今回の対象読者 Git・Githubとは何か把握されている方*1 Windows Subsystem for Linux(WSL1)を使われている方(先日正式版になったW…

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

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

今までのサンプルコード投稿した

これまでの記事で使用したサンプルコードをこちらのGithubリポジトリに掲載しました。 どう見てもコメント足らずなのでまた時間があるときに更新しておきます。。。 github.com 対象記事はこちらです。 katanugramer.hatenablog.com katanugramer.hatenablog…

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って何? 一言で言うと、ソースコードを自動で整形してくれるツール。 色んな言語に対…

てすと

初投稿です。OSS文化に魅了されつつあるノンWeb系SEです。 このブログでは以下のトピックを扱いたいと思ってます。 Web Development初心者なりに学んでる様子。 Tipsも載せていきたい。あまり日本語情報のないものも記事にしていければなと。 他の人が見ても…