10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
HaskellなAltJS達をいじってみる - アドファイブ日記（ミラー版）
Haskell Advent Calender 2013 12/5日当番記事です。 CoffeeScriptとかHaxeとかTypeScriptみたいなJavascriptにトランスレートして使う言語たちをAltJSっていうそうです。HaskellコードをJSに変換するプログラムもいくつかあって、このページに一覧があって詳しい。そこに掲載されてるFayとHasteを触ってみます。他にUHCやGHCJSというのもありますが試したら弱冠インストールでハマったのでそれらは機会あればまた。 そいつらを上手く使えば、サーバサイトはYesodまたはScotty、クライアントサイドはHaskellなAltJSを使ってオールハスケルなWeb開発が（マークアップをHaskellでやるやつとかもありますね）可能になります。ちなみにScottyのTipsを以前少し書いたので以下もあわせてどうぞ。 Scottyで
Underscore.js
v1.13.7 CDN URLs (Use with <script src="..."></script>) https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js https://cdn.jsdelivr.net/npm/[email protected]/underscore-esm-min.js https://unpkg.com/[email protected]/underscore-umd-min.js https://unpkg.com/[email protected]/underscore-esm-min.js https://pagecdn.io/lib/underscore/1.13.7/underscore-umd-min.js https://pagecdn.io/lib/unde
気になる！夢がある！JavaScript.next (ECMAScript6) (1) – ES6の基礎知識/関数のアロー記法/let/const/分割代入など
白石 俊平 es6 ECMAScript, javascript 0 Comment 昨日（2013/1/17）、Web先端技術味見部#15でECMAScript6について学んできました（参加者によるツイート）。一応主催者という立場上、勉強会を円滑に進めるため、事前に割と下調べして勉強会に臨んだわけですが、せっかくなので、その成果をまとめて公開しておきたいと思います。 とは言え、量が非常に多いので、複数回に分けての掲載です。 ECMAScript6の基礎知識 仕様に関するあれこれ ECMAScriptとは、ご存じの方も多いと思いますが、JavaScriptの公式な仕様です。ECMAScriptが仕様、JavaScriptが実装に当たるわけですね。 ECMAScriptのメンテナンスはTC39という部会によって行われており、最新バージョンである6は、現在絶賛仕様策定中です。コードネームは「
JavaScriptとコールバック地獄 - Yahoo! JAPAN Tech Blog
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。JavaScriptでサンプルコードを書く機会があったので、どんなインターフェースで提供するのが便利なのか考えてみました。よく問題になるコールバックのネスト問題について、一般的な話をまとめてみます。 お題 突然ですが、次のような処理を行う必要があるとします。 「0」を出力する 1秒待つ 「1」を出力する 1秒待つ 「2」を出力する これをプログラムで書くとどうなるでしょうか？ シェルスクリプトの場合（同期） たとえばシェルスクリプトで素直に書くと、次のようになります。
詳細 ECMA-262-3 第7章2節 OOP: ECMAScript での実装 - mixi engineer blog
こんにちは。大形尚弘です。 さて、ついに OOP の話も ECMAScript の実装に移ります。乗りに乗った Dmitry 先生が、前節を越えるボリュームを持って、日本全国30人（はてなブックマークの平均による導出）の ECMAScript ファンの皆さんに襲いかかります。 正直に言って、私はもう10年以上 JScript 、 JavaScript 、 ActionScript に関わってきましたが、プロトタイプの話は、内部 Prototype プロパティが「どういうわけか」コンストラクタ関数の prototype プロパティと同じ呼び名を与えられていることを発端として、常に混乱を伴ってきました。一度理解したつもりでも、すぐに忘れてしまい、わけが分からなくなってしまうのです。 それはどういうことかというと、一度もしっかり理解していなかったからです。 この節を読めば、それが理解できます。お
JSDeferred cho45.stfuawsc.com
Overview JSDeferred is standalone and compact asynchronous library. Asynchronous codes are very confusing because it is a storm of callbacks. JSDeferred improve the readability of asynchronous codes by providing one object and some functions. next(function () { alert('Hello,'); return wait(3); }). next(function (r) { alert('World!'); }); "Standalone and Compact" means JSDeferred is very portable s
CodeMirror
Extensible Code Editor CodeMirror is a code editor component for the web. It can be used in websites to implement a text input field with support for many editing features, and has a rich programming interface to allow further extension. This is a CodeMirror field, configured for editing JavaScript code. Features Accessibility Works well with screen readers and keyboard-only users. Mobile Support
実装して理解する遅延評価の仕組み 〜 thunkを絵に描いて理解しよう・JavaScriptでHaskellを実装！？ - プログラムモグモグ
この記事では, Haskellに用いられる「遅延評価」の仕組みを, 図に描いて説明します. 更に, 遅延評価版のフィボナッチ数の無限列を, JavaScriptで実装します. 遅延評価とはどのように動くのか, 考えて行きましょう. HaskellのコードとJavaScriptのコードの比較 Haskellでの x = y y = 10 と, JavaScriptの var x = y; var y = 10; というコードを考えてください. Haskellのコードは, これだけでは何も起こりません. print xとすると, x = y = 10 となって 10 が表示されます. 一方, JavaScriptのコードは var x = y; を評価した瞬間, ｢ReferenceError: y is not defined｣というエラーが出ます. 更に, main = let x = 1
JavaScriptの業務スキルレベル 判別表 （５段階） - 主に言語とシステム開発に関して
スキルチェックの目次へ JavaScript の簡易スキルチェックのための調査表。印刷用。 レベルは，０から４までの５段階。 （０） 非 JavaScript開発者 （１） 初学者（入門書を学習してゆく段階） （２） ノーマル（基礎的な知識があり，ある程度の動くものを作れるようになった段階） （３） 中級者（開発プロジェクトで１人月としてカウントできる水準） （４） 上級者（メインPG/メンターとして，主設計を任せられる水準） Webアプリのプロジェクト開始時に作業振り分けをするにあたって，新規メンバ全員にこれを渡して回答してもらうという用途を想定。 ※なお，下記URLでは10段階に細かく分ける方法が公開されているが，それだと細かすぎてレベルが前後する可能性があり，業務上のスキルチェックは難しいかもしれない。 javascriptプログラマのレベル10 http://tech.kayac.
JSX / Haxe / TypeScript
前回の勉強会の内容が、C言語のハック的内容で、あまり役に立たないものだったので、今回は、C言語の基本に立ち返った内容にしました。 C言語のマナーとか書いているので、学校でC言語をやったよ、という人は、見ると得るものがあるかもしれません。 最後のほうには、オマケの内容も付けています。
さあ、Yコンビネータ(不動点演算子)を使おう！ - よくわかりません
前回、おとうさんにもわかるYコンビネータ！(絵解き解説編) - よくわかりませんというエントリで、Yコンビネータ(不動点演算子)と再帰の絵解き解説をしました。 Yコンビネータ自身は、結局のところ再帰を産み出してくれるだけです。関数(正確にはλという単純な文字列変換ルール)だけで出来て、プログラミングに関するいろんな原理の研究を可能にするのが凄い訳です。その辺のさわりを、きしださんが解説されています。しかし、単なる再帰なら、実際のプログラミングではYコンビネータなんて使わなくても出来ます。 じゃあ、Yコンビネータとか不動点とかは、偉い学者さんとかが研究に使えばいいもので、普通のプログラマには何の意味もないモノなのでしょうか？ というわけで、今回はポジティブに、Yコンビネータや不動点で出てくる考え方を、理論だけじゃなく、実際のプログラミングに応用する例を見てみましょう。 今回、プログラムの例を
Asynchronous programming and continuation-passing style in JavaScript
Asynchronous programming and continuation-passing style in JavaScript In this blog post, we give a name to JavaScript’s callback-based asynchronous programming style: continuation-passing style (CPS). We explain how CPS works and give tips for using it. Asynchronous programming and callbacks If you have ever done asynchronous programming in JavaScript, you probably noticed that everything works di
JSX - a faster, safer, easier JavaScript
JSX is a statically-typed, object-oriented programming language designed to run on modern web browsers. Being developed at DeNA as a research project, the language has following characteristics. faster JSX performs optimization while compiling the source code to JavaScript. The generated code runs faster than an equivalent code written directly in JavaScript. The gain may vary, but even the optimi
圧縮後のJavaScriptやコンパイル後のCoffeeScriptでも、ブラウザ上で元のソースを参照できる新技術「Source Maps」登場
圧縮後のJavaScriptやコンパイル後のCoffeeScriptでも、ブラウザ上で元のソースを参照できる新技術「Source Maps」登場 JavaScriptをデプロイする際には、できるだけ小さくするために余計なスペースや改行を取り除き、さらに関数名なども変換して圧縮することがあります。しかし圧縮後のJavaScriptにバグが見つかるとそのままではデバッグしにくいため、いちいち元のソースコードに戻してデバッグしなければなりません。 Webサイト「HTML5 Rocks」の記事「INTRODUCTION TO JAVASCRIPT SOURCE MAPS」で紹介されたWebブラウザの新技術「Source Maps」は、圧縮状態のコードを実行していても元のソースコードを参照しながらデバッグできるだけでなく、CoffeeScriptのようなJavaScriptへ変換する言語であっても、
AjaxZip 2.0
Kawa.netxp AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版） AjaxZip2は、昨年公開した 『ajaxな住所入力フォーム』 の新バージョンです。 郵便番号を入力すると、該当する都道府県名・住所が自動的に入力されます。 Ajaxと JSON フォーマットを利用するJavaScriptライブラリとして公開しました。 JavaScript のみで稼動するため、サーバサイドで稼動するCGIプログラムは不要です。 郵便番号→住所変換処理は全てクライアントサイドのJavaScriptで行います。 既存 HTML の住所入力フォームをたった3行書き換えるだけで利用できます。 簡単に設置できるため、プログラムに詳しくない方でも導入していただけると思います。 以下の住所入力フォームに、7桁の郵便番号を入力してみてください。 【2007/12/09 追記】 jQ
enchant.js - A simple JavaScript framework for creating games and apps.
enchant.js is … カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワークです。 2011年に公開され、すでに 1,000 本以上のゲーム/アプリが公開されています。 オープンソース (MITライセンス) で、無料で利用できます。 ドキュメント・書籍・チュートリアルサイトが充実しています。 たくさんのプラグインで機能を拡張できます。 UEI/ARC を中心としたメンバによって開発・メンテナンスされています。 プログラミング教育のためにも利用されています。 Features オブジェクト指向: 表示されているものはすべてオブジェクトです。 マルチプラットフォーム: iOS, Android, Mac, Windows のブラウザで動作します。 Windows 8: Windows 8 対応のHTML5アプリケーションを開発できます イベント駆動
Google の新言語「Dart」は新しい JavaScript か？ - WebOS Goodies
Google が開発しているという新言語「Dart」を覚えていますでしょうか。来月の GOTO Aarhus 2011 Conference にて発表があるということで数日間は話題に登ったものの、その後は続報もなく忘れ去られているようです。 実はこの Dart に関連して、 2010 年 10 月に書かれた Google の内部文書 (?) が注目されています。その中では、 JavaScript の次期版である Harmony と平行して新たな言語「Dash」を開発することが示唆されており、それが来月発表される Dart の正体ではないかと言われています。また、 Google が新言語の開発を決断した理由や今後のオプション、そして僅かながら関連するプロジェクトについてなども語られており、なかなか興味深い内容です。 そこで、本日はこの文書のハイライトをご紹介したいと思います。いつもながら翻訳
Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin : 404 Blog Not Found
2010年08月17日06:45 カテゴリLightweight Languages Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin もうそろそろJSONPとはお別れできるのではないかと思い立ったので。 XMLHttpRequestとその問題 AjaxといえばXHRの愛称で親しまれているXMLHttpRequestですが、これには一つ重大な欠点がありました。 これを発行するDHTMLページのドメインが、Request先のドメインと一致する必要があったのです。いわゆる Same Origin Policy というやつです。おかげでサイトをまたがって使えなかったのです。これではマッシュアップできない。どうしよう。 JSONPとその問題 そこで生まれたのが、JSONPという手法です。 これは、scriptノードを追加した時に、単
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to loop through a plain JavaScript object with the objects as members