ECMAScript

PMDバージョン： 7.0.0-rc4 AssignmentInOperand 公式ドキュメント： AssignmentInOperand Since： PMD 5.0 Priority： Medium High (2) Description： 条件式内での値の代入は避ける。コードが複雑になり、読みにくくなる。 等号演算子「==」の代わりに代入演算子「=」が使用されるバグを検出することがある。 Property： 名前 デフォルト値 説明 複数指定 allowIf false if文の条件式内での代入を許可する - allowFor false for文の条件式内での代入を許可する - al…

PMDバージョン： 7.0.0-rc4 Best Practices AvoidWithStatement 公式ドキュメント： AvoidWithStatement Since： PMD 5.0.1 Priority： High (1) Description： withの使用を避けるべきである。 Configuration： <rule ref="category/ecmascript/bestpractices.xml/AvoidWithStatement" /> Example： with (object) { property = 3; // オブジェクトなのかwindowなのか判断つ…

先月出版された「JavaScript Primer 改訂2版 迷わないための入門書」の内容レビューに関わらせていただきました。 先日出版社の方から、完成した書籍をご恵贈いただきました。ありがとうございます。 www.kadokawa.co.jp JavaScript Primer 改訂2版 迷わないための入門書作者:azu,Suguru InatomiKADOKAWAAmazon efcl.info 第1版からの主なアップデートとして、ECMAScriptの新しいバージョン(ES2020, ES2021, ES2022)で取り入れられた機能を取り上げたり、Promise, Async Func…

ECMAScriptはJavaScriptの標準規格で、2015年以降毎年改定されています。この記事を読むとES2022に採用された仕様、ES2023に決まっている仕様、次に盛り込まれそうな仕様がわかります。 ECMAScriptとは ECMAScriptとはJavaScriptの標準規格 ECMAScriptのバージョン ECMAScriptの策定プロセス ES2022 .at() Top-level await クラスにプライベートなインスタンスフィールド、アクセッサ クラスに静的なフィールドとメソッド クラスに静的イニシャライザブロック Object.prototype.hasOwn E…

はじめに v-bindの基本 v-bindでクラス名を固定値＋動的にしたい場合どうする？ APIの帰り値をクラス名に設定したい aタグのhref属性を動的にしたい時 aタグのtarget="_blnak"を動的するにはどうしたらいいか まとめ はじめに こんにちは。エンジニアの仕事をしている、たかふみです。 本日はVue.jsでよく使う、v-bindの値でattributeを動的にするにはどうしたらいいのか、TIPSをまとめていきたいと思います。 v-bindの基本 根本的にv-bindの基礎から説明いたしますが、v-bindとは、HTMLの属性を動的にするためのvue.jsの機能です。 下記…

ECMAScriptはJavaScriptの標準規格で、2015年以降毎年改定されています。この記事を読むとECMAScriptの仕様策定プロセスが理解でき、ES2021に採用された仕様、ES2022に決まっている仕様、次に盛り込まれそうな仕様がわかります。 ECMAScriptとは ECMAScriptのバージョン ECMAScriptの策定プロセス ES2021 String.prototype.replaceAll Promise.any WeakRefs Logical Assignment Operators Numeric separators ES2022（確定分） Class …

最近Webフロントを入門したことで、JavaScriptを勉強する機会が増えたが、ECMAScriptについての理解が曖昧だったので軽くメモ👷‍♀️ ブラウザでのJavaScript JavaScriptのコードをプログラムとして動作させるには、JavaScriptエンジンでコードをコンパイルして実行させる必要があります。ChromeやSafariを始めとしたブラウザは、それぞれJavaScriptエンジンがあり、これにより同じJavaScriptでもブラウザによって挙動が変わっています。 ちなみに、JavaScriptエンジンには下記のようなものがあります。 エンジン 内容 V8 Googl…

プログラミング言語とは コンピューターへのお願いする言語 複雑なタスクを処理する「プログラム（アルゴリズム）」を考えるのは人間 プログラミング言語の種類 コンパイル型（プログラムを実行する前に、機械が読める言語（0と1のデータ群）に翻訳する言語） インタプリタ型（プログラムを実行しながら、機械が読める言語に少しずつ翻訳する言語） JavaScriptとは 「ジャヴァ」ではなく、「ジャバスクリプト」です 「Java（ジャヴァ）」は、別の言語なので間違わないようにしましょう ブラウザを操作するためのプログラミング言語 インタプリタ型言語 JavaScriptを使うと、静止したデータであるHTMLや…

9/21 - 9/22という日程で開催された。BunkyoWesternsで参加して1位☝️ 我々はほとんどの問題が解けていたのだけれども、4問残っていたうちの3問がWebカテゴリ(1問はWeb+Revだが…)ということで申し訳ない気持ち。想定解法やSatoooonさんの解法を見つつ復習していきたい。 以下の目次を見ると、1ポイントなのに4, 5 solvesしか出ていない問題があることがわかると思う。これらは「宿題」としてIERAE CTF 2024の告知段階から出題されていた*1もので、いずれも固定で1ポイントであるものの、事前に解いておく(別に競技中に解いてもよいが…)ことが想定されてい…

認定JavaScriptデベロッパー資格を取得しましたので、勉強内容等ご紹介します。

ESLint についてまとめました。 この記事は以下の構成になっています。 ESLint とは Prettier との違い 従来の設定形式と Flat Config ESLint を使う手順 従来の設定形式から Flat Config への変更 VSCode で ESLint を使う ESLint とは ESLint はコードの品質やスタイルに関する規約に基づいてコードを検査し、エラーや警告を検出する JavaScript の静的解析ツール。 コーディングスタイルの統一や潜在的なバグの発見、可読性の向上、そしてチームでの一貫したコード品質を保つために広く使われる。 Prettier との違い …

これは、なにをしたくて書いたもの？ 前にDrizzle ORMを試してみました。 TypeScriptのORM、Drizzle ORMをMySQLで試す - CLOVER🍀 Drizzle ORMを使う時にはスキーマ（schema.ts）を作る必要があるのですが、これを既存のテーブル定義から作成してみたいと思います。 Drizzle Kitのintrospect（pull）コマンド Drizzle Kitのintrospectコマンドを使うと、既存のテーブル定義からschema.tsを生成することができます。 Drizzle Kit / Introspecting with db pull L…

フロントエンドエンジニアとしてのキャリアを目指す上で、まず知っておきたいのが「フロントエンドエンジニアに必要なスキルセット」です。WebサイトやWebアプリの開発においてさまざまなスキルが求められますが、今回はフロントエンドエンジニアとして最低限身につけるべきスキルセットを詳しく解説していきます。 目次 最低限必要なプログラミング言語3選 HTML CSS JavaScirpt 最低限必要なツール3選 Git デベロッパーツール デザインツール まとめ 最低限必要なプログラミング言語3選 HTML HTMLとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup L…

React のプロジェクトを作成する時に使う Create React App についてまとめました。 この記事は以下の構成になっています。 Create React App とは Create React App が行うこと Create React App でプロジェクトを作成する 開発環境 本番環境 テスト Create React App とは Create React App は React アプリの初期設定を自動化して作成するツール。 Create React App が行うこと Create React App は React アプリの初期設定以外にも、主に以下のことを行う。 開…

今回は、JavaScriptの演算子のいろいろです。 [先に知っておくべき単語］ * オペランド……値のこと 被演算子（+-*/％） 二項演算子 オペランドが二つあるもの →左辺オペランド 演算子 右辺オペランド ex）1 + 1、2 - 1 など プラス演算子（+）……足し算 文字列結合演算子（+）……文字を繋げる マイナス演算子（-）……引き算 乗算演算子（*）……掛け算 除算演算子（/）……割り算 0で除算すると、Infinity（無限大）になる 剰余演算子（%）……余りの計算で、余りを返す ex）7%3=2...1 ①返す 6%3=2...0 ⓪返す べき乗演算子（**）……累乗の計算…

www.smashingmagazine.com 概要：Screen Orientation APIをご存知ですか？Device Orientation API、Vibration API、Contact Picker APIについてはどうでしょう？Juan Diego Rodriguezは、あまり知られていないウェブ機能に興味を持ち、これらの機能が広くサポートされるようになった場合に、より使いやすく堅牢なプログレッシブウェブアプリを作成するためにどのように活用できるかを考察しています。 2年ほど前、JavaScriptの現状に関する調査で、認知度が最も低かった4つのJavaScript AP…

Kyoto.なんか #6 で発表しました. speakerdeck.com 以下はその補足情報など. 仕様書中の出現頻度 null と undefined がそれぞれの仕様でどの程度使われているのかは, 仕様書中の出現頻度を見るだけでもある程度わかりりそうです. ということで ECMAScript 2024 と WHATWG の標準 (2024-09-07 時点) のうちいくつかの仕様書の中での出現頻度を見てみましょう. Spec #null #undefined ES2024 300 939 DOM 368 120 Fetch 276 10 HTML 1778 275 URL 98 9 見て…

JavaScriptのプロトタイプについてまとめました。 以下の構成になっています。 プロトタイプとは プロトタイプベースのオブジェクト指向 プロトタイプの実装 プロトタイプへのアクセス プロトタイプの継承 プロトタイプメソッドとインスタンスメソッドの違い prototypeと[[Prototype]]と__proto__の違いまとめ オブジェクトリテラルのプロトタイプ プロトタイプとは プロトタイプとは、オブジェクトが持つ別のオブジェクトのことで、そのオブジェクトからメソッドやプロパティを継承できる。 プロトタイプはJavaScriptのオブジェクト指向の基盤となる概念。 現在はオブジェクト…

はじめに この記事は、2024年8月に私が何をやっていたのかを振り返る記事です。 もしみなさまの参考になる部分があれば幸いです！ やったこと 任意継続手続き 8月は会社に所属しないので、厚生年金の任意継続手続きを行いました。 これを行わないと、国民年金への切り替えが発生してしまって手間がかかるためです。 手続きは全て書面で完結しました。 保険協会のHPから書面をダウンロードし、コンビニで印刷し、身分証明書のコピーと同封して送りました。 便利な世の中ですね〜！ Laravelの書籍を読んだ Laravelの書籍「PHPフレームワーク Laravel実践開発」を読みました。 『PHPフレームワーク…