はてなブックマーク

普段コード書いている中で見通し（可読性）を良くするために意識していることを10個列挙しました JavaScript(TypeScript)のお話です 1.変数宣言はconstを利用する 変数を宣言するときはconstを使います。varは使わない様にします letを使うときは限定的で、実行する関数の中で変数を再代入する必要がある時に使います // 関数の外でのlet宣言はアンチパターン let strValue = ""; const method1 = () => { strValue = "method1"; }; const method2 = () => { // 関数内、再代入する処理で宣言する let setValue = "ほげ"; }; // 以下、変数strValueを利用するかもしれない // どこかで再代入されるかも分からない..

モチベーション Vue2系サポート終了(23年末予定)を踏まえて、今後はVue3に触れる機会が増えそう 現在Vue2を使っているけどVue3へリファクタする予定があり、慣れていく必要が出てきた 記事の内容 Vue3を取り巻く環境とかエコシステムなど整理 Vue3に慣れる為に知っておくべきことを整理 移行に伴う破壊的変更の内容などは記載してない ある程度Vue2を触った事があるのを前提で書いてる部分が多いです なぜVue3に慣れる必要があるのか 1. Vue2のサポート終了 Vueの公式によるとVue2系が2023年の末に終了されることが告知されています。 Vue2系は2022年6月にリリースされた2.7系が最後で、今後は新しい機能などは追加されず、セキュリティ対応など最低限のアップデートのみの対応となります。 それに伴ってVue2からVue3へリファクタ等の対応する必要があります。 2.

以下のオブジェクトを例にして具体的に説明しています ３つのプロパティをまとめたオブジェクトを定義しています それぞれのプロパティにはファイル名、値として数字を定義しています // オブジェクトから値(1,2,3）だけを許容する型を作って、他の場所で活用したい const FILE_DATA_LIST = { fileDataNo1: 1, fileDataNo2: 2, fileDataNo3: 3 }

JavaScript でのstructuredClone関数が Chrome98 から使えるようになりました 🎉 structuredCloneを利用する事で、簡単にオブジェクトのディープコピーができるようになりました。 すごく便利そうだな...!!と思った関数なので実際に試してみました。 structuredClone 本題のstructuredCloneです。 structuredCloneは一言で言うと「構造化複製アルゴリズムに従って、指定された値のディープクローンを生成するメソッド」です。 つまり、構造化複製アルゴリズムに対応する値はstructuredCloneを使うとディープコピーした上で値を返してくれる、と言うことです。 IE には対応していませんが、Chrome、Edge、Firefox 等の主要なブラウザは対応してきているので、Object.assignやライブラリの

この記事について 2021年8月25日に、Firebaseのバージョン9が配信されたことにより書き方が大きく変わりました。 この記事はv9へアップデートした際にリファクタリングした内容の備忘録です。 firebaseへのアクセスは、TypeScriptを併用してtsファイルに記載しています。 環境 Firebase 9.1.3 Nuxt.js 2.15.7 TypeScript 4.2.4 macOS Big Sur 11.5.2 前提 v9を使う理由 firebaseのv9はモジュールバンドラを利用しています。 v9ではファイルサイズの縮小化を図り、必要なものしかインポートしない形式に変更されました。 これにより、ページの描画速度が早くなります。 v9以前の書き方で9へアップデートするとエラーが起こってしまう。 何故このようなエラーが出てしまうのかと言うと、関数ベースでの書き方に変更する