この記事は、ウェブ技術の開発者（Java, PHP, Ruby, Go... 全て含む）のうち、少しでもJavaScriptを触ったことがあるけど、現代ウェブフロントエンドというか、特にウェブアプリケーション —— React, Vue, Angular など—— が分からない人に向けて、たったひとつの理解方法を提示するものです。 追記: ちなみに果てしなくどうでもいいですが、今回の記事が記念すべき100記事目らしいです。（Noteさん！その手のヤツはいっそ自動で記事にバッヂを表示するとかしてくれるとうれしいです！） 対象読者は、Java, PH(以下略）などのコードと一緒に、ほんの少しでもJSのコードを触った、見たことがあるというレベル感の人なので、既にReact, Vue, Angular などでガリガリコードを書いている人は対象ではありません。 あとホームページ屋さんとかウェブコーダ
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた
【JS完全に理解した】JavaScript PrimerとプログラミングTypeScriptとレガシーフロントエンド安全改善ガイドを読んでみた - give IT a try
はじめに 僕は仕事でRuby on Railsを使ってWebアプリケーションを開発しているので、JavaScriptはそれなりに使えます。 ですが、サーバーサイドで使っているRubyに比べると、JavaScriptの習熟度はそれほど高くありません。 とくに、文法が一気にブラッシュアップされたES2015（ES6）以降の知識は「なんとなく把握はしているが、あくまでなんとなく」といった感じです。 また、最近よく名前を聞くようになったTypeScriptも「名前は知っているが使ったことはない」というのが現状です。 というわけで、「そろそろちゃんと勉強しておかないと」という思いから、以下の本を購入してみました。 JavaScript Primer 迷わないための入門書 (アスキードワンゴ) 作者:azu,Suguru Inatomi発売日: 2020/06/10メディア: Kindle版プログラミ
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 JavaScriptの仕様であるECMAScriptは年次で仕様が更新されています。ECMAScript 2020（ES2020）は2020年6月にリリースとなりました。現行のすべてのブラウザでES2020の機能は利用できますが、フロントエンドエンジニアにとって使いこなしたい記法ばかりです。 本記事ではES2020に焦点をあて、JavaScriptの新しい記述方法のメリットと使いどころを解説します。 オプショナルチェーン Optional Chaining（オプショナルチェーンやオプショナルチェーニングと呼ばれています）とは、?.構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組みです。 利用シーン nullやunde
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
セガは6月25日、対戦アクションパズルゲーム「ぷよぷよ」のソースコードを使ったプログラミング教材「ぷよぷよプログラミング」を、26日から無料で提供すると発表した。 ぷよぷよプログラミングは、Webシステムの開発を手掛けるアシアル（東京都文京区）のプログラミング学習ツール「Monaca Education」上で使える教材。インターネット環境があればOSの種類に関係なくWebブラウザから操作できる。 利用者は、HTML5やJavaScriptで書かれたソースコードを書き写し、ぷよぷよのプレイ画面を確認しながらコーディングを学ぶ。「ぷよ」を左右に移動させたり、消したりできる他、ぷよの色や数を変更できる。 関連記事 セガ、手のひらに収まる携帯ゲーム機「ゲームギアミクロ」発売決定 「ガセですか？」「セガです」 セガは6月3日、小型携帯ゲーム機「ゲームギアミクロ」を発売すると発表した。セガグループの里
ホームページ- EY-Office
小ネタです、JavaScriptで本日の日付をYYYY-MM-DD形式で得るコードは案外面倒です。 本日2023年4月17日なら 2023-04-17 という文字列を得るコードはRubyならTime.now.strftime("%Y-%m-%d")、Pythonならdatetime.today().strftime("%Y-%m-%d")（importは省略しました）と簡単に書けますが、JavaScriptでは案外面倒なのです。 追記： いくつかの間違いのご指摘がありましたので修正しました（2023-04-19）。 DeepAIが生成した画像です いっけん正しいようで間違ったコード new Date().toISOString().slice(0,10) new Date()で本日の日時を取得します toISOString()メソッドは日時データをISO形式の文字列に変換します、例えば 2
いまどきな JavaScript に入門しよう！『流麗な JavaScript』を読んで（上） - 虎の穴開発室ブログ
こんにちは。虎の穴ラボの古賀です。 9 月の連休で社内の技術書購入を支援する制度を利用して購入した『流麗（ELOQUENT）な JavaScript 第 3 版 現代のプログラミング入門』を読みました。 流麗なJavaScriptの書影 良い本でしたので、本書の前半部分の概要とその中で良かったところや気になったところをご紹介します。 どんな本か 基本情報 オススメする読者層 著者、訳者について 構成について Chapter1〜3：プログラムの基礎的なところから、制御フロー、関数など Chapter1 Chapter2 Chapter3 Chapter4 Chapter5 Chapter6 Chapter7 Chapter8 Chapter10 Chapter11〜22：未読 良かったところ サンプルコードの実行環境や練習問題がある 初心者がつまづきがちなところについて説明がある 気になった
JavaScript において、特に苦手とする人が多い印象のある Promise ですが、await と async の文法が導入されたことで、Promise の仕様を深く理解しなくても非同期処理を自然に書けるようになってきたのではないかと思います。 極論ですが、JavaScript の非同期処理は async await new Promise のみで、（ほぼ）全て表現可能です。特別な理由がない限り then を使わないようにしましょう、ということを周知するのがこの記事の目的です。 なお本記事では Promise の rejected の状態についてほとんど解説しておりません。基本を理解したら、別記事でぜひ学んでみてください。 Promise とは？ Promise は、少し乱暴に説明すると「実行が終わっていないかもしれない何らかの関数」を包んだオブジェクトです。 普通の関数とは違って、
JavaScriptの仕様であるECMAScriptはEcma Internationalによって定められています。ECMAScript 2015（ES6）の登場以降は、ECMAScript 2016、ECMAScript 2017･･･と、年次で仕様が更新されています。ECMAScript 2022（ES2022）は2022年6月22日のEcma InternationalのGA 123rd meetingにて、ECMAScript 2023（ES2023）は2023年6月27日のGA 125th meetingで承認されました。 ES2022とES2023はすでに多くのブラウザやNode.js環境で利用可能です。本記事では新仕様と使いどころを紹介します。 ES2023 - 配列の非破壊操作 ES2023では配列を非破壊で操作できるメソッドが追加されています。非破壊とは、元の配列を変更せ
What's New In DevTools (Chrome 96) | Blog | Chrome for Developers
Preview feature: New CSS Overview panel Use the new CSS Overview panel to identify potential CSS improvements on your page. Open the CSS Overview panel, then click on Capture overview to generate a report of your page’s CSS. You can further drill down on the information. For example, click on a color in the Colors section to view the list of elements that apply the same color. Click on an element
達人出版会
探検! Python Flask Robert Picard, 濱野 司(訳) BareMetalで遊ぶ Raspberry Pi 西永俊文 なるほどUnixプロセス ― Rubyで学ぶUnixの基礎 Jesse Storimer, 島田浩二(翻訳), 角谷信太郎(翻訳) 知る、読む、使う！ オープンソースライセンス 可知豊 きつねさんでもわかるLLVM 柏木餅子, 風薬 徹底攻略 AWS認定 クラウドプラクティショナー教科書 第2版［CLF-C02］対応 トレノケート株式会社 高山裕司 超楕円関数への招待 楕円関数の一般化とその応用 松谷 茂樹 手を動かしてわかるクリーンアーキテクチャ ヘキサゴナルアーキテクチャによるクリーンなアプリケーション開発 Tom Hombergs(著), 須田智之(訳) 詳解 AWS CloudFormation 潮村 哲 その決定に根拠はありますか？ 確率思
AlbertoM Posted on Jan 5, 2020 • Updated on Mar 8, 2020 • Originally published at inspiredwebdev.com Hi, I am Alberto Montalesi, a full-stack self-taught developer. I create practical JavaScript tutorials and courses on my website inspiredwebdev.com to inspire other developers to grow and build the career that they want. JavaScript is a language in constant evolution and in the past few years, man
訳者前書き 本記事は、InspiredWebDevの原文記事(英語)について、自身の理解を深める為に日本語翻訳したものです。 はじめに JavaScriptは絶えず進化している言語であり、過去数年で多くの新機能がECMAScriptの仕様に追加されました。 この記事は、Alberto氏の著書「最新のJavaScriptの完全ガイド(Complete Guide to Modern JavaScript)」の抜粋です。 同書では、ES2016、ES2017、ES2018、ES2019の新規追加要素について説明しています。 記事の最後に、すべてを要約したチートシートをダウンロードするためのリンクがあります。 1. ES2016の新機能 ES2016で導入された２つの新機能について説明します。 Array.prototype.includes() 指数演算子(べき乗) 2. Array.prot
気になったので調べてみました。 tsconfig.jsonと普通のJSONの大きな違い tsconfig.jsonには、コメントが書けます。 tsc --init した時に生成されるtsconfig.jsonに、大量にコメントが付けられているので、すぐに気付くことと思います。 例) { "compilerOptions": { "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */, "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd
達人出版会
探検! Python Flask Robert Picard, 濱野 司(訳) BareMetalで遊ぶ Raspberry Pi 西永俊文 なるほどUnixプロセス ― Rubyで学ぶUnixの基礎 Jesse Storimer, 島田浩二(翻訳), 角谷信太郎(翻訳) 知る、読む、使う！ オープンソースライセンス 可知豊 きつねさんでもわかるLLVM 柏木餅子, 風薬 デザインディレクション・ブック 橋本 陽夫 現場のプロがやさしく書いたWebサイトの分析・改善の教科書【改訂3版 GA4対応】 小川 卓 解釈可能なAI Ajay Thampi(著), 松田晃一(翻訳) PowerPoint 目指せ達人 基本&活用術 Office 2021 & Microsoft 365対応 PowerPoint基本＆活用術編集部 ランサムウェア対策 実践ガイド 田中啓介, 山重徹 TODによるサステナ
ABEMA Web で Polyfill のコードをモダンブラウザ向けに 99% 削減した話 | CyberAgent Developers Blog
これらを踏まえて polyfill-library を使って Polyfill の出し分けをすることが最適解だと確信しました。 Polyfill の出し分けの実装方法 最初に実装したコードの全体像を見せると次の通りになります。それぞれの変数や関数についての説明は後ほどおこないます。 import crypto from "crypto"; import { Response, Request } from "express"; import { getPolyfillString } from "polyfill-library"; import polyfillLibraryPackageJson from "polyfill-library/package.json"; const FEATURES_OPTION = { flags: ["gated"] }; const FEATUR
ES2015で登場したPromiseとES2017で追加されたasync/awaitによってJavaScriptのコーディングスタイルは大きく変わりました。Promiseの基本的な使い方を理解していることは「脱初心者」のひとつの指標にもなっているようで、網羅的で優れた解説も数多く存在します。 では、基本をおさえた後の活用方法はどうでしょうか？ 実際のところ実務ではライブラリやフレームワークから返却されたPromiseをそのままawaitするだけ…という使い方がほとんどかもしれません。しかし、これらのライブラリやフレームワークの中で利用されているような高度なPromiseの活用法をマスターすれば、もっと自由なプログラミングができるようになります。 この記事ではPromiseを活用した実践的な例を3つ紹介します。いずれもライブラリやフレームワークに類似の機能を持つものはありますが、仕組みを理解
JavaScript is a language in constant evolution and in the past few years many new features have been added to the ECMAScript specification. This article is an extract of my book Complete Guide to Modern JavaScript and it covers the new additions of ES2016, ES2017, ES2018, ES2019. At the end of the article you will find a link to download a cheatsheet that summarizes everything. Everything new in E
【感想】『JavaScript Primer 迷わないための入門書』でモダンJS再入門 #jsprimer - Rのつく財団入り口
JS完全に理解した……（し て ま せ ん） 見出しはエンジニア界隈でお馴染みのダニング=クルーガー曲線のアレでございます。2020年6月に出たばかりの最新のJS本を読んだので書評です。 570ページ余りの分厚さで電子版もあり。著者はECMAScriptの仕様にも関わっているazuさん、Angular日本ユーザー会代表のSuguru Inatomiさんと強力な布陣。ES2015(ES6)以降も進化を続けるJavaScriptについて、完全にES6をベースにしたモダンな入門書となっています。 コンテンツはGitHubで管理されてオープンソースとして執筆され、様々な人がコントリビュートした結果が反映される面白い作り方になっています。Web版もすべて無料で参照できるのですが、こういう体系的な情報はまとまった本で学ぶことにしているので電子版で読みました。 僕も2017-2018年ごろに掛けてJS＆
達人出版会
探検! Python Flask Robert Picard, 濱野 司(訳) BareMetalで遊ぶ Raspberry Pi 西永俊文 なるほどUnixプロセス ― Rubyで学ぶUnixの基礎 Jesse Storimer, 島田浩二(翻訳), 角谷信太郎(翻訳) 知る、読む、使う！ オープンソースライセンス 可知豊 きつねさんでもわかるLLVM 柏木餅子, 風薬 手を動かしてわかるクリーンアーキテクチャ ヘキサゴナルアーキテクチャによるクリーンなアプリケーション開発 Tom Hombergs(著), 須田智之(訳) 詳解 AWS CloudFormation 潮村 哲 その決定に根拠はありますか？ 確率思考でビジネスの成果を確実化するエビデンス・ベースド・マーケティング 小川 貴史, 山本 寛 プログラマーのためのVisual Studio Codeの教科書【改訂2版】 川崎 庸
目次＃ 前編 準備段階：計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Googleフォント。 ビルドの最適化 JavaScriptモジュール、モジュール/ノーモジュールのパターン、ツリーシェイ
What's New In DevTools (Chrome 94) | Blog | Chrome for Developers
Use DevTools in your preferred language Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language! Open Settings, then select your preferred language under the Preferences > Language dropdown and reload DevTools. Preferences" width="800" height="494"> Chromium issue: 1163928 New Nest Hub devices in the Device list You can now simulate the dimensions of Ne
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
現代ウェブフロントエンド（ウェブアプリケーション）について理解する唯一の方法｜erukiti
2022年におけるフロントエンド開発のベースライン
配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA
JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 - ICS MEDIA
2022年におけるフロントエンド開発のベースライン
「ぷよぷよ」のプログラミング教材、セガが無料提供 “ぷよ”の移動や色指定でゲーム制作体験
JavaScript で then を使うのは避けよう（await / async の初級者まとめ）
JavaScriptのES2023・ES2022の新機能まとめ - ICS MEDIA
JavaScript: Everything From ES2016 to ES2019
最新のJavaScript: ES2016からES2019までの知るべき全て - Qiita
tsconfig.jsonはJSONじゃないと言う話 - 焼売飯店
プログラミングの幅を広げよう！一段上のPromise活用テクニック - ICS MEDIA
Everything you need to know from ES2016 to ES2019
フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-中編 | POSTD