Netscape 社の JavaScript と、Microsoft 社の JScript の動作を統一するために作られた、プログラミング言語の仕様。 Java 言語のようなクラスベースではなく、プロトタイプベースのオブジェクト指向を採用している。
ECMAScript をベースとしている言語として、
などがある。
ES6(ECMAScript 2015)以降ではvarの使用を避けることが推奨 ブロックスコープと関数スコープの違い ES6(ECMAScript 2015)以降ではvarの使用を避けることが推奨 JavaScriptにおいては、ES6(ECMAScript 2015)以降では、varの使用を避けることが推奨されています。 代わりにletやconstを使用することで、変数のスコープや再代入の制御が向上し、コードの品質が向上します。以下は、varを使わない方がよい理由で す。変数のスコープ問題: varは関数スコープを持ち、ifやforなどのブロック内で宣言されても、その変数は関数全体でアクセス…
PMDバージョン: 7.0.0-rc4 AvoidTrailingComma 公式ドキュメント: AvoidTrailingComma Since: PMD 5.1 Priority: High (1) Description: ブラウザによってオブジェクトや配列リテラルの末尾のコンマの扱いが異なるため、末尾にコンマを書かないように留意することでコードの移植性を向上させるのに役立つ。 Property: 名前 デフォルト値 説明 複数指定 allowObjectLiteral false オブジェクトリテラル内の最後のカンマを許可する - allowArrayLiteral false 配列リ…
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…
IE11の考慮が不要となった場合に、特定のブラウザバージョン以降で使えるようになる機能一覧を列挙して表示するサイトを作った。 the-world-after-ie-left.vercel.app リポジトリはこちら github.com デフォルトでは Chrome > 90 Edge > 90 Firefox > 90 Safari > 13 以降で使える機能を確認できる。 ※ ちなみに雑にVercelにデプロイしてるので、レスポンスが巨大すぎるとVercel自体の制限に引っかかって死ぬことがあるので、落ちる場合は絞り込み用のブラウザバージョンをちゃんと入れてください。 IE卒業式という社内…
はじめに 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…
こんにちは。ムキムキマッチョマンになりたい人です。心も体もムキムキマッチョマン。 フロントエンド領域でのムキムキマッチョマン目指して頑張っています。 この記事は技術記事の皮を被った、IT知識トレーニングの記録です。 導入 我々フロントエンドエンジニアなら誰しも一度は記述するHyper Text Markup LanuageことHTMLですが、書き方やタグのルールはどのようにして決められているのでしょうか? HTMLの標準仕様における現行版「HTML Living Standard」を読み、Web標準について理解を深めるブログです。 Webを支える「標準」 HTMLのルールはブラウザ開発会社のエ…
前回の自動テストに続き、書籍によるJavascriptのインプットを行いました。 良かったところ 一言にJavascriptといっても基本文法から関数やクラス、DOM操作や各種ライブラリなど、その使用範囲は多岐に渡ります。本書はその全てを網羅することを目的とせず、プログラミング経験者が、初めてJavascriptに触れる際に手にする入門書となっています。 またWeb版と書籍版の2つがあり、Web版では本家Javascriptの更新に合わせて内容も随時改訂が入ります。書籍は末尾に索引が入っています。 書籍内でも触れられていますが、Javascript自体のリファレンスとしては実質の公式ドキュメン…
WEBデザイナーとして成功するためには、様々なスキルや知識が必要です。この記事では、WEBデザイナーになるために必要な知識に焦点を当てて解説します。 まずはHTMLとCSSの基礎を理解し、その後にカラーセンスやデザイン理論、インタラクションデザイン、JavaScriptの基礎などについて学んでいきましょう。さらに、よくある疑問や質問にも答え、成功するためのポイントをお伝えします。 WEBデザインに興味がある方やこれからWEBデザイナーを目指す方にとって、この記事が役立つ情報となることを期待します。 【PR】Webデザイナーを目指す方におすすめのWebデザインスクール! 副業・フリーランスのWe…
経緯 & 概要 勉強の経緯 技術選定 開発中の一コマ Jest yarn とは ChatGPT TypeScript yarn buildで何をしているか github pages について そもそも yarn deploy で何をしているのか VSCodeからの拡張機能の提案 (Rainbow CSV) クラウド版 VSCode Github Copilot Chat ホスティングサービス選定 Github Pages Windowsの Powershell で yarn 一応 github pagesの始め方 npx Jestの始め方 jsdom と node 所要時間 経緯 & 概要 私…
ムキムキマッチョマンになりたい人です。心も体もムキムキマッチョマン。 Webフロントエンド領域でのムキムキマッチョマン目指して頑張っています。 この記事は技術記事の皮を被った、IT知識トレーニングの記録です。 Web考古学 ちゃんとした名称がありそうですが、1989年にティムバーナーズリー氏によって提唱されたWorld Wide Webに端を発した「Web」そのものの歴史を辿る試みです。具体的にはWikipediaを起点に、W3CやWHATWGの仕様書やドキュメント、果ては古のブログやニュース記事を漁り当時その技術や対象がどう捉えられどうなると考えられていて結果としてどうなったのかを探っていま…
tskaigi.org TSKaigi 2024のトーク枠のセッションにプロポーザルを提出してましたが、今日当落発表があり落ちていました。 落ちてしまったので、ここにプロポーザルの内容を公開して供養します。 プロポーザルの内容 背景 ECMAScript の Decorator は長い標準化の道のりの末、2022年3月に Stage 3 に昇格しまし、この進展を受けて TypeScript 5.0 ではこの仕様が実装されました。 更に、Decorator をさらに強化する Decorator Metadata も2023年6月に Stage 3 に昇格して、TypeScript 5.2 で実装…
応用情報の過去問を解いた時のメモ ディスプレイ 有機EL:電圧、発光素子 ブラウン管:電子ビーム 液晶:透過する光 プラズマディスプレイ:放電、紫外線、蛍光体 略語(言語) DDL:Data Definition Language。データベースの定義に使われるSQL。 HDL:Hardware Description Language。デジタル回路の構成を文章で記述。FPGA、直接論理構成 UML:Unified Modeling Language。オブジェクト指向開発。 XML:eXtended Markup Language。システム間のデータ交換。利用者が自由に定義。 DisplayPo…
www.itmedia.co.jp 月面では14日間続く灼熱の昼と、14日間の極寒の夜が訪れる。月面の昼は110度、夜はマイナス170度になるとされ、SLIMの設計範囲を超えた非常に厳しい温度環境だ。 「SLIM」月面の夜を超える 極寒に耐え、通信再開の快挙 - ITmedia NEWS ⇧ 設計範囲を超えた、って部分がよく分からないんだけど、意図的なのかしら、何かモヤる... 快挙なんだとは思いますが... JDK(Java Development Kit)に同梱されているjrunscriptでJDBC接続の確認ができるらしい(非推奨) 何やら、 tc.hatenablog.com サーバ上…
SREチームの藤原です。 今回は Amazon CloudFront Functions をテストするためのOSSとして、cfft というものを書いたので紹介します。 github.com 3行でまとめ CloudFront Functionsのテストは手元ではできなくて面倒です CloudFront Functionsをテストする cfft というOSSを書きました KeyValueStoreの操作を含め、便利な使い方がいろいろありますのでどうぞご利用下さい CloudFront Functionsをテストするのが面倒という問題 CloudFront Functions (以下CFF) は、…
はじめに 本記事は以下の教材を読んだ感想を書いております。 jsprimer.net 良かったところ Javascriptの基本から応用までこれでもかというくらい詳しく記載されています。第一部に基本文法、第二部に応用編と題してTodoアプリの作成などを行っており、どの項目にもサンプルコード豊富に記載されているのでとても理解がしやすくなっております。 学んだこと 基本編 JavaScriptとは コメント 変数と宣言 値の評価と表示 データ型とリテラル 演算子 暗黙的な型変換 関数と宣言 文と式 条件分岐 ループと反復処理 オブジェクト プロトタイプオブジェクト 配列 文字列 文字列とUnico…
ECMAScript の Boolean(value) の仕様の前半部分をなるべく詳細に読んでみました。
プロジェクトを長い期間メンテナンスしていると、あれ?これなんでこんな書き方になってるんだっけ?という実装に時々出会います。他の人が書いたソースならともかく、自分で書いたにも関わらず、あれ?あれれ?と思うことが良くあります。 ロジックに対するあれれ?ならば、コメントを読んだり、設計ドキュメントを読んだり、実装の前後を読んだりすることで解消することもあるのですが、細かな実装方法に関してはなんだかさっぱりわからなくて、まぁいいか、このままにしちゃえ、ということもままあります。 最近特に気になっているのが、TypeScript で本来必要でないところに現れる謎の optional chain。動作には…
先日購入した「TypeScriptとReact/Next.jsでつくる実践webアプリケーション開発」で、TSやフレームワークであるNext.jsを触れつつ実際に開発を経験してみる。その学習記録。 またうひょ氏こと鈴木僚太氏著の「プロを目指す人のためのTypeScript入門」も併読している。TSの挙動や仕様を知るにはうひょ氏著作を、実際に作ってみる教科書としてアプリケーション開発のほうを拝読している。 記事内容は学習その記録。 「TypeScriptとReact/Next.jsでつくる実践webアプリケーション開発」chapter2.6では各種開発時の設定についての節がある。 中でもtsco…
次回: CRAからViteへの移行 - Vite移行編 - harryのブログ 前書き 個人開発のSPAでcreate-react-app(以下CRA)を使っていたが、少し前ついに最新版に更新できないライブラリが出てきてしまった。 ので、重い腰を上げて移行作業を始めた。 が、テスト移行だけでしんどい事になってきたので、忘れないうちに記事を書く。 つらすぎたので既にVite移行完了後はVitestへ移行することを心に決めつつある。 以下の記事で言及されている通り、テストをCRA依存からjest単体へ移行することは、Vite移行とは独立して作業できます。 そのため、まずはこちらから始めます。 移行…