モダンJavaScript再入門 / Re-introduction to Modern JavaScript
FRONTEND CONFERENCE 2019の登壇資料です。 https://2019.kfug.jp/session/onoueyosuke Webサイト・Webアプリ制作への高まる要求に耐えられるようにJavaScriptは進化を続けてきました。特にこの約5年間で、JavaScriptはモダンなプログラミング言語へと大きな進化を遂げ、開発効率は劇的に高まりました。一方で、古いままの情報も多く、最新技術をキャッチアップするのは大変な面もあります。本セッションでは、新しくJavaScriptを学びたい人や昔に勉強した人、なんとなく書いている人が入門・再入門できるように、JavaScriptのモダンな書き方をなるべく実用的な例をまじえてご紹介します。また、将来のWebの変化についていけるように、これから先のJavaScriptがどのように進化していくのかの展望についてもお話しします。
はじめに モダンフロント開発に必須の知識であるES2015〜以降の記法と、実務でよく使用される高階関数について、自分の中で改めて復習、整理しておきたいと思います。 それぞれの項目に★~★★★の重要度も記述しています。 ★★★ => 必ず覚えておくべき ★★ => 覚えておくべきだが、使う場面が限られる ★ => 知識としては知っておいた方が良い 現在フロントエンドエンジニアの方やフロントエンジニアになりたての方、フロントエンドエンジニアを目指して勉強中の方に読んでいただけたら幸いです。 ES(ECMAScript)とは？ JavaScriptの標準仕様。 現在ブラウザで使われているJavaScriptは、ECMAScriptの仕様に則って開発されています。 JavaScriptは他の言語のようにversionなどが存在せず、「ECMAScriptのversion~~に対応しているJavaS
モダンJavaScript概論 − Node, npm, ECMAScript, Babel, Webpack | Hypertext Candy
2020.04.30 モダンJavaScript概論 − Node, npm, ECMAScript, Babel, Webpack この記事では、モダンな JavaScript を書くための前提として知っておくべき、いくつかのキーワードを紹介します。想定読者は、初心者 〜 jQuery なら書けるレベルの開発者です。これから React や Vue.js を学びたい方、または Web 開発の世界に飛び込む新人さんなどの学習の助けになれば、と思います。 「モダン」な JavaScript ここで言う「モダン」とはどういう意味でしょうか？ 「モダン JavaScript」という表現は数年前から目にしますが、大抵 ES2015（JavaScript の 2015 年バージョン）以降の JavaScript を指しているようです。確かに、const / let やアロー関数などの文法的な改善、A
セガは6月25日、対戦アクションパズルゲーム「ぷよぷよ」のソースコードを使ったプログラミング教材「ぷよぷよプログラミング」を、26日から無料で提供すると発表した。 ぷよぷよプログラミングは、Webシステムの開発を手掛けるアシアル（東京都文京区）のプログラミング学習ツール「Monaca Education」上で使える教材。インターネット環境があればOSの種類に関係なくWebブラウザから操作できる。 利用者は、HTML5やJavaScriptで書かれたソースコードを書き写し、ぷよぷよのプレイ画面を確認しながらコーディングを学ぶ。「ぷよ」を左右に移動させたり、消したりできる他、ぷよの色や数を変更できる。 関連記事 セガ、手のひらに収まる携帯ゲーム機「ゲームギアミクロ」発売決定 「ガセですか？」「セガです」 セガは6月3日、小型携帯ゲーム機「ゲームギアミクロ」を発売すると発表した。セガグループの里
対象者 UnicodeやUTF-16について、よくわかってない人 -> ここから "😀".split("")で文字化けする理由がわからない人 -> ここから [..."👨👩👧"].lengthが5になる理由がわからない人 -> ここから 文字コードについてもう一度 文字コードは以下の二つで構成されています 符号化文字集合: 文字と、その文字の位置を示す一意の番号の集合 文字符号化方式: 文字に振られた番号をバイト表現にエンコードする方法 符号化文字集合 符号化文字集合は、 文字 その文字の位置を示す一意の番号 この二つの組み合わせの集合のことを指します。 例えばASCIIでは 8bit(128通り) でラテン文字や英数字を表現しています。 しかしASCIIには日本語などの非英語圏の文字が収録されていません。 そのため、日本語を収録したShift-JISやアジア圏の文字を収録した
TypeScript の esModuleInterop フラグについて - 30歳からのプログラミング
esModuleInteropフラグを有効にすると、コンパイル時にヘルパーメソッドが生成されるようになり、モジュールシステムの相互運用性が高まる。 これにより、defaultをエクスポートしていない CommonJS 形式のモジュールを、ES Modules でデフォルトインポートする、といったことが可能になる。 この記事の内容は、TypeScript のv3.9.6と Node.js のv12.17.0で動作確認している。 ES Modules と CommonJS の互換性 まず、検証用に以下のファイルを作成する。 // src/myModule.js const add = (a, b) => a + b; module.exports = { value: 123, add, }; // src/index.ts import {value, add} from './myModu
【JavaScript基礎】Array.prototype.reduce() をしっかり理解する＆サンプル集 - KDE BLOG
配列のメソッドの中でも個人的にとっつきにくくて苦手意識のあった Array.prototype.reduce() 。 しかしAPIから取得したデータを扱いやすいように整形できたりと、使いこなせればとても強力なツールになることは間違いなく、この苦手意識を克服するために理解を深めつつ、いくつかのサンプルを作ってみたいと思います。 Array.prototype.reduce() の概要 構文 原則、初期値はつけた方が良い サンプル集 配列をオブジェクトにする 配列をインデックス付きのオブジェクトにする 配列内の要素から不要な値を削除する 二次元配列を一次元配列にする 多次元配列を一次元配列にする（再帰） 条件にマッチする要素から値を出す 配列内の重複している値を除外する filter() + map() の代わりに使う テンプレートリテラルのタグ関数で文字列の組み立てに使う まとめ 参考 Ar
ES6, CommonJS, AMD, RequireJS, UMD, System.JS, TypeScriptのModule を完全に理解する｜kuuubo
ES6, CommonJS, AMD, RequireJS, UMD, System.JS, TypeScriptのModule を完全に理解する JavaScript, TypeScriptを利用していると様々なモジュールシステムに関するワードが出てきます。 AMD, CommonJS, ES6, ES5, Webpack, Babel, RequireJS, UMD, SystemJS, System.register, module target etc... これらの用語の関係は複雑で混乱しがちな部分です。 この記事は、1つで全てを理解できる決定版を目指して記述しています。 少々長くなりますが、なんども振り返るノートとして利用していただければと思います。 では本題に入ります。 JavaScriptのModuleとは JavaScriptの新しい仕様ECMAScript2015(E
こんにちは、ともです。 この記事ではES6からの構文であるimportについて理解をまとめたいと思います。 ES5の知識すらほぼ無かった状態でVue.jsをやってしまった僕は何となく動くものは作れるけど深くは理解できないという感覚でした。このような方は多いのではないでしょうか。 その状態から脱却するためにimportについて勉強していきます。 外部ファイルのクラスの読み込み アプリケーションが大きくなるとモジュール毎に機能を管理していく必要があります。 そのようなモジュールを読み込むためにimportを利用します。PHPであればrequireという構文があります。 他のファイルに記述されたクラスを読み込む際にimportを利用します。 ファイルを準備 モジュールとしてMemberクラスを『./lib/Util.js』に定義しました。 // ./lib/Util.js const AUTHO
これからJavaScriptを学習するならES2015(ES6)に基づいたコーディングをしたほうがいい項目をピックアップしました。 はじめに JavaScriptはNetscapeによって開発され、当時、業務提携していたSun MicrosystemsのJavaが注目されていたので名前がJavaScriptとなりました。 主にNetscapeが設立したMozillaが仕様を策定し、Ecma InternationalによってECMAScriptとして標準化されています。 そのため、仕様の版(edition)はECMAScript 5th editionなどの番号が付きます。 2015年に公開されたECMAScript 6th edition(ES6)から「ECMAScript 2015」と年号が付くようになって毎年改訂されています。 このECMAScript 2015(ES2015)ではダ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モダンフロント開発に必須の知識(ES2015~ES2023まとめ + 高階関数) - Qiita
「ぷよぷよ」のプログラミング教材、セガが無料提供 “ぷよ”の移動や色指定でゲーム制作体験
僕は、なぜ絵文字の長さが、直感に反するのか理解したい...!! - Qiita
【JavaScript・export・import】モジュールについて理解をまとめる｜とものブログ
JavaScriptの仕様ES5以前とES2015(ES6)以降の違いの抑えるべき項目