イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
JavaScriptの末尾呼び出し最適化（TCO） - 30歳からのプログラミング
JavaScriptには、再帰が実装されている。 再帰とは、関数のなかでその関数自身を呼び出すこと。 下記のrecursion()では、再帰を行っている。 function recursion(num, limit){ console.log(num); if(num === limit){ return; }; num++; recursion(num, limit); }; recursion(0, 10);を実行すると、0から10の数字が順番に表示される。 仮引数numがlimitに到達するまでrecursion()は呼ばれ続ける。 だが、limitの数を大きくすると、途中でエラーになりプログラムが終了してしまう。 function recursion(num, limit){ console.log(num); if(num === limit){ return; }; num++
TypeScript の型定義ファイルと仲良くなろう - Hatena Developer Blog
この記事は2016年に書かれた古い記事です。当時はまだTypeScript2.0も出ていないころで今とは状況がかなり異なっています。参考にする場合注意してください。 はじめに TypeScriptの型システム Declaration space Open-ended ここまでの確認 型定義ファイルを読み書きできるようになるために declare キーワード 既存のオブジェクトの型定義を拡張する グローバルなオブジェクトに対する宣言 module Export Assignments Relative or Non-relative module imports ES2015形式 実際の定義ファイル 既存の定義ファイルを拡張する declare global { } について Typings について おわりに インターン募集中 はじめに こんにちはアプリケーションエンジニアの id:t_k
フロントエンドへの複雑化について、一つの視点 - mizchi's blog
これらの件 最近のフロントエンドへの違和感 - nobkzのブログ 日本のWebエンジニアの大半が、変化に対応しきれなくなっている件について。 - 日々、とんは語る。 前提 去年は勝手Reactエヴェンジェリスト(自称)として、日本に複雑化するフロントエンド技術の海外の動静を紹介をし続けていた。 僕としても、フロントエンドは複雑化してると思ってるし、それは「目的の複雑化に対して必要なもの」だったと思っている。ここでいう目的とはSPAの構築であって、普通のウェブサイトは含んでいなかったが、普通のウェブサイトも当たり前のようにリッチ化目指しているのが現在なので、境目は曖昧ではある。 僕もフロントエンドの複雑化がだれにでも必要なものだとは思っていない。が、定期的に情勢を整理して、交通整理するのを心がけてきたし、春からはじめるモダンJavaScript / ES2015 - Qiita みたいな記
Node.js ES2015/ES6, ES2016 and ES2017 support
"use strict"; function f(n){ if (n <= 0) { return "foo"; } return g(n - 1); } function g(n){ if (n <= 0) { return "bar"; } return f(n - 1); } return f(1e6) === "foo" && f(1e6+1) === "bar";
ES6 チートシート | POSTD
日々の仕事の中で役に立つES2015（ES6）のティップス、コツ、ベストプラクティス、プログラムの見本をご紹介します。コントリビューション歓迎です！ 目次 var vs. let / const IIFEからブロックベースへ アロー関数 文字列 デストラクチャリング モジュール パラメータ クラス シンボル マップ WeakMaps Promises ジェネレータ Async/Await var vs. let / const var の他に、値を格納する let と const という識別子が新たに追加されました。 var とは異なって、 let と const はクロージャのスコープ内で最初に記述されることはありません。 var の使用例です。 var snack = 'Meow Mix'; function getFood(food) { if (food) { var snack
Exploring Real Time Apps with VueJS, ES2015 and Webpack | Pusher blog
Exploring Real Time Apps with VueJS, ES2015 and Webpack Vue.js is a framework for building web applications using a component based approach. It focuses primarily on the “View” layer of the traditional MVC and in that sense is much more akin to ReactJS than a larger framework like Angular or Ember. If you’re keen for code, the app we’ll build is on GitHub for you to check out and hack with. We’ve
karma + babel + browserify + isparta を使って、es2015 で書いたフロントエンドテストのカバレッジを出す設定 - Qiita
karma + babel + browserify + isparta を使って、es2015 で書いたフロントエンドテストのカバレッジを出す設定JavaScriptTDDkarmacoveragebabel こちらの記事も合わせて参考にしてください。 - karma + babel + istanbul でフロントエンドのカバレッジを出す設定 2016年版 フロントエンドで es2015 かつ browserify でバンドルしつつ書きたいという需要はそこそこ高まっているんじゃないかと思いますが、そのセッティングで開発した場合に、テストカバレッジってどうやって出したらいいの？という情報があまり出回っていない気がしたので、自分なりにミニマルだと思う設定の例をまとめてみました。 なお、この記事では、テストランナーには、karma、バンドラには browserify を使う前提で書いています
React with Babel Cheatsheet - James K Nelson
One of my favourite blog posts on the internet is Steven Luscher‘s guest post on the Babel blog, React on ES6+. It manages to be both incredibly helpful and easy to understand, while being short enough that when you hit the end you’re like “wait, is that it?”. And as it happens, one of the most frequent requests I get is for an updated version of my React cheatsheet, showing the newer React compon
How to Learn ES6
We ran a survey at about the time the standard became official in June 2015 to see how many people were using ES6. Nearly half of respondents already were. Because of the availability of transpilers and polyfills, the world adopted ES6 much faster than previous enhancements to the language specification. ES6 includes lots of great enhancements that will make you & your team more effective. If you
RisingStack Engineering Blog - RisingStack Engineering
We’re a full-stack software development agency focusing on JavaScript, DevOps, Microservices & Kubernetes. For more info visit risingstack.com, or feel free to contact us!
material-fluxというFluxライブラリをREADME駆動で開発した
material-fluxというFluxアーキテクチャの実装ライブラリを書きました。 Fluxって何?と思う人は以下などを見ると良さそうな気がします。 React: Flux Architecture - Video Tutorial Series @eggheadio Fluxとはなんだったのか + misc at 2014 - snyk_s log Fluxアーキテクチャの覚え書きを書いた - snyk_s log The Flux Quick Start Guide Getting To Know Flux, the React.js Architecture ♥ Scotch What the Flux? (On Flux, DDD, and CQRS) — Jack Hsu なぜ作ったか IDE readable(machine readable)なライブラリが欲しかったのがひと
手軽にes6を試す環境も作っておきたいと思った - podhmo's diary
はじめに es6を試す環境もほしい。(今回はes2015とか細かい事は気にしない) とりあえず以下の様なことができてほしい es6で作成したコード片のtranspileの結果を手軽に確認できる es6で作成したコード片の実行が手軽にできる ブラウザから試せるrepl 以下のようなブラウザから試せるreplもある Babel repl es6console/ まぁ、今回は手元の環境で試せるようにしたい 手元の環境でes6を試す es6で作成したコード片のtranspileの結果を手軽に確認できる とりあえずes6のコードを書いてそれをcommonjsに変換する事ができるようにする。 色々細かく分かれているので以下を参考にしてほしいものを見繕うと良い。 https://babeljs.io/docs/plugins/#presets setup npm install babel-cli ba
reactjs - Higher-Order Componetを使ってES6 Class記法でmixinっぽいことをする - Qiita
v0.13からのES6 Class記法でmixinが使えない問題を解決する方法としてHigher-Order Componentsという方法がある。 Mixins Are Dead. Long Live Composition — Medium Gunosy React Meetupのkoba04さんのLTで紹介されていたのを今更調べたのでまとめる。 mixinのおさらい FluxフレームワークでよくあるStoreとComponentをひもづけるためのMixinの例。 // FluxフレームワークでよくあるStoreとComponentをひもづけるためのMixin function StoreMixin(...stores) { var Mixin = { getInitialState() { // getStateFromStoresはComponent側に定義する return th
React.js の 公式Tutorial を gulp を利用して簡単に実行できる環境を作って、ES6も試した - Qiita
React.js の 公式Tutorial を gulp を利用して簡単に実行できる環境を作って、ES6も試したJavaScriptReactbabel 前回 QiitaにReact.js をgulp で Babel + Browserify を利用して動作させるシンプルな環境を作ったで guip を利用した React.js を試す環境を作成しました。 次に React.js の 公式Tutorial をやってみようかと思ったのですが、公式Tutorial 中で Ajax を利用したサーバー環境を動作させる必要があり、ちょっと大変な感じがしたので、今回 React.js の 公式Tutorial を簡単に実行できる環境を gulp で作成しました。この環境を使えば、Ajax のサーバー環境まで含んでいるので、ダウンロードして、いくつかコマンドを実行するだけで、すぐに学習を始めることが可能
React v0.13.0 Beta 1 – React Blog
This blog site has been archived. Go to react.dev/blog to see the recent posts. React 0.13 has a lot of nice features but there is one particular feature that I’m really excited about. I couldn’t wait for React.js Conf to start tomorrow morning. Maybe you’re like me and staying up late excited about the conference, or maybe you weren’t one of the lucky ones to get a ticket. Either way I figured I’
Refactoring React Components to ES6 Classes
Here at NMC, we're big fans of the React library for building user interfaces in JavaScript. We've also been experimenting with the next version of JavaScript, ES6, and were excited to see the latest version of React promote ES6 functionality. Starting with React 0.13, defining components using ES6 classes is encouraged. Refactoring a React 0.12 component defined using `createClass` to an 0.13 and
ESDoc - The Good Documentation For JavaScript - クックパッド開発者ブログ
こんにちは。会員事業部の丸山@h13i32maruです*1。 ソフトウェアのドキュメント(マニュアル)を書くには色々なツールや方法があります。 JavaScriptの場合はJSDocというドキュメンテーションツールがデファクトスタンダードです。 ですが、JavaScriptの最新仕様であるECMAScript2015(ES2015)がリリースされたことにより、 JSDocの競合として新しいツールが登場したり、JSDoc自体もバージョンアップしたりしています。 本記事ではそうした新しいツールの一つであるESDocを紹介します。 ESDocとは？ ESDocとは私が2015年4月から開発を行っている、JavaScript(ES2015)向けの良いドキュメントを作るためのドキュメンテーションツールです。 https://esdoc.org/ https://github.com/esdoc/es
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ReactのチュートリアルをES6で書いてwebpackとESLintも使ってみる - Qiita
Loading...
