step by stepで始めるwebpack - Qiita
※webpack1系の記事です。 1→2への移行ガイドを見る限り破壊的な変更点はそんなにありませんが、preLoadersやpostLoadersがなくなっていたり、差が出ていますのでご注意ください。 https://webpack.js.org/guides/migrating/ webpackを手を動かしつつ学べる初学者向け資料を作成しました。 公式のチュートリアルもあるのですが、webpackが使用されているOSSのボイラープレートを見る限り、世の中の使われ方に沿ってないかも？と思い書きました。 これから始める人の手助けになれば幸いです。 また最終形のソースをupしてあるので詰まったら見てください。 webpackとは webpack で始めるイマドキのフロントエンド開発の説明が良かったので引用させていただきます。m(_ _)m webpack は WebApp に必要なリソースの依
AsyncとAwait : コールバック地獄を避けるための最新のやり方、そしてその未来 | POSTD
(2016/7/7、いただいたフィードバックを元に記事を修正いたしました。) JavaScript、特にNode.jsといえば、 コールバック地獄 がよく連想されます ^(1) 。たくさんの非同期I/Oを扱うコードを書いたことがある方には、おそらく以下のようなパターンはおなじみでしょう。 export default function getLikes () { getUsers((err, users) => { if (err) return fn(err); filterUsersWithFriends((err, usersWithFriends) => { if (err) return fn(err); getUsersLikes(usersWithFriends, (err, likes) => { if (err) return fn (err); fn(null, lik
最近はJavaScriptにJavaが書けるらしい（JavaPoly.js） - Qiita
JavaScriptをJavaで書けてjarファイルのライブラリも読み込める、JavaPoly.jsというのがあったので、試してみました。 基本公式の写経です。 公式サイト 試してみる とりあえず一旦公式に乗っかってHelloWorldしてみます。 htmlファイルはこんな感じになります。 <!-- Include the Polyfill --> <script src="https://www.javapoly.com/javapoly.js"></script> <!-- Write your Java code --> <script type="text/java"> package com.demo; import com.javapoly.dom.Window; public class HelloWorld { public static void sayHello() {
Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーJavaScript が動く仕組み
Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーJavaScript が動く仕組み 清水智公（Mozilla） Webブラウザの上で動作するアプリを書くための言語、といえば何が想起されるでしょうか。Flash、Sliverlight、Java、さまざまな言語が利用されてきましたが、やはり今のメインストリームはJavaScriptでしょう。 JavaScriptはさまざまな言語の特徴を併せ持つ動的言語で、Web技術の発展とAPIの整備の結果、Virtual Reality(VR)や画像認識、DAW(Desktop Audio Workstation)といった、少し前まではネイティブでの実装しかありえなかった種類のアプリケーションもWebブラウザをランタイムとするJavaScripで実装されるようになってきました。 そのようなアプリの代表例がゲームで
Reactを使うとなぜjQueryが要らなくなるのか - Qiita
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
JavaScript の原理：クロージャの真実 - Qiita
ECMAScript 5.1 を前提に JavaScript のクロージャの原理をメモっとく。クロージャの真実はこれ。 レキシカル環境で検索しても説明がほとんど出てこない。誰かが説明してくれたらいいのになと思ってたので、厳密さには欠けるかもしれないが記事にしてみることにした。ECMAScript の仕様によって実現されているクロージャを理解する価値はきっとある。 クロージャでカウンターの例 下記のコードはクロージャでカウンターを作る例。加算されていく var n ってどこに存在し続けるのか？この記事ではそういう疑問を解決しよう。 function createCounter() { var n = 0; return function() { return n++; } } var count = createCounter(); print(count()); // 0 print(co
jQueryで楽になる部分、楽にならない部分、顧客が本当に必要だったもの - Qiita
俺も昔はお前のような jQueryスパゲッティジェネレーターだったのだが、膝にReactを受けてしまってな… 基本的な方針 とくにライブラリ設計者において、小さなモジュールを単機能で分割する以上、ライブラリ設計者は可能な限り依存を減らすことを求められます。node環境ならdependency hellの回避のため、フロントエンド環境ならファイルサイズを減らすためです。 ライブラリ設計者ならずともコードのポータビリティを維持するため、できるだけライブラリに依存しないコードを書くのが望ましいです。 Githubみてる限り、最近書かれるJSのライブラリの多くはjQuery非依存です。ユーザーから見る限りは、jQueryElement渡すかHTMLElement使うかぐらいの違いですけどね。 また、Angular, React等のSPAをスクラッチで設計する場合、気づいたらjQueryを使っていな
全てのJSライブラリはTypeScriptで書かれるべきである | POSTD
私はJavaScriptプログラマで、ライブラリをいくつか作っています。しかし最近では RxJS version 5 のために TypeScript を書いています(RxJS version 5は Angular 2 の内部で使われていますが、Angular 2もTypeScriptで書かれています)。現在私は Cycle.js をTypeScriptで書きなおしているところです。 静的型付けと動的型付けの優劣の話はやや議論を呼ぶ話題なので、その議論をすべて再発させるつもりはありません。しかし、私は、 沢山の開発者に使われることを意図した 全てのJavaScriptライブラリはTypeScriptで書かれるべきだと信じています。これはアプリケーションやウェブサイトをTypeScriptで書くということの話ではなく、ライブラリに関する話です、ライブラリはTypeScriptで書かれるべきで、
BuckleScript: write JS faster, safer and smaller
This page has moved to bucklescript.github.io/bucklescript
Haste で atcoder に挑戦してみｒ…ん？
序 Haste-compiler は Haskell から javascript へのコンパイラで，javascript との連携も（js -> haste (Haste.Foreign.ffi)も， haste -> js (Haste.Foreign.export)も）考えられています． atcoder ではプログラミングコンテストが定期的に行われており，javascript (node.js) など様々な言語で解答を提出することができます． ……ﾃｨﾝ!!! ということで たとえば Atcoder Beginner Contest 030 - A を解いてみます． stdin を読む まず node.js でどのように出入力をするのか見てみましょう． twitter での AtCode の公式アカウントより AtCoderで使える言語としてJavaScript(node.js)を追加
Haste + Parsec でブラウザ上で動く電卓をつくる - Qiita
序 Haste は haskell で書いたら javascript にコンパイルできて超ハッピーというアレです． 関連: Haskell + Haste で Fourier 級数の可視化 Haste のいいところの1つは，haskell で書かれたライブラリも使いうる1というところです．Haskell ですごく便利なライブラリで，ブラウザ上で動かしたいかもしれないものといえば Parsec を思いついたので，Haste と Parsec を組み合わせてブラウザ上で動く電卓を作ってみましょう． 準備 パーザを書く まずは後で haste を使うことは忘れて，普通に haskell で Parsec を使って電卓に使えるパーザを書きましょう．今回は最終的に Double の計算をすることとします． expr :: Parsec String u Double という型のものができればオッケー
Haskell + Haste で Fourier 級数の可視化 - Qiita
追記 (9 Aug 2015) : haste 5.0 がリリースされました(新しいバージョンのDoc, メーリングリストへの投稿)．Major release ということでいくつか破壊的な変更が含まれており（とはいっても，ざっと眺めた感じ移行は比較的しやすそうです），Haste 0.4.4 で書かれたこのコードはそのままでは 0.5ではコンパイルが通りません．#コードをちょっと眺める の節を読むときには outdated なコードであることにご留意ください． 追記2 (19 Aug 2015) : 少し遅くなりましたが Haste 0.5.0 に合わせてアップデートしました．計測していませんがパフォーマンスが（Haste のバージョンアップによって）良くなっている可能性があります． コードの差分はこちらです．今回書いたコードでは Event まわりの取り扱いが微妙に変わったのみです．以下
「リアクティブプログラミングが読み難い」というのは本当なのか? - Qiita
追記(2017/05/2) redux-sagaでの非同期バージョンの紹介とリンクを追記。 追記(2017/2/23修正) 元記事の追記3にて言及を頂いたように、以下の「見易い版」コードは元コードが実現していた機能が抜けおちているという誤りがあります。遅くなりましたが、お詫びの上修正させていただきます。 修正内容は以下の「refreshボタン押下ですべての候補を消去」の項目に追記しました。 上記追記の趣旨として、リアクティブプログラミングはそれほど判り難いのだ、というご指摘になっていますが、返す言葉もございません。 はじめに 先日「リアクティブプログラミングとは何だったか」という記事を目にしまして、内容はたいへん興味深かったのですが、以下の記述がありました。 『宣言的』といえそうなのはわかりますし、パラダイムとして従来のコードとは一線を画すものであることは確かですが、どう贔屓目にみてもひた
リアクティブプログラミングとは何だったのか - Qiita
※この記事はずいぶん内容がわかりづらかったようで、さまざまな反応を頂きました。追記が複数ありますので、併せてご覧ください。 TL;DR Version: リアクティブプログラミングに挑戦しようとした。がっかりした。 はじめに 私のこの記事は「【翻訳】あなたが求めていたリアクティブプログラミング入門」に触発されて？書かれたもので、そちらの元ネタの記事に先に目を通しておいたほうが理解がしやすいと思います。そちらの記事は本当に解説がわかりやすく、そして何よりとても説明が具体的なので、リアクティブプログラミングについて知りたいかたには大変おすすめです。リアクティブプログラミングの解説には、漠然としたことしか言っておらずさっぱり参考にならないものも多いのですが、いや本当に多いのですが、この元ネタの記事では図表が適切に使われているだけでなく具体的な問題提起と具体的なコードによる解決策が示されており、リ
クロージャってどんなときに使うの？ ～ 利用場面を ３つ 挙げてみる - Qiita
結論を先にまとめると、以下の３つです。 1. グローバル変数の宣言をなるべく減らしたい場合 2. ユーザが引数を与えてカスタマイズ可能な自由度の高い「関数」を生成したい場合 3. 前回、呼び出されて実行されたときの演算結果（値）を内部で保存して、次に呼び出されたときに、前回の結果（値）に対して、さらに同じ処理（演算）を行う関数を生成したい場合 以下、「クロージャ」の定義から、頭の整理まで、分かりやすい参考ウェブサイトへのリンクを張りつつ、見ていきます。 【 定義 】クロージャ takeharuさん Qiita記事（2013/07/22）「JavaScriptでクロージャ入門」 「自分を囲むスコープにある変数を参照できる関数」 Wikipedia 「クロージャ」 引数以外の変数を実行時の環境ではなく、自身が定義された環境（静的スコープ）において解決することを特徴とする。関数とそれを評価する環
テストがないJS環境にモダンなテスト環境を導入していく - Qiita
Qiita:Teamに投げた社内ドキュメントだったけど、特に問題ないのでQiitaにも投げる。 前提として browserify-rails とbabelify が導入されている状況を想定してる。 基本方針 新規コードはES2015で書く 本番はbrowserify(-rails)でコンパイルする。 単体テストは node 環境下で走らせる テスト環境下では jsdom で window, document をモックする 単体テストでは ブラウザ特有の挙動はテストしない 裏側の環境(browserifyやspec-helper)は難しくして良いが、利用者からみえる範囲は複雑にしない(npm install; npm testで走る) Universal JavaScript に寄せることでコードのポータビリティを上げる 事前準備 browserify-railsを導入する。 .babelr
1年間真剣にJavaScriptに取り組んだ話 - Qiita
まえがき JavaScriptアドベントカレンダーの最終日をやらせて頂いて光栄です。 http://qiita.com/advent-calendar/2015/javascript ※元々は2の最終日を担当するつもりでしたが、本家が空いておりましたので失礼させていただいております。 2015年、自分の中で一番何に夢中だったかといいますと、モンハンかJavaScript(Node.js)だったなぁと思います。 そんなで今回は1年間どんな感じにJavaScriptとじゃれてきたのかをモクモクと書いてみようと思います。 たまにJavaScriptではなくて、PHPの話とかもするかもしれませんが、あしからず。 1年前のJavaScriptのスキル JavaScriptを使ったWEBアプリ(SPA)を一様書くことはできる。 Backbone.js/Marionette.jsを使ったサービスをすごい
さいきょうの二重サブミット対策 - Qiita
この記事はシステムエンジニア Advent Calendar 2015 - Qiitaの記事です。 弊社アーキ部で@kawasimaさんに教えてもらったさいきょうの二重サブミット対策について書いていきます！ 二重サブミットが発生するケース 不正な更新リクエストが発生するケースとして、以下のものが考えられます。 サブミットボタンをダブルクリックする 戻るボタンで戻って、再度保存ボタンを押す 完了ページでブラウザリロードする CSRF攻撃による不正な更新リクエスト 1. サブミットボタンをダブルクリックする 確定ボタンをダブルクリックすることによって、ユーザが意図していないリクエストが発生してしまうケース。 2. 戻るボタンで戻って、再度保存ボタンを押す 処理完了画面から戻るボタンで前の画面に遷移し、再び確定ボタンを押すケース。 本来は入力➡︎確認➡︎完了の画面遷移が適切だが、その画面遷移にな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bloomberg、OCamlのJavaScriptバックエンドであるBuckleScriptをオープンソース化
GitHub - jamiebuilds/the-super-tiny-compiler: :snowman: Possibly the smallest compiler ever
