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
ECMAScript Daily
Provide daily news about ECMAScript Next
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
2015/05/27にLINE社で行われた、Data Binding JS Nightでの発表内容です。
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";
JavaScriptのコード補完できていますか？ - Aqutras Members' Blog
こんにちは．JavaScriptにハマっている maxmellon です． この記事では，javascriptをちょっと楽に書けるようになる、Ternを紹介したいと思います．Ternは，javascriptのコードをIDEのように補完するツールです． この記事を読まれている方も，それぞれ好きなエディタがあるでしょう． 私は，普段は Vim を利用しています． 補完から連想されるイメージは，それぞれエディタ別のプラグインを想像しがちですが， 今日は，EmacsもVimもsublimeもAtomも仲良くなれるような画期的なツールを紹介します． 補完とはなにか，補完があると何が嬉しいか よく補完と総称されるものは，オートコンプリートや入力補完のことを指しています． 入力補完があって嬉しいことはたくさんあります． その中でも個人的に特に嬉しいものを挙げます． スペルミスがなくなる 入力する文字を減
2015年、人気の「JavaScriptライブラリ＆ツール」はどれ？ Angular vs. Reactの行方
← 前回 連載 INDEX 次回 → JavaScriptライブラリの栄枯盛衰は、すさまじいスピードで進んでいる。2015年、本当に利用意向の高いJavaScriptライブラリはどれなのか。これを調査するため、Build Insiderではアンケート調査を実施した（※ちなみに、本稿とほぼ同じ質問内容のアンケート調査を毎年4月に実施している。この定点観測により、技術トレンドの推移を浮き彫りにしたいと考えている。その去年の結果はこちら）。 さっそくランキングをジャンル別に紹介していこう JavaScript関連全体の動向： 人気ジャンル フレームワーク関連： MV*などのJavaScriptフレームワーク 各種アプリを支える技術＆ツール： altJS（JavaScript代替）／CSSプリプロセッサー（CSSメタ言語）／JavaScriptテストツール JavaScript関連全体の動向 まず
フレームワーク対決！Angular VS React仮想パネルディスカッション
フレームワーク対決！Angular VS React仮想パネルディスカッション 吉川 徹 特集企画「アプリケーションアーキテクチャ最前線」では、さまざまな視点からアプリケーションアーキテクチャをエキスパートたちに語っていただきます。今回は、今話題のAngularJSなどのJavaScript MVCフレームワークの台頭と進化、そして新しいアーキテクチャであるFluxとそのフレームワークであるReactなどについて、既に先行して学んでいるエキスパートたちにその知見を聞いてみました。 今回はフレームワーク対決ということで、エキスパートたちがAngularとReactという陣営に分かれ、それぞれのフレームワークについて疑問点をぶつけたり、議論したりする仮想パネルディスカッションという形式でお伝えします。単なるパネルディスカッションとは違って、キーワードは「プロレス」です。まさかりの投げ合い、di
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
なんだかんだで SPA から jQuery に戻った話 - ボクココ
最近は SPA とか React といった話題が尽きないが、自分は結局 フロントエンド JavaScript は jQuery が最もいいと感じている。それはそれら SPA の JavaScript をいじった経験を踏まえての感想。 理由としては、「 やりたいことができにくい 」これに尽きる。 最新を追うということ 自分が最初にSPAを触ったのは AngularJS だった。なるほど、この ng-repeat や $route, $scope などを使えば、今までサーバサイドでやってたようなレンダリングが表側で制御できるようになる！と感動したものだった。この気持ち良さはきっとサーバーサイドでごにょごにょやっていた経験のある人ならなおさら感動するものだ。 さて、じゃあといって「次作るのは SPA のサービスにしよう！」と意気込んで初めて見たとする。それで作っただけで話題になるし、エンジニアと
初心者のためのAngularJS入門 - libro
※ページが正常に表示されない場合 AddBlockなどの広告ブロックツールがONになっていると、ページの一部が表示されないことがあります。これらのツールをOFFにしてみてください。
JavaScript のスコープを理解する - tacamy--blog
スコープとは、変数の有効範囲のことで、プログラムのどの場所から参照できるかを決める概念です。 スコープの種類 JavaScript のスコープには、グローバル変数とローカル変数の 2 種類あります。 グローバル変数 ローカル変数 関数の外（トップレベル）で宣言した変数 関数の中で宣言した変数, 関数の仮引数 プログラム全体から参照できる その関数の中でのみ参照できる ブロックスコープは存在しない Java などの言語では、if や for などの {} で囲まれたブロックごとにもブロックスコープがありますが、JavaScript には存在しません。 JavaScript でどうしてもブロックスコープを使いたい場合は、with 命令を使う方法や、無名関数を定義と同時に呼び出すなどの方法で、擬似的にブロックスコープを作ることは可能です。 補足 : let を使うとブロックスコープがつくれると教
niw.at — "use strict"
最近のモダンな JavaScript では、必ず "use strict" というのが書かれていると思います。この使い方を雰囲気ではわかってるけど、正しく理解していない場合が自分も含めて多いと思ったので書きとめたいと思います。 ちなみに、"use strict" でググると Perl のそれが出てきますが、Perl の話はしません。あとセミコロンの話もしません。 "use strict"とはそもそもなにか "use strict" は、Use Strict Directive と呼ばれています。 これは ECMA-262 の 14.1 Directive Prologues and the Use Strict Directive によって示されています。 A Use Strict Directive is an ExpressionStatement in a Directive Pro
Gruntハンズオン(テスト編)
Gruntハンズオン(テスト編) 目次 A. QUnit + Chromeでテストを行う B. QUnit + PhantomJS でテストを行う C. Jasmine + Chrome でテストを行う D. Jasmine + PhantomJS でテストを行う E. Mocha でテストを行う F. Mocha で JUnit レポートを出力する G. Mocha でカバレッジレポートを出力する H. WebdriverIO で E2E テストを行う Z. 参考資料 A. QUnit+Chromeでテストを行う テストランナー Karma を使い、 QUnit フレームワークを使って書かれたテストを Chrome ブラウザ上で実行します。 インストール Gruntfile.js を作る テスト対象ファイルを用意する 実行する カバレッジレポートを取得する 1. インストール npm i
The little book of Buster.JS — The little book of Buster.JS 0.7 documentation
The little book of Buster.JS v0.7 The little book of Buster.JS¶ Buster.JSについての小さな電子書籍 Contents: Buster.JS のインストール Mac OS X/Linux Windows VMにインストール 簡単なテストを動かしてみよう 設定ファイル-buster.js シンプルなNodeテストを動かしてみよう テストの実行環境について Node環境の場合 ブラウザ環境の場合 ハイブリッドなテスト 小さなJSのテストを書いてみよう strftime テストを補助する機能について setup/teardown Test case contexts // Deferred tests 非同期テスト Mock/Stub/Spy/Fake Test reporters reportersの種類 独自に定義したre
最短で中級者になれる！JavaScriptを入門から学べる最強のサービス・ツール10選 | iPhoneの神様
機種変更では、このような失敗をする方がとても多いです。 有料オプションを契約させられ料金が高くなった。。 待ち時間や契約時間が長くて、半日かかってしまった。。 キャンペーンや割引がきちんと適用されていなかった。。 スマホを乗り換えるときには、 → おとくケータイ で乗り換えをするとキャッシュバックがもらえます。 スマホの機種変更するときは、 →ソフトバンクはこちら →ドコモはこちら →auはこちら キャリア公式オンラインショップがおすすめです。学割や限定キャンペーンなどがもっとももおとくな時期です。 最も人気の言語、JavaScript Redmonkの調査によると、人気言語のランキング第一位はJavaScript (2015年6月発表のデータ,Redmonkより引用) これはGitHubとスタック・オーバーフローというサービスのコミュニティを分析した結果で、見にくいですが１位がJavaS
jQuery本体のダウンロードと1.X系2.X系の違いと1.9系以降の注意点など - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
1.x 系は IE8 以前をサポートするレガシーブラウザ向けのバージョン、 2.x 系は IE8 以前のサポートは捨てて、高速に安定して動作させることを目指したバージョン、という認識で良いのではないでしょうか。 制作環境に合ったバージョンをダウンロードして下さい。 ダウンロードするファイルは、1.X系2.X系共に Download the compressed, production jQuery ○.○.○ Download the uncompressed, development jQuery ○.○.○ のいずれか。 compressed は圧縮されたファイルで、 uncompressed は非圧縮ファイルです。 特にコアファイルを触らない方は、圧縮ファイルの方を選択で良いと思います。 クリックすると、ズラズラっとコードが表示されますので、 右クリックして名前をつけて保存をクリック
データのビジュアル化を最少の労力で: はじめに
印刷物の制作には、数値の表から棒グラフや円グラフを作ったり、与えられたラフスケッチを清書するなど、データや情報をビジュアルに表現する作業がつきものです。これらの作業はドローソフトや画像処理ソフトで行うのが普通ですが、場合によってはかなりの労力やセンスを要求されます。そこで、MS Excelなどを用いたグラフ作成の自動化が広く行なわれていますが、パソコンソフトにはほかにも多くの自動描画ツールがあります。DTPの世界ではあまり知られていないツールを紹介します。 Graphviz graph-easy Google Chart Tools D3.js R ※この記事は、弊社 PR 誌『SHOWA NEWS』No.127に掲載された「データのビジュアル化を最少の労力で」を増補したものです。グラフ例や情報の参照先リンクを追加しました。
『コードのバグはコードで見つけよう！』
こんにちは。 アメーバピグでNode.jsを使って開発をしている中村と申します。 平日はエンジニア、土日は主夫として働いています。 さて、早速ですが、この記事ではESLintを使って、JavaScriptのソースコードのバグを発見する手順をご紹介したいと思います。 ESLintとは ESLintはNicholas C. Zakas氏が中心となって開発しているJavaScriptのLintツールです。 JavaScriptのLintツールといえば、最近ではJSHintが定番だと思います。 ESLintはJSHint同等の機能を持つ他、解析ルールが完全にプラガブルになっており、独自ルールを自由に追加できるという特徴があります。 例えば、JSHintでいうところの、strict（strict modeで実行されるかをチェック）というオプションは下記のURLのように個別のルールとして実装されていま
ESLint 0.1.0がリリースされたので、JSHintとの違いやプラグインの書き方について
プラグイン機構を持っているので、Lintするルールを追加できる ESLint 本体のコードがシンプルに保たれる Mozilla JavaScript AST をベースとしているため、他のものと連携しやすい EsprimaでパースしたASTをLintする two-pass のツール つまりEsprimaでパースできないとLintはできない また、現段階だと巨大なjsファイルではJSHintより3倍程度遅い Rule performance などにまとめられている、速度については今後改善していくとのこと JSLint/JSHint互換のようなルールが作られている – ESLint Rules List Node.js で書かれているツール 将来的には Browserified されたバージョンも出す予定 ドキュメントがよく書かれている それぞれのルールごとにドキュメントが書かれている esli
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ncouture/emacs.d: Emacs 25 Configuration: Org-Mode, Elpy, Indium (Emacs-JS, Tern, Chrome Debugging)