現場のES201x と未来のアーキテクチャ - インサイドフロントエンド2
Real world es201x and future
現場のES201x と未来のアーキテクチャ - インサイドフロントエンド2
マークダウンベースのタスクランナー saku を作った話 - Qiita
tl;dr make をタスクランナーとして使うことに疲れた (.PHONY ってもう書きたくない) yaml ベースのタスクランナーは幾つかあったがしっくり来ない (go-task / robo) そもそもタスクの記述言語をマークダウンにした方が良いのでは? マークダウンベースのタスクランナーを作った! saku! (update: Go言語バージョンも作った!) モチベーション 自分は普段、趣味も仕事もほとんど JavaScript ばかり書いているため、タスクランナーとしては npm run-script を使っています。 run-script はタスクのドキュメントが書けないとか、タスクにコメントをつけれないとか(JSON の文法の制約上)、不満点は色々ありますが、npm-run-all などの支援ツールを利用することで、必要最低限のタスク定義は十分にできるツールと個人的には思って
モダンなJavaScriptアプリケーションでモダンにスタイリングする方法
WeAreJavaScripters@15th https://wajs.connpass.com/event/76238/
React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 以前 React Redux を用いた SPA 新規サービスを運用して得た知見と実装例 と言うテーマで発表した内容に、加筆修正して記事にしてみました。2年半くらい取り組んで見ての結果や感想をシェアできればと思います。 対象読者 SPA の開発に興味がある方 最近の WEB フロントエンド開発に興味がある方 ある程度 React や Redux を触ったことがある方、触りたい方 目的 具体的な実装例をもとに知見を共有し、Web 開発の役に立ててほしい おかしな実装や、もっと良い方法があれば、教えてほしい 内容 コードベースでの実装例の紹介
ChromeのMediaStreamTrackとvideo要素の組合せには罠がある話 - console.lealog();
WebRTC界隈で、 Chromeの`video.srcObject = stream`はバグってるから使っちゃダメ 代わりに`video.src = URL.createObjectURL(stream)`を使え という噂があって。 とはいっても、 Safariでは`URL.createObjectURL(stream)`がエラーになる URL.createObjectURL(stream) が廃止予定となりました | Firefox サイト互換性情報 などなど事情もあるのでそろそろ`srcObject`だけ使いたい！ そのためにもどういうケースでバグってるとか、この噂の真意を確かめたいなーと思って調べてたのが事の発端。 よくわからなかった 実際に`srcObject`を使ってるコードでストリームが止まる謎の挙動を示すケースが実際にあった。 ただ代わりに`createObjectURL(
MapboxとGoogle Mapsを比べながらMapboxの本当の素晴らしさを発掘する - Qiita
こんにちは、@nazomikanです。 この投稿はLifull Advent Calenderの1日目の投稿になります。 本記事はざっくり言うとmapboxすごいよって話です。 ※言うまでもなく素晴らしいgoogle maps apiと比較することでmapboxを深掘りするのが目的で、決してgoogle mapsを貶めるつもりの記事ではないことをご理解ください Mapboxとは 地図サービスです。 GoogleMapsと近い感じでJSやnative appのsdkが公開されてていい感じに開発できるやつです。 データソースはopen streatmapになります。 Google Mapsとの違い タイルのレンダリングについて google mapsは地図をサーバサイドレンダリングして256x256の地図タイル画像として配信してタイル上に配置していきます。 一方でmapboxは地理情報のvec
Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
型付き ⊄ 型なし - soutaroブログ
最近、TypeScriptについて考えることが多い。SideCIでWebフロントエンドの開発に使いはじめたこともあるし、Steepの開発をしていて「TypeScriptだとどうなるんだっけ？？」などと言いながら試してみることもある。 TypeScriptは型付きのJavaScriptである。構文はほとんど同じで、使えるライブラリもかなり近い。JavaScriptへの変換はかなり自明で、ランタイムは全く同じ。性能の差はない。Webpackやnpmを初めとするツール群もかなり共通しているし、アプリケーションも似たようなもん。書いている気分には、ほとんど差がない。つまり、TypeScriptとJavaScriptでプログラミングしているときに、なにか違いを感じるとすれば、それは（ほとんど）型付きの言語と型なしの言語の差と考えて良い。 RubyとJavaを比較するのとは、全然話が違う。構文も意味も
Vue+VuexでMVVMなWebApplicationを設計するときに考えたいこと
まえがき ここ最近、Vueを使って実装されたWebアプリが随分と増えてきたように感じます。自分も何度となく実装してきました。すごく小さなデモを作るときにも使えるし、中規模以上のWebアプリを作るときにも使えるし、扱いやすいライブラリでとても好きです。 ある程度の規模になってくると「複数の画面でデータを共有したい」「こっちのComponentの状態をあっちのComponentに伝えたい」といったような問題にぶち当たり、アーキテクチャを導入することでそれらを解決するというのもお馴染みな感じです。特にVueでは双方向データバインディングの特性上、MVVMアーキテクチャが使われることが多いと思います。 今回は、VueでMVVMを実現する際に起き得る設計上の問題について、現時点での私の解決方針をまとめてみました😌 まえがき Vue+MVVMとはどんなものか 一般的なMVVMを理解する View V
なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 | Nagisaのすゝめ
2018年2月6日 なぜプロダクトに Vue.js を採用したのか? 運用してみてどうっだった? という話 余り知られていませんが Nagisa ではアプリだけでなく Web のプロダクトやサービスもあります。マンガZERO や UPTOON! や 月刊コミックジヘン 辺りがそうです。 何れも Vue.js で作られている SPA で、社内・外両方から “なんで Vue.js なの?” とかよく聞かれます。そこで、今回はどうして Vue.js を選択したのか、Vue.js の何がいいのか、Vue.js で運用してみてどうだったかの話をしたいと思います。 はじめに Vue.js を導入する前のマンガ ZERO Web は 2.0系の Riot で作られていました。今ある SPA のような形ではなくサーバサイド (Go) にてメタタグを生成、空のマウントポイント <div id="app"><
TypeScript 2.7.1 変更点 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちはソウゾウ社な@vvakameです。 今回はちょっと遅くなってしまいました…。 TypeScript 2.7.1がアナウンスされました。 What's new in TypeScriptも更新されているようです。 破壊的変更もあるよ！ 変更点まとめ クラスのフィールドの初期化チェックをより厳密に行う Stricter class property checks --strictPropertyInitialization が追加 --strict に含まれる ? 無しの場合コンストラクタ内で初期化しないとダメ 変数末尾に ! を
中大規模開発をReactで行う現場から伝えたいこと
Transcript தେن։ൃΛ 3FBDUͰߦ͏ݱ͔Β͍͑ͨ͜ͱ 3FBDU�KT�NFFUVQ���� None ٕज़తͳ͋·Γͳ͍Ͱ͢ தେنͳ։ൃΛߦ͏্Ͱ ۤ࿑ͨ͜͠ͱվળͨ͜͠ͱΛ͠·͢ ݱͷటष͍Ͱ͢ Έͳ͞Μ͕ࠓޙ։ൃΛߦ͏ࡍʹ ࢀߟʹͳΕͱࢥ͍·͢ ݱࡏߦͳ͍ͬͯΔ։ൃʹ͍ͭͯ ݱࡏߦͳ͍ͬͯΔ։ൃʹ͍ͭͯ � w� ϑϩϯτΤϯυͷ։ൃऀɿ։ൃॳ�ਓ ���������ݱࡏ�ʙ�ਓ΄ͲͱϕτφϜ։ൃڌʹਓ� � w� ։ൃ͍ͯ͠Δͷɿཧը໘� � w� ։ൃɿ�� � w� ༻ٕज़ɿ3FBDU� �3FEVY FO[ZNF FUDʜ� ςετॻ͔ͳ͍ͱޙʑࣗΛۤ͠ΊΔ ςετ͕ͳͥඞཁͳͷ͔ � w� Կϲ݄લʹ։ൃͨ͠ͷΛमਖ਼ͨ͠ͱ͖ɺ ��������खಈͰࢼݧ͢Δͷਏ͍ɻ � w� ։
ECMAScript 2018（ES2018）の新機能まとめ | あるいてっく
[2018-01-30] Unicodeプロパティ関連で、オンラインのデータベースについて情報提供をいただいたので、追記しました。 Stage 4に到達したproposalをまとめました。今回は正規表現関連の追加が多いようです。 全体的にざっくりなまとめですので、詳細は各proposalや、ES2018のドラフトを参照してください。 今回の新機能は既にChrome 64が対応済みなので、現時点ですべての新機能を体験することができます。 以下、サンプルコードがある場合、その結果はすべて手元のChrome 64によるものですので、あらかじめご了承ください。 オブジェクトの Rest/Spread プロパティ（Object Rest/Spread Properties） 配列が既に持っていた機能ですが、オブジェクトでも利用できるようになります。 /* Rest Properties */ con
)
モナド (プログラミング) - Wikipedia
関数型プログラミングにおいて、モナドはプログラムを構造化するための汎用的な抽象概念である。対応したプログラム言語では、ボイラープレート的なコードでもモナドを使って除去することが可能となる。これはモナドが、特定の形をした計算を表すデータ型と、それに関する生成と合成の2つの手続きを提供することによって実現されている。生成は任意の基本型の値をモナドに包んでモナド値を生成する手続きであり、合成はモナド値を返す関数(モナド関数)たちを合成する手続きである。[1] 広い範囲の問題をモナドを使うことで単純化できる。例えば、Maybeモナドを使えば未定義値への対処が簡単になり、Listモナドを使えばリストに入った値を柔軟に扱うことができる。複雑に組み合わさった関数は、モナドを使えば、補助データの管理や制御構造や副作用を除去した簡単なパイプライン構造に置き換えることができる[1][2]。 モナドの概念や用語
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - NervJS/nerv: A blazing fast React alternative, compatible with IE8 and React 16.
GitHub - captbaritone/webamp: Winamp 2 reimplemented for the browser
bokuweb.me
Angular2+ SPA に JavaScript 実装の QR コード読み取り機能を搭載するにあたり、既存の JavaScript ライブラリを選定した結果発表 - Qiita
JavaScriptのE2Eフレームワークを触ってみる
GitHub - google/clasp: 🔗 Develop Apps Script projects locally.
