Netscape 社の JavaScript と、Microsoft 社の JScript の動作を統一するために作られた、プログラミング言語の仕様。 Java 言語のようなクラスベースではなく、プロトタイプベースのオブジェクト指向を採用している。
ECMAScript をベースとしている言語として、
などがある。
前提 トランスパイラ利用の有無に関わらず、ES2017 相当の(2021/10 時点でブラウザの対応率が十分に高い)記述がユーザーのブラウザで動くようにする、という方針 トランスパイラを用いても、ECMAScript の全ての記述を変換してくれるわけではないことは薄々気づいていた ESLint を用いても、ECMAScript の全ての記述を解析してくれるわけではないことは薄々気づいていた 目的 ECMAScript を利用した場合に トランスパイラは何を変換し、何を無視するのかを検証する ESLint は何を解析し、何を無視するのかを検証する 検証用の入力 ES6 〜 ESNext の規格に…
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…
ビザスクWebチームエンジニアの小柳(@mascii_k)です。先週の6/6(木)に弊社が会場提供した Meguro.es #21 について、当日の様子をレポートしたいと思います。Meguro.es公式のレポートもぜひご覧ください: Meguro.es #21 を開催しました イベント概要 Meguro.esは2ヶ月に一度、目黒駅周辺、目黒区、目黒川沿い、敷地の一部が目黒といった、目黒っぽい会場で開催されるJavaScript (ECMAScript)に関するコミュニティーイベントです。弊社は隣のビルに "SHIBUYA" と書いてあるなど、なんとも渋谷感あふれる立地ですが、目黒区青葉台に所在…
こんにちは、クラウド推進技術部開発第1グループの石川です。 突然ですが、トランスマックス (Transmux) とはなんでしょうか? 動画は内容を表すコーデック (H.264, H.265, mp3, AAC, ...) と、コーデックを多重化するコンテナ (MPEG-TS, fmp4, FLV, ...) で構成されています。 トランスマックスは、コーデックはそのまま、コンテナを移し替えることを指します。 ここまでの話だと、全然フロントエンドと関係ないと思われるかもしれませんが、実はブラウザでのメディア再生には欠かせない技術になります。 何故かというと、ブラウザでの視聴の際に、非対応なコンテ…
(adsbygoogle = window.adsbygoogle || []).push({}); こんにちは! 今日は、世界で使用されているプログラミング言語ベスト3について紹介したいと思います! 世界で使用されているプログラミング言語ベスト3とは、 1位:JavaScript 2位:Python 3位:Java の3つです。 それぞれ簡単に紹介したいと思います! JavaScript JavaScriptとは、アメリカのネットスケープコミュニケーションズ社(1998年、AOLにより買収)が開発したスクリプト言語。 1995年に発表された。 スクリプト言語とはコンピュータにおける処理手順を…
TypeScript プロジェクトを作成するとき、 tsconfig.json で compilerOptions.target を指定することができる。 Next.js のプロジェクトを生成する create-next-app を使うとデフォルトで es5 が指定される。しかし ES5 がリリースされたのは2009年であり、フロントエンドの成長(ここでは言語機能やブラウザ機能の進歩)を考えるともはや古代。どう決めたらいいのか考えてみる。 tsconfigって何だっけ TypeScript プロジェクトでは必ず設定してるけどこいつは何だ。 www.typescriptlang.org 次の2つ…
この記事では、フレームワークを使用せずに純粋なNode.jsで構築された単純な静的ファイルサーバーを提供します。 Node.jsの現在の状態では、組み込みのAPIとわずか数行のコードによって、必要なほとんどすべてが提供されています。 Node.jsとは Node.jsのインストール Common JSモジュールとES6 モジュール Comon JSモジュールでのファイル作成 静的ファイルサーバー ES6 モジュール 最後に Node.jsとは Node.jsは、V8エンジンを使用して Webブラウザの外部でJavaScriptコードを実行するクロスプラットフォームのオープンソースバックエンドの…
2023/02/27 11時ごろに起きる。早起き〜 11時に目覚ましが鳴り、30分ほど布団の中でモゾモゾして活動を開始した。なんで? 登校マン。23年度に履修する科目を登録しに行く。今年度の予定を決める点では、かなり重要な行事(?)だけど、時間や持ち物等が書かれた紙が行方不明になってしまったので、何もわからない状態で行くことになった。一年目に色々と必修をやっつけたので、取れる科目の幅が広がって良い。 去年は学校からひいひい言いながら教科書を持ち帰ったんだけど、来年度からは郵送になるらしい。最高すぎる。去年はあまりにキツすぎて、この教科書で勉強して教育委員会を爆破してやろうとか考えていたけど、良…
はじめに Node.js とは 主な用途 誕生や CommonJS との関わり 主な特徴 クライアントサイドからサーバーサイドまで同じスクリプトが使える。 大量のアクセスが発生しても比較的軽快に動作する。 おわりに はじめに JavaScript の歴史の続きです。 以前以下の記事で CommonJS について触れました。 maru-note.net 本記事ではCommonJSとも大きく関わりがあり、今やWebアプリケーション開発には欠かすことの出来ない技術「Node.js」について触れたいと思います。 Node.js とは 簡潔にいうと、Node.js とはJavaScript実行環境です。…
結論: localeCompare を使う a.localeCompare(b, undefined, {numeric: true, sensitivity: 'base'}) 参考: https://stackoverflow.com/a/65687141 localeCompare は IE11 でも使えるので、使えない心配はほぼありません。 しかし、locale とついているためブラウザ実装依存ではないか? と不安になりますよね。今回はそこを調べてみました。 まあ、結論から言うと 実装依存っぽいので自身のサポート環境でしっかり検証してから使う必要があります。 localeCompare…
Vue2を振り返る setup / update Homebrew brew update Node.js nodebrewをhomebrew経由でインストールして管理しています 使うnodeのバージョンでかなり異なる結果になるので気をつける必要がありますが今回は以下を使いました $ nodebrew ls v16.20.0 current: v16.20.0 nodeのversionが変わっていることを確認します node -v v16.20.0 npm update version確認 $ npm -v 9.6.5 update $ npm update -g npm check $ np…
事前知識 調査 create react app(以下CRA)はなにをしてくれている? 参考記事① npm run eject 参考記事②(WebpackやBabelってなに) CRAが出るまで(2016/07/22)と出たあとでの変化 CRAが出た背景 裏では何が使われている?(公開当時) (公開時点で)入ってないもの 参考記事③(SSG/SSRってなに) CRAが出る以前 当初のCRAの目的 CRAの問題 公式ドキュメントを読む CRA以外のreactアプリの構築方法 Babel、webpackを自力で導入する。 webpackからviteなどに移行する。 構築(今回はCRA) myPCの…
現代のフロントエンドは、フロントエンドから距離のある人にとっては混乱に満ち満ちた近寄りがたい存在に映ります。かくいう自分がそうでした。サーバサイドのコードはそれなりに書けたし、アーキテクチャパターンや関数型プログラミングなどのトピックにキャッチアップして習熟できてもいました。 ではフロントエンドはどうかというと… 苦手意識が強かった。フロントエンドなのになんでnode.js要るのかよくわからないし、双方向データバインディング?フレームワークはどれがいいの… など、容易に混乱をきたします。 この記事は転職を機にフロントエンドに入門するまでの学習記録を書いたものです。 入門!これだけ読んどけ!的な…
大学の図書館サービスの1つに日経BP記事検索サービスがあります。 いまやサブスクでいろんな雑誌等が電子書籍で読めるようになりましたが、かなり前からこのサービスはあって、昔から日経雑誌を読んでいた私としては(個人としては)無料でこんなサービスが利用できるありがたみを噛み締めてきました。 昨夜、なんかの作業の流れで以下の日経ソフトウェアの記事を見つけて、古い記事だけど学生もやってるPythonだしC言語でした面白そうなのでゼミでやろうかな。。。と思ったところでした。 特集1 スクリプト言語をゼロから作ろう Part1 言語処理系の作成は難しくない! | 日経ソフトウエア | 日経BP記事検索サービ…
2023 年 4 月 18 日にリリースされた Node.js v20 の主な変更点を紹介します。 nodejs.org ファイルのアクセスやプロセスの起動を制限する新しいパーミッションモデル (experimental) --allow-fs-read でファイルの読み込みを許可する --allow-fs-write によるファイル書き込み許可 --allow-child-process による child_process の許可 --allow-worker による Worker Threads の許可 Permission Model の参考記事 V8 11.3 による新しい JavaS…
フロントエンドのバンドルとは フロントエンドのバンドルとは、プロジェクト内にある複数のJavaScriptファイルやCSSファイルを1つのファイルにまとめることを指します。 これにより、Webページのロード時間を短縮することができ、ユーザー体験を向上させることができます。 また、読み込むファイルを1つにすることで、読み込み処理の記述の煩雑さを防ぐことができます。バンドルは、通常、モジュールバンドラー(後述)と呼ばれる特殊なソフトウェアを使用して作成されます。 モジュールバンドラーは、アプリケーション内のすべての依存関係を解決し、必要なすべてのモジュールを単一のバンドル(Webpack等)にまと…
データ構造|アルゴリズム|プログラミング|プログラム言語|その他の言語 データ構造 リストには,配列で実現する場合とポインタで実現する場合とがある。リストを配列で実現した場合の特徴として,適切なものはどれか。ここで,配列を用いたリストは配列に要素を連続して格納することによってリストを構成し,ポインタを用いたリストは要素と次の要素へのポインタを用いることによってリストを構成するものとする。 リストにある実際の要素数にかかわらず,リストに入れられる要素の最大個数に対応した領域を確保し,実際には使用されない領域が発生する可能性がある。 リストの中間要素を参照するには,リストの先頭から順番に要素をたど…
クロージャー(Closure)の概念は関数型プログラミングにおいて重要であり、JavaScriptの面接でよく質問される事もあります。 どこでも使用されていますが、クロージャーは把握するのがとても困難でもあります。 まず、クロージャーを学ぶまえに『スコープ』および『レキシカルスコープ』の基本を学ぶ必要があります。 そして、前提としてJSの変数および関数に精通しているかご確認下さい。 この記事では、JavaScriptクロージャーの仕組みおよびJavaScriptスコープについて解説します。 スコープ スコープチェーン レキシカルスコープ JSのクロージャーとは? レキシカルスコープとクロージャ…