jQueryへの別れ：現代的な開発のための必須JavaScriptメソッド - Qiita

2023/06/21 328 users jQuery Qiita タスク 制約 スタイリング

jQueryは依然として有用ですが、制約もあります。2015年にリリースされたES6のブラウザサポートは、96%以上という高いレベルに達しており、要素の選択、スタイリング、アニメーション、データの取得といった基本的なタスクにおいて、jQueryからの移行を考える時期となっています。 以下は、バニラJavaScriptにおけるいく... 続きを読む

Reactを開発するために知っておくべきES2015(ES6)超入門 - Qiita

2023/03/08 12 users Qiita React 見解 パッケージ ES2015

前提 ES2015の全機能ではありません。 Reactを学ぶために知っておくべきWeb開発の知識とES2015の一部機能をできるだけわかりやすくまとめました。 (個人的見解も多くあるのでご留意ください) Web開発知識 利用するWeb開発ツールのまとめ パッケージマネージャー パッケージをインストールする際に開発者がそれぞれのPCに... 続きを読む

jQuery使いのエンジニアがReactとNext.jsでWebサイト制作するために最低限押さえておきたいコード（基礎編）

2023/01/23 357 users jQuery React Svelte Vue 構文

なぜ書いたか 筆者もWebサイト制作をそこそこ長くやってきておりいまは業務でVueを書いたりちょっとReactを書いたりSvelteを書いたりしていますが、2年前くらいまではReactやES6の構文すら書いたことがありませんでした。 WordPressでのサイト制作が多く、機能が少ないサイト制作会社ではjQueryで充分なことも多く、恥ず... 続きを読む

JavaScriptの次の仕様ES2022の新機能まとめ - ICS MEDIA

2022/06/10 148 users 新機能まとめ - ICS MEDIA 年次 ES2022

JavaScriptの仕様であるECMAScriptはEcma Internationalによって定められています。ECMAScript 2015（ES6）の登場以降は、ECMAScript 2016、ECMAScript 2017･･･と、年次で仕様が更新されています。最新のECMAScript 2022（ES2022）は今月6月22日のEcma InternationalのGA 123rd meetingにて承認される見込みです。 ES202... 続きを読む

MatzにrejectされたES6風HashリテラルをこっそりRubyで使う

2020/10/12 10 users ABC Matz Ruby ES2015 省略記法

ES6風Hashリテラルとは ここで言う「ES6風Hashリテラル」というのは、ES6(ES2015)でobject property shorthandとして導入された省略記法です。 a = 42 b = "abc" c = {a, b} pp c #=> {:a=>42, :b=>"abc"} 最近のJavaScriptを使っている人なら見慣れた記法ですね。Rubyでもこういう風に書けると便利そう、と思う人はもち... 続きを読む

TypeScript Deep DiveでTypeScriptに入門する ｜ DevelopersIO

2019/10/02 64 users jsx React TypeScript node.js

TypeScript Deep Dive とは TypeScript Deep Diveとは、TypeScriptはもちろん、JavaScript（ES6）/ サーバーサイドJavaScript（Node.js）/ Reactなどで使うJSX など、TypeScript周辺技術を包括的に学ぶことができるTypeScriptの入門サイトです。 TypeScript Deep Dive TypeScript Deep Dive 日本語版 GitHub TypeScript ... 続きを読む

新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(git/node.js/ES6/webpack4/babel7) - Qiita

2018/11/13 689 users Git Qiita 反面 node.js ドヤ顔

新人にドヤ顔で説明できるか、今風フロントエンド開発ハンズオン(git/node.js/ES6/webpack4/babel7) 概要 今風の手法でJavascriptアプリを作ろうとすると色々ツールがあって便利な反面、複雑でわからないことがたくさんあります。 わからないことがあったら、それを放置せず、しっかり理解して大いに寄り道しつつブラウ... 続きを読む

Before Gutenberg - WPerが知っておくべきES6とReactのこと - Capital P

2018/09/28 20 users React Gutenberg jQuery jsx 概念

この連載ではGutenbergがリリースされる前にやっておくべきことをまとめているのだが、Gutenbergがもたらしたもっとも大きな変更点として、Reactの導入がある。これにより、次の新しい要素が導入される。 ES6/ES Next React + JSX さて、以上の概念について慣れ親しんでいる人は特に驚きはないだろうが、これまでjQuery... 続きを読む

Vim script で ES6 Promise 実装した - はやくプログラムになりたい

2017/12/18 65 users Vim script Promise プログラム 実装 最後

2017 - 12 - 19 Vim script で ES6 Promise 実装した Vim Vim Advent Calendar 2017 の19日目の記事です． Vim script で ES6 の Promise を実装した話を書きます． もし Vim script が分からなくても，最後の章「Promise の実装の詳細」は Vim script とは独立した内容になっているので，P... 続きを読む

ES6始めたいけど開発環境作るのがめんどくさいと思っている方のためにざっくりテンプレート作ってみました | ichimaruni-design

2017/10/06 30 users ichimaruni-design Webpack 敷居

2017年10月6日 WEB制作 ES6始めたいけど開発環境作るのがめんどくさいと思っている方のためにざっくりテンプレート作ってみました 仕事ではReactのサービスに携わっているのでES6には慣れているのですが、いざ自宅などでES6で書きたいときとかbabelとかwebpackやらやらないとならず気軽にやろうかなとはなりにくい印象でした。特に初めてES6触る人には。なので少しでも敷居が低く慣れれ... 続きを読む

Vue.jsの流行とネイティブアプリフレームワークWeex、そして台頭する中国語コミュニティについて - 株式会社クイックのWebサービス開発blog

2017/03/04 54 users YARN Webpack Vue.js Babel 流行

2017 - 01 - 23 Vue.jsの流行とネイティブアプリフレームワークWeex、そして台頭する中国語コミュニティについて こんにちは。五所です。 最近は時代についていこうと、フロントエンドの情報収集をしています。 React, Redux, AngularJS, ES6, Webpack, Gulp, Babel, Yarn... 情報収集すればするほど、頭がいっぱいになるのですが、その... 続きを読む

2016年、サーバーサイドエンジニアがゼロからReact/Reduxを学習したときの方法を振り返る | BLOG | 株式会社スタジオ・アルカナ

2016/12/12 698 users redux React Babel サーバーサイドエンジニア

こんにちは。スタジオ・アルカナのサーバーサイドエンジニアなっちゃんです。 この記事は React Advent Calendar 2016 の13日目の記事です。 それは2016年も後半へ差し掛かったある日のことでした… 上司「次の案件、この辺の技術使うから軽く勉強しておいてー」 つ React.js + Redux.js + redux-saga + Cordova + ES6 + Babel ... 続きを読む

Rails 5.1で標準となるSprockets 4について - Qiita

2016/12/03 29 users Qiita ECMAScript6 フロントエンド周り 同梱

はじめに Sprockets 4の概要 来年リリースされる予定のRuby on Rails 5.1にはフロントエンド周りに関する多くの変更が予定されていますが、同梱されるSprockets 4にも大きな機能追加と変更が行われています。 Sprockets 4は、以下のような新しい機能を持っています。 ソースマップ マニフェストファイル BabelによるES6 (ECMAScript6/ES2015... 続きを読む

Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など | コリス

2016/11/15 556 users コリス Flexbox セレクタ コーディング CSS

CSS3のFlexboxをはじめ、CSSアニメーション、CSSのセレクタ、jQuery3, ES6, Bootstrap4など、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。 ブックマークし ...記事の続きを読む 続きを読む

ES6時代のコーディングスタイルを考える - Qiita

2016/09/18 80 users コーディングスタイル const Qiita ジェネレータ

ここではコーディングスタイルを考える上で、ES6（ECMAScript2015)の以下の特徴に注目して考察するものです。 変数宣言は、 const を基本とする クラス宣言文や関数宣言文はブロックスコープ 文字列では、テンプレートリテラルを活用する ジェネレータのために、複数の構文が拡張された また、以下の基準を採用していることを特に触れておきます。 ES5コードの混在、ES5時代のスタイルとの互... 続きを読む

BabelでES6で書いて、webpackでビルドして、mochaでテスト書いて、power-assertでassertの出力を見やすくして、karmaで複数ブラウザのテストを自動化して、カバレッジを出力するようにした - UUUM攻殻

2016/09/16 100 users Karma Webpack assert Babel uuum

2016 - 09 - 16 BabelでES6で書いて、webpackでビルドして、mochaでテスト書いて、power-assertでassertの出力を見やすくして、karmaで複数ブラウザのテストを自動化して、カバレッジを出力するようにした おはこんばんちは!! 尾藤 a.k.a. BTOです。 UUUMでは業務の効率改善に kintone を導入しようとしているのですが、kintone ... 続きを読む

ES2015で始めるJavaScript入門 - Qiita

2016/09/08 284 users Qiita ECMAscript サーバサイド ナンバリング

JavaScriptとは Webブラウザで実行可能なインタプリタ言語 最近ではサーバサイドのものもある(Node.jsなど) 各ブラウザで独自の実装があるが、標準化されたECMAScriptに準拠している ES5, ES2015(ES6), ES2016, … ES2015からは毎年新しい規格が策定される これによりナンバリングは策定した年に変更 ES5(2011年策定)から4年ぶりに策定されたE... 続きを読む

生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず… | プログラミング | POSTD

2016/03/31 313 users Webpack Flux react-router jsx

React.jsが騒ぎを起こしているのはご存知の通りです。しかし、調査に数時間を費やした挙句、あまりに多くの用語に圧倒されただけで終わっていないでしょうか。JSX、flux、ES6、webpack、react-routerが使える今、他に必要なのはReactの使い方を説明してくれる人だけです。免責事項：　私はJSX、Flux、 ES6 、そして webpack を非常に気に入っています。これらのツ... 続きを読む

SCRIPTY#4　〜フロントエンド紳士・淑女のための勉強会〜 #scripty04 - Yahoo! JAPAN Tech Blog

2016/01/08 37 users 淑女 redux React Event Yahoo

先日、定期的に開催しているフロントエンド技術に関する勉強会、SCRIPTYをヤフーで開催しました。 http://scripty.connpass.com/event/22663/ 本勉強会で発表されたセッションのスライドを発表者のコメントとともに公開いたします！　 発表セッションまとめ 1.Single-page application Zero to One （React/Redux/ES6/... 続きを読む

JSをbrowserifyでビルドし、ライセンスコメントを適切に残す - $shibayu36->blog;

2016/01/06 99 users browserify npm TypeScript tech

2016 - 01 - 06 JSをbrowserifyでビルドし、ライセンスコメントを適切に残す tech 最近JSを利用するときは、依存モジュールはnpmを利用し、ES6やTypeScriptの仕様を開発には使った上で、ブラウザ用に コンパイル して配信するようになってきている。また同時にネットワークの負荷を下げるためにminifyを行う場合もある。 minifyはライセンスが絡むと少し難しい... 続きを読む

2015-11-23のJS: JSDoc 3.4.0、Grunt/Bowerの今後、JavaScriptトレンド - JSer.info

2015/11/24 17 users BOWER Grunt modules JSDoc jsx

JSer.info #254 - JSDoc 3.4.0がリリースされました。 jsdoc/CHANGES.md at 3.4.0 · jsdoc3/jsdoc パーサーにEspreeを使うことでES6やJSXのコードをパース出来るようになりました。 それに加えてまだ完全ではありませんが、ES6 Classesやmodulesに関するサポートが追加されています。 Use JSDoc: ES 201... 続きを読む

JavaScript - ES6のconstを使い倒すレシピ2 - Object.freeze編 〜 JSおくのほそ道 #035 - Qiita

2015/11/23 29 users const Qiita JSおく 変数 配列

こんにちは、ほそ道です。 前回のconst前提共有編に続いて、今回から「どうやって予期しない値の状態変化を抑止するか」をやっていきます。 前回、constで宣言した変数は再代入ができないが、オブジェクトや配列などの子属性/要素が不意に変更されてしまう可能性をはらんでいる、という話をいれました。 今回はその対策の一つとして値を一切変更させない(凍結)手段についてやっていきます。 前提共有編 全体の目... 続きを読む

ES6のモジュールを解説してみた - uehaj's blog

2015/11/06 142 users モジュール uehaj's blog export

2015-11-07 ES6のモジュールを解説してみた js es6 javascript ECMAScript import export package module Tweet Share on Tumblr はじめに 予備知識 JSにおいてモジュールとは何か・何だったか ES6においてモジュールとは何か exportとimport モジュール利用の流れ export編 1. named e... 続きを読む

橋本商会 » coffeeからES6(babel)に少しずつ書き換える

2015/11/04 54 users Babel coffee Flux 橋本商会 shokai

coffee-scriptで書いていたwebアプリをES6(babel)に書きなおした。 全部を一気に書き直してハイ動いたーとやるのは無理なので、coffeeとES6のファイルが混在しても動かせるようにして、少しずつ書き直した。 書き直したのはこれ React+Fluxxor+socket.ioでfluxなチャットを作った https://github.com/shokai/node-flux-b... 続きを読む

karma+mocha+power-assertでDOM操作を含むユニットテストをES6で書く | WebDesign Dackel

2015/11/02 71 users ユニットテスト Pow DOM操作 QUnit モジュール

テスト周りは以前にmocha+chai、QUnitを少し触った程度であまり詳しくなく、少しずつ慣れていかなきゃなぁと感じていました。 そこで今回は簡単なモジュールを、コード本体とテストコードの両方をES6で書いてみました。 タイトルにもありますが、主要なライブラリは以下を使っていきます。 karma 0.13.14 : テストランナー mocha 2.3.3 : テスティングフレームワーク pow... 続きを読む