複雑なJavaScriptアプリケーションに立ち向かうためのアーキテクチャ - builderscon tokyo 2017
Abstract わたしは普段、ブラウザ上で動作する業務アプリケーションをJavaScriptで開発しています。このセッションでは、複雑化するwebアプリケーションに対して、どのようなアプローチで設計し、その複雑さに立ち向かっているのかについて発表します。 ブラウザ上で動作するある程度以上に複雑なアプリケーションを開発する際には、例えば以下のような問題が起こりがちです。 DOM操作やスタイル操作とロジックが密結合してしまい、DOM構造を変えたいときにJavaScriptのソースを読み解く羽目になる APIコールなどの非同期な操作が、ソースコードの可読性を下げてしまう 「バリデーションはどこに書けばいいんだ？」 「APIから返ってきた値をそのまま表示するんじゃなくて、加工して表示したいんだけど、どこにそういうロジックを書けばいいんだろう？」 これらの問題に対して、万能の答えはおそらくありませ
【資料あり】Vue.js 入門の勉強会の講師をやってみた - s平面の左側 - s平面の左側
少し前になるが、Vue.js に関する勉強会の講師というものをやってみた。 そのときに使用した資料がこちら。 github.com 私自身フロント側のプログラムなんて全然触ってきていないし、Vue.js についても個人的に数日触っただけだが、 触ってみたときにはかなりの感動があったし、私と同じレベル感で Vue.js（あるいはJSフレームワーク）に興味はあるけど触る機会を得られていない人も結構いるのではないかと思ってこのテーマを選んだ。 心がけたこと 準備をするにあたって以下の3点を意識した。 実際に手を動かしてもらう内容にすること どの環境でもすぐに動かせること 参加者の期待値を調整しておくこと 実際に手を動かしてもらう内容にすること 普段勉強会に参加していて思うのは、話を聞くだけでは「わかった気になる」だけで何も身にもつかないよなぁ、ということ。 もちろん優秀な人というのは得た知識につ
[redux][react][redux-saga]redux-sagaで検索機能の実装を写経してCSPのパワーを感じる - Qiita
この記事は、@inuscriptさんによる「redux-observableで検索機能の実装を写経してRxJSのパワーを感じる」をRedux-Sagaで書きなおしたものです。 本記事の目的 実用コードにおける非同期処理では以下のような問題が頻出する。これらについて元記事におけるRedux-obserbable(あるいはAngularが提供する)RxJSを用いた解決方法に対して、Redux-sagaによる解決方法を比較する。 (元記事よりの引用) この時、大きく以下３つの問題に当たる 1: キーストローク毎にリクエストするのはよろしくない 2: 同じリクエストで済むのに無意味にリクエスト飛ばすのはよろしくない foo -> fooo -> foo -> fooo -> foo みたいな入力をした場合に不必要にデータ飛んでしまう可能性 3: 複数リクエストを発火した場合の処理 A -> Bの順
![[redux][react][redux-saga]redux-sagaで検索機能の実装を写経してCSPのパワーを感じる - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e004b35600468a1bc05b634fda2560ca86338a2f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9cmVkdXgtc2FnYSVFMyU4MSVBNyVFNiVBNCU5QyVFNyVCNCVBMiVFNiVBOSU5RiVFOCU4MyVCRCVFMyU4MSVBRSVFNSVBRSU5RiVFOCVBMyU4NSVFMyU4MiU5MiVFNSU4NiU5OSVFNyVCNSU4QyVFMyU4MSU5NyVFMyU4MSVBNkNTUCVFMyU4MSVBRSVFMyU4MyU5MSVFMyU4MyVBRiVFMyU4MyVCQyVFMyU4MiU5MiVFNiU4NCU5RiVFMyU4MSU5OCVFMyU4MiU4QiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NGMyMzYwNmRiNzIyYjc4OTM3MzBmZTgyYjVmMjhmYzE%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB1ZWhhaiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ODgzNDVhZjczOGIzMWY3MmEyODk2YjVjMzNhYjgzNTA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D18248377a550d5cc79b2c69237d7e121)
JavaScriptでセキュアなコーディングをするために気をつけること
kintoneはJavaScriptを使って自由にカスタマイズできます。 カスタマイズにより独自のリッチなUIを構築したり、新しい機能を追加したりできますが、セキュアなコーディングをしないと クロスサイトスクリプティング（以下、XSS）などの脆弱性を作り込んでしまう危険性があります。 この記事では、JavaScriptでセキュアなコーディングをするための基本的なポイントを解説します。
ロックイン - mizchi's blog
Rebuild.fm の mirakui さんの回聴いてたんだけど、インフラの世界観だと、ロックインさせたい Amazon/Google VS 自由を手に入れたいDocker みたいな構図がある、な話があって、思うところがあった。 rebuild.fm 勿論、話はそう単純じゃないし、それぞれがそれぞれの成果を利用しあってるので、どっちが正義だみたいな話にはならない。第三者目線としては、寡占にならず競争が続くのが望ましい。僕個人の意見としては、金が生まれるところには、正しく金が生まれてほしい。それで全体としての健全性が育まれるなら。日本にいてあんまり面白くないのは、その辺の基盤技術に関われる機会があんまりないことだが…。 とはいえ、利用者目線としては、できるだけ自由なポジショニングを可能な限り選び続けるべき。だが、自由を手に入れるには、それだけの知識が必要となるし、そこを諦めたところをアウト
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
JavaScript初級者のためのコーディングガイド - Qiita
JavaScriptは大変難しい言語です。Rubyの難易度を2、Cの難易度を5、C++の難易度を8にすると、JavaScriptの難易度は12ぐらいあると思います。このコーディングガイドはそんなJavaScriptの深みに嵌まらないようにするためのJavaScriptの書き方を規定したものです。初級者1のための物ですので、わかってやっている人に好きにやってください。 このコーディングガイドは絶対に従わなければならないものではありません。私は一切強制はしませんし、初級者が従わなければならないという義務もありません。採用するしないはみなさんの自由です。 禁止編 JavaScriptには安易に使用してはいけない機能があります。下記の機能は、**それぞれの機能を使っても良い、または、使うべきであるという理由を説明できない限り、**使用してはいけません。 ==、!= ==と!=を使用してはいけません
フロントエンドのインプットためによくみてるサイトを紹介します - deepblue-will’s diary
Goodpatch Advent Calendar 2016 17日目の記事です！ こんにちは。フロントエンドエンジニアをしてます@deepblue_willです。 今回は私がよく情報収集ために見ているサイトを幾つか紹介したいと思います。 最近のJavaScriptのことを知るならこのサイト！ Echo JS - JavaScript News JSer.info どちらもJavaScript関連の最新情報を紹介してくれるサイトです。ここで紹介される記事は内容が濃いです。ReactやAngularといったフレームワークのことはもちろん、JavaScriptそのものの話、WebAssemblyなどのWeb最新技術のことなどここでインプットできます。 最近の記事だとこれが面白かったです。2016年に調査したフロントエンドのツールやライブラリなどに関するアンケート結果です。 The State
The State of Babel · Babel
Some History Current Status The Future Community Previous issues: Babel Roadmap #4130, 6.0 #2168 Please check out the Community section if nothing else. Also published as part of Mariko Kosaka's 2016 Web Advent Calendar! Some History Sebastian created "6to5" in September of 2014. Interestingly enough, he made it to scratch an itch he had with understanding programming languages and how they work.
Falcor入門 1日目 Falcorとは何者か - Qiita
はじめに 最近、ある程度の時間を割いてFalcorを触っています。 まだ日本語での情報は豊富とは言えない状況ですし、自分の理解を整理する意味も含め、何回かに分けてFalcorについて書いていきます。 1日目の今日は「Falcorとはどのような目的のために生まれ、どのような仕組みに依存しているのか」を説明します。 概念的な話ばかりでコードは殆ど出てきません。実装寄りの話は次回以降に書きますが、行ったり来たりしながら読むのも有りじゃないかなと思います。 ちなみに次回以降の目次はこちら： Falcor入門 2日目 FalcorのJSON Graphに触れてみる Falcor入門 3日目 Falcor Routerでサーバサイドを実装してみる Falcor入門 4日目 FalcorとReactを組み合わせる 昨今、Webアプリケーションの大半は、ReactやAngularなどのMVCフレームワーク
今年のうちに知っておきたい！ES2017に入る5つの新仕様 - エンジニアをリングする
はいっ Goodpatch Advent Calendar 2016 5日目です！ 2016年もまもなく終わりますね。 あと半年もすればES2017のリリースですね！ というわけで先月Node学園祭でご紹介したES2017の新仕様をブログにおこしておさらいしてみようと思います！ ES2017に入る5つの新仕様 Object.values / Object.entries String padding Object.getOwnPropertyDescriptors Trailing commas in function parameter lists and calls Async Functions https://github.com/tc39/proposals/blob/master/finished-proposals.md 1. Object.values / Object.e
Rails5.1に向けてフロントエンド周りで起こっている革命まとめ - Qiita
こんにちは Rails5.1に向けて、DHHのjqueryを依存から外す発言を発端にフロントエンド周りが急激に発展しているので、簡単にですがまとめてみました。 各issue, PRの詳細には踏み込みませんが、知見に溢れているので読んでみるの推奨です。 間違い、足りないものがあったら編集リクエストお願いします。 jQuery依存を無くす話が出る rails(issue): Drop jQuery as a dependency jquery-ujsはjqueryに依存しないようにする jquery-ujs: Drop jQuery as a dependency "jquery"-ujsじゃなくなったので名前変更 rails-ujs誕生 実際にRailsからjquery依存がなくなる rails: Drop jQuery as a dependency jsライブラリを入れる方法がnpmパッ
npm-scripts で Web フロントエンド開発を管理する - アカベコマイリ
gulp なしの Web フロントエンド開発から 1 年あまり。その間、特に問題もなく npm-scripts で Web フロントエンド開発を管理できているので、この間に得られた運用知見や所感などをまとめてみる。 npm-scrips とは？ 最近の Web フロントエンド開発では AltJS/AltCSSのビルドやリリース用イメージ作成などに Node.js + npm を利用することが一般化してきた。そのためプロジェクトは package.json で管理することになる。package.json の提供する代表的な機能として プロジェクト情報の定義 プロジェクトの成果物を npm として配布するための情報 プロジェクト名、バージョン、作者などのメタデータを定義する 依存モジュール管理 プロジェクトが依存する npm とバージョンを管理する この情報へ基づき npm install コ
Ruby on Rails on React on SSR on SPA - ✘╹◡╹✘
amakan での設計を例に、RailsでSingle-Page Applicationをつくるときの自分のやり方をまとめてみます。 Gem 「JavaScriptで書かれたReactのコンポーネントからHTMLを生成する」というのをRubyでやるために、RubyのV8エンジン実装であるmini_racerというGemを使う。この処理を楽に実行するために、react_on_railsというGemも使う。 gem "mini_racer" gem "react_on_rails" View body要素内のHTMLは全てReactで生成するので、layout以外にviewのテンプレートは存在しない。 Controller 初回リクエストの場合はHTMLを返す ページ遷移時に呼ばれるリクエストの場合はJSONを返す 外部サイトからブラウザバックで戻ってきたときにJSONを見せない という要求に
複雑なJavaScriptアプリケーションを考えながら作る話
autoscale: true theme: Plain Jane,5 複雑なJavaScriptアプリケーションを考えながら作る話 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info #jsprimerを書いています JavaScript入門書に興味ある人はウォッチ :star: :warning: 注意 :warning: 作成するアプリケーションによって必要な構造は異なります 今回の話はある程度の規模で複雑性を持つクライアントサイド ライブラリ抜きで数万LOC >= 長期的にメンテンナンスや変更が発生するアプリケーション サーバサイドレンダリングはしないクライアントアプリケーション 3行でOK 複雑なJavaScriptアプリケーションを作るにあたりドメインモデルをどう実装するか悩んだ 色々と試行錯誤した
React Fiberアーキテクチャについて | POSTD
初めに React Fiberは、現在進行形で進められているReactのコアアルゴリズムの再実装であり、Reactチームの2年以上にわたる研究の成果です。 React Fiberは、アニメーション、レイアウト、ジェスチャーといった領域に対する適性を向上させることを目指しています。React Fiberの目玉となる インクリメンタルレンダリング は、レンダリング作業を分割して、複数のフレームに分散させることができる機能です。 他には主に、新たな更新があった際に作業を休止・強制終了・再利用できる機能、更新の種類別に優先順位をつけられる機能、新しい並行プリミティブなどが挙げられます。 このドキュメントについて Fiberは、コードを見ただけでは分かりにくい斬新な概念をいくつも導入します。このドキュメントはそもそも、ReactプロジェクトにおけるFiberの実装に伴って私が取っていたメモを集めたも
Angular 2 versus React: There Will Be Blood
By Cory House Angular 2 has reached Beta and appears poised to become the hot new framework of 2016. It’s time for a showdown. Let’s see how it stacks up against 2015’s darling: React. Disclaimer: I enjoyed working in Angular 1 but switched to React in 2015. I’ve published Pluralsight courses on React and Flux and React and Redux in ES6 (free trial). So yes, I’m biased. But I’m attacking both side
From React to Riot 2.0
The beginnings: Frameworkless JavaScriptThis highly popular blog entry was the starting point for our explorations in minimalism. The point of the writing was that Muut couldn’t be built on top of the popular frameworks: Backbone, Angular, or Ember. Main reasons: We want our client application to be small. It’s unacceptable that the underlying framework is bigger than the application itself. We wa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - roman01la/js-memory-usage: Data Structures Memory Usage in JavaScript
GitBook – Knowledge management for technical teams
