Just do IT

思うは招く

JavaScript

Yarn 自体のバージョンを最新にアップグレードをする方法

使っているYarnのバージョンが古いと怒られました。※Mac使用 warning Your current version of Yarn is out of date. The latest version is "1.22.5", while you're on "1.13.0". info To upgrade, run the following command: $ curl --compressed -o- -L …

JavaScript のショートハンドプロパティとは何か

たとえばこんな代入をしている場合。 > const foo = 888 > const obj = { foo } > console.log(obj) { foo: 888 } 変数fooがプロパティのキー名になっている 変数fooに格納されている800がプロパティ値になっている ES6(ECMAScript 2015)で新たに使えるよ…

【JavaScript】indexOf の挙動

JavaScript の indexOf がどんな動きをするのか、学習したことをメモする。 String.prototype.indexOf() - JavaScript | MDN ポイント String オブジェクトのメソッド ()に文字を指定し、指定した値が存在する場所のインデックスを返す 名前の通り「なにかの…

ES6 デフォルトで定義された関数をインポートするときは {} をつけなくてもいい

「デフォルトのエクスポートをインポートする場合、{}は必要ない」ということを学んだのでメモしておきます。 export defaultで定義されている関数を読み込む場合 export default functionで定義された関数をimportするとき、{}は必要ない。 hello.js export…

webpack の設定でよく見る path.resolve は何をしているのか

webpack の入門書では、webpack.config.jsにファイルの出力先として以下の記述をよく見る。 output: { path: `${__dirname}/dist`, filename: 'main.js' }, これは、「ビルドした後のファイル出力先(output)は、ルートディレクトリ/distディレクトリにmain…

yarn をアップデートする方法

rails newをするたびに「お前の yarn 、古いぞ!」と怒られていたので最新にした。 方法 $ npm uninstall -g yarn をしてから、 $ npm install -g yarn そしてバージョン確認 $ yarn -v 1.22.4 うまく行かなかった方法 単純にyarn upgradeをしてもできなかっ…

ディレクトリ作成から ESLint と Prettier を連携するまで

新しいディレクトリを作成したあと、ESLintやPrettierの再設定が面倒。よく忘れるし、いちいち思い出すコストがかかるのでまとめる。 やりたいこと ESLintを入れたい JavaScript Standard Styleを使う Prettierを入れたい ESLintと連携させたい # なにはとも…

JavaScript で文字列を指定したぶんだけ繰り返す

JavaScript に repeat メソッドがあることを知った。直感的でわかりやすい。 呼び出し元の文字列を指定した数だけコピーして結合した新しい文字列を作成して返します。 String.prototype.repeat() - JavaScript | MDN > 'hoge'.repeat(3) 'hogehogehoge'

JavaScriptで月末日を取得する方法

new Dateのときに日付に「0」を指定すると、指定した月の、月初の前日という意味になり、月末を取得できる。 月は「0〜11」で表される。つまり11は12月を意味する。 # 12月1日を取得 > const date = new Date(2020, 11, 1) > date.toLocaleString() '12/1/20…

npm install の --save, --save-dev の違い

npm の--save, --save-dev の違い 次の2つの違いが気になったので調べた。 --save: dependencies に追記される。 --save-dev: devDependencies に追記される。 それぞれの違いはつぎのとおり。 dependencies そのパッケージを動かすために必要な他のパッケー…

Prettier をコマンドラインと VSCode で使う設定方法

Prettierをコマンドラインで使えるようにする PrettierとESLintを連携させる Prettier を VSCode で使う ics.media Prettierについて、上記記事がとてもわかりやすいので、なぜPrettierを使うのか、ESLintと比べてどう違うのか、など知りたい方は読んでいた…

ESLint に JavaScript Standard Style を導入してみる

下記ページを参考に。 JavaScript Standard Style ローカルインストール $ npm install standard -D .eslintrc.jsonには以下を設定 { "extends": "standard" } これでVSCodeにESLintプラグインをいれていれば自動でLintが走る。 JavaScript Standard Style …

ESLint をコマンドラインと VSCode で使えるようにする

やりたいこと ESLint の基本だけを知りたい コマンドラインでESLintを動かしたい VSCodeでESLintを動かし、リアルタイムでチェックが入るようにしたい ESLint とは、JavaScriptの文法や間違いをチェックしてくれるツール JSが正しく書けてるかどうか、間違い…

【JavaScript】map関数についての勉強メモ

JavaScriptのmap関数についての勉強メモ。 map関数は、配列の各要素に関数を適用して、新しく配列を作る。つまり、「配列の中身を要素として、ちょちょっといじって、ぽんっと新しい配列を吐き出す」みたいな感じ。 たとえば、次のような配列があったとする…

【JavaScript】charCodeAt();の使い方メモ

N予備校のプログラミング学習中(JavaScript)の勉強中に、次のような関数が出てきた。 'A'.charCodeAt(0); → 65 これはつまり、「Aという文字を整数値で表示すると65になるよ」ってこと。 なぜ65か。 それは、そうなっているから。 すべての文字には、それ…