ECMAScript

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…

こんにちは、クラウド推進技術部開発第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コードを実行するクロスプラットフォームのオープンソースバックエンドの…

はじめに 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の…

大学の図書館サービスの１つに日経BP記事検索サービスがあります。 いまやサブスクでいろんな雑誌等が電子書籍で読めるようになりましたが、かなり前からこのサービスはあって、昔から日経雑誌を読んでいた私としては（個人としては）無料でこんなサービスが利用できるありがたみを噛み締めてきました。 昨夜、なんかの作業の流れで以下の日経ソフトウェアの記事を見つけて、古い記事だけど学生もやってるPythonだしC言語でした面白そうなのでゼミでやろうかな。。。と思ったところでした。 特集１ スクリプト言語をゼロから作ろう Ｐａｒｔ１ 言語処理系の作成は難しくない！ | 日経ソフトウエア | 日経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等)にまと…

データ構造｜アルゴリズム｜プログラミング｜プログラム言語｜その他の言語 データ構造 リストには，配列で実現する場合とポインタで実現する場合とがある。リストを配列で実現した場合の特徴として，適切なものはどれか。ここで，配列を用いたリストは配列に要素を連続して格納することによってリストを構成し，ポインタを用いたリストは要素と次の要素へのポインタを用いることによってリストを構成するものとする。 リストにある実際の要素数にかかわらず，リストに入れられる要素の最大個数に対応した領域を確保し，実際には使用されない領域が発生する可能性がある。 リストの中間要素を参照するには，リストの先頭から順番に要素をたど…