サーバーサイドエンジニアも知っておくべきフロントエンドの今Rails Developers Meetup 2019
最新版TypeScript 3.0+Webpack 4の環境構築まとめ(React, Vue.js, Three.jsのサンプル付き) - ICS MEDIA
TypeScriptはMicrosoftが開発するプログラミング言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、ほとんどのフロントエンドエンジニアが使っているといっても過言ではありません。 ▲TypeScriptの公式サイト TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules（ES Modules = importやexport文のこと）をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンドラー（例：webpack、Rollup等）をTypeScriptと合わせて使うのが一般的です。 この記事では、
katatema.js - ✘╹◡╹✘
次のようなコードを書いて、 import React from "react" export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatema build 次のようなファイルが生成されるという、katatema というツールをつくった。 <!DOCTYPE html> <html> <head> </head> <body> <div>Hello!</div> </body> 最先端の消耗 前に キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘ で、こういうことを書いた。 id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。 最近のJavaScriptの周辺環境は大変で、何をやるに
Yarn: A new package manager for JavaScript
In the JavaScript community, engineers share hundreds of thousands of pieces of code so we can avoid rewriting basic components, libraries, or frameworks of our own. Each piece of code may in turn depend on other pieces of code, and these dependencies are managed by package managers. The most popular JavaScript package manager is the npm client, which provides access to more than 300,000 packages
従来のWebアプリの常識を変える! Service WorkerがもたらすWebの未来 | PLAID Engineer Blog
こんにちは。プレイドの@otoanです。 突然ですが、Service Workerって使ったことがありますか？ Service Workerは、オフラインでページを開き続けるためのキャッシュ機構として導入されましたが、それ以上のパラダイムシフトを含んでいると理解され、注目されるようになっています。注目度は高い新機能なのですが、全体像をつかめる記事を意外と見かけなかったので、今回テーマとして選びました。 KARTEでもブラウザ通知機能として、Service Workerの利用を一部始めていますので、その際に得た情報とその考察をまとめたいと思います。個々の機能の詳細やサンプルコードについては、良い記事がたくさん出ていますので探してみてください。 8/4に公開されたService worker meeting notesについても、最後の方で軽く触れていますが、記事本文内には十分反映できていませ
AbemaTVのランタイムパフォーマンスのAudit - 1000ch.net
2016.05.17AbemaTVのランタイムパフォーマンスのAudit最近業務で、巷で話題のAbemaTVのパフォーマンス改善をしている。個別具体性が高いが調査改善の雰囲気を感じ取ってもらえればそれで良いかと思い、記事にした。 AbemaTVのフロントエンドの構成話の前提となるAbemaTVのフロントエンドの構成は次の通りで、まさに流行りのといった感じ。 facebook/reactfacebook/immutable-jsReactive-Extensions/RxJSreactjs/react-routercss-modules/css-modulesビルド周りはbabelとwebpack、あとはlintツールがちょこちょこ入ったりしている。この改善の話と関係してくるのは、ReactとImmutableJSとRxJSだけ。 番組再生画面のコメント開閉が重い今回ケーススタディとして挙げ
ReactComponentのコンストラクタを追いかけて
Document for ReactMeetup#2 at 20150908
Electron + Mithrilで、ふつうのデスクトップアプリを作る - Qiita
最近は、Mithrilのお陰で、シングルページアプリケーションが大分作りやすくなりました。仕事でも使ってます。あ、ドキュメントの日本語訳もありますよ。本もあります！ http://mithril-ja.js.org/ http://www.oreilly.co.jp/books/9784873117447/ 社内ツールを作るのにMithrilとElectronで作ってみたのですが、ふつうのデスクトップアプリを作るのにちょっと手間が多いので(これはMithrilを使わなくても)、ふつうを実現するためのフレームワークについて考えて実装してみました。特にまだ名前はありません。 Electronとは？ Electronはウェブ的なスキルがあれば、それが簡単にデスクトップで動くようになるという仕組みです。元々はatom-shellと呼ばれていました。類似のものに、NW.js(元node-webkit
JavaScriptのモナド | POSTD
恒等モナド Maybeモナド リストモナド 継続モナド Do 記法 連鎖呼び出し モナド とは、一連のステップによって実行する計算を記述する際に使用する、1つのデザインパターンです。 純粋関数型プログラミング言語 では、モナドは 副作用を管理する ために広く利用されていますが、 マルチパラダイム言語では、モナドで複雑性を制御することもできます 。 モナドはデータ型をラップして、空の値を自動的に伝播したり（ Maybe モナド）、非同期コードを簡略化したり（ 継続 モナド）といった、新たな動作を既存のデータ型に追加します。 一連のコードをモナドと見なすためには、その構造には次に挙げる3つの要素が含まれていなければなりません。 型コンストラクタ — 基本的な型に対してモナドの動作を追加した型を作成する機能です。例えば、基本的なデータ型 number に対して、 Maybe<number> とい
Relay
Built for scaleRelay is designed for high performance at any scale. Relay keeps management of data-fetching easy, whether your app has tens, hundreds, or thousands of components. And thanks to Relay’s incremental compiler, it keeps your iteration speed fast even as your app grows. Keeps iteration quickRelay is data-fetching turned declarative. Components declare their data dependencies, without wo
yahoo/fluxible による SPA + Server Rendering の概観
Single Page Application + Server Rendering yahoo/fluxible を使って、Single Page Application と Server Rendering の良いとこ取りのアーキテクチャを目指す。ある程度の複雑性と引き換えに、双方の利点で双方の欠点を打ち消し合うことができるため、全体的には良好なユーザーインタラクションを期待できる構成。 なぜ Single Page Application なのか 画面遷移時するたびにJavaScript/CSS のパースと評価をしなくて良くなる 画面遷移時のトランジションを柔軟に適用できる 画面遷移をまたがった実装が可能になる（あくまで可能になるだけ） なぜ Server Rendering するのか 初期表示の Critical Rendering Path を短縮できる SEO における保守信仰
JavaScript を PNG に圧縮する | Yomotsu net
JavaScript を PNG に圧縮するツールを作りました。JS_Packer demoscene は最近 WebGL を使ったものも多くなってきています。 demoecene は基本的に ローカルにファイルとして存在しているものを使う そのファイル容量は 1 バイトでも少ないほうがいい (容量制限がある分野がある) という文化です。そして JS ファイルを圧縮する手法の一つに、JS を PNG 画像にして、それをデコードする、という手法が存在します。 JS の性質JS のコードは基本的にアスキー文字の集まりです。アスキーコードは、小文字/大文字のアルファベット、数字、スペースといった 128 種類しか存在しません。 PNG8 の性質8 ビット PNG は 256 種類の色をパレットに持っています。 PNG は可逆圧縮（ロスレス）形式の画像です。圧縮しても失われるデータはありません。
Backbone.js ではじめるクライアントサイド MVC プログラミング | CYOKODOG
MVC と言えば Apache Struts をはじめとするサーバサイド・フレームワークを想像しますが、 今回は JavaScript による大規模開発の際に採用されるクライアントサイド MVC フレームワーク「Backbone.js」の使い方についてまとめてみました。 (厳密にはクライアントサイドの場合、MVC とは呼ばず MVVM とか MV* とか呼ばれてるようです。) 前提 Backbone.js の構成を簡単に言ってしまうと 単一データの管理を行うモデル 複数件のモデルの管理を行うコレクション 画面の管理を行うビュー の３つの主要モジュールを軸に構成されており、Underscore.js、jQuery(Zepto）に依存するかたちで動作するようになっています。 利用の際は、underscore.js、jquery.js、backbone.js の順で読み込みます。 //cdnjs
way.js
way.js is a simple, lightweight, persistent, framework-agnostic javascript library that allows you to bind DOM elements to an in-memory datastore (with no to little JS code). If you like buzzwords, that means super easy two-way databinding. Once you tried it here, check the documentation or play with some code on Codepen / jsFiddle. This form is bound to the "formData" property and automatically p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Introducing Postlight’s WordPress + React Starter Kit
翻訳: ”命令型のコールバック、関数型のプロミス: Node が逸した最大の機会” by James Coglan
10 very good reasons to stop using JavaScript - LeaseWeb labs
JavaScriptを読んでて「なにこれ！？」と思うけれど調べられない記法8選。 - Qiita
「フロントエンドデベロッパー面接時の質問事項」への解答
Promises: ブラウザーJavaScriptの新しい非同期標準になるか？
