フロントエンドのデザインパターン本書は、Lydia Hallie 氏 と Addy Osmani 氏らによる Learning Patterns (https://www.patterns.dev/) の日本語訳です。原著は大きく 3 つのセクションに分かれていますが、本書は、その最初のセクションである Design Patterns を訳したものとなります。
オブジェクト指向の呪いと、その避け方 - mizchi's blog
このテーマで書く前に、まず、最初に自分に多少の偏りがあることを認めておかなくてはなりません。 オブジェクト指向より、関数指向寄り オブジェクト指向のアプローチは有用だが、ただしそれを実現する手段はクラスと継承ではない。 階層化されたツリー構造(GUI/リレーショナルな参照構造)に埋め込まれる状態はコード品質を悪化させるので、できるだけ出現するべきではない。 ただし、状態は確実に存在する。だからこそ慎重に扱うべきだ、という派閥です アンチパターン: 特に理由もないクラスメソッドへの所属 何かのバリデータを実装したいとします。 その関数がどこに所属するかについて、よく見るこれらの実装は全部アンチパターンといっていいと思います export class Validator { static validate() {...} } export class Validator { validate(
“Web Componentsだけ” で新サービスを実装して見えたこと - Qiita
Double O というサービスを作りました。 フロントエンドはピュアな Web Components を採用していて、バックエンドは Lambda と DynamoDB のみで構成しました。 (厳密には CloudFront とか API Gateway とかもあるけどそこは省いていいよね？) REST API 以外の Util 系の Lambda 関数はすべて AWS Cloud9 で管理することで環境構築も不要な Lambda ができて楽でした。 TL;DR サーバーレスについてはごく普通のことしかしていないので、詳しくは触れないでおきます。 ピュアな Web Components だけでサービスを成立させることができた。 HTMLElement クラスを継承するだけなのでメジャーライブラリは不要になった。 Web Components の Custom Elements は標準仕様
同僚のコードレビューでこんなにクラスの設計が良くなったという話 - Qiita
弊社では、案件とは関係のないプロジェクトでも業務時間中にみんなにコードレビューを依頼できる時間が確保されています(参加は任意)。案件のコードレビューを依頼したり、ちょっとした個人の制作物を見てらったりと使い方は色々です。 先日、TypeScriptの練習にQiitaのAPIを叩いていて記事を表示するブログウィジェットを作成しました。このウィジェットのレビューを依頼したところ、クラスの設計について具体的な指摘と、それに対する改善を経験できたのでこの記事に記載します。 今回作ったQiitaWidgetの要件 Qiitaの公式APIV2から記事とユーザー情報を取得し、HTMLテンプレートに表示する 投稿の合計いいね数を算出するために、あるユーザーの投稿を全件取得する (このために複数回リクエストの送信とレスポンスデータの結合を行う) パラメータによってユーザー、いいね数によるソート、表示件数、ラ
Headless Chromeでデザイン変更履歴を追える魚拓を作ってみた - pixiv inside
はじめに こんにちは、普段はPawooの開発を担当している新卒エンジニアのabcangです。 最近話題のHeadless Chromeを使って魚拓を作ってみましたので、その話をします。 結論から言うと、こういうものができました。 以下、詳しくお話していきます。 日々行われるデザイン変更をどう把握するか pixivには毎日新機能やUIの変更がデプロイされており、どんどんページが変わっていきます。 ある日、ディレクターから「デザインの変更履歴を追うための魚拓ツールがほしい」と相談されました。魚拓ツールがあると、なにか数値の変動があったときにデザインの崩れを確認したり、過去のデザインを振り返ったりするときに便利とのことです。 ちょうどそのタイミングでHeadless Chromeが利用できるGoogle Chrome 59がリリースされていたので、試すいい機会だと思い引き受けました。 Headl
SAM - State | Action | Model
How does SAM work? SAM is built on one of the most robust foundation of computer science (TLA+). SAM recommends factoring application state management along three building blocks, actions, model, and state that are invoked in well defined "steps". Actions are triggered by events, their role is to translate events into proposals to mutate the model The Model is solely responsible for the decision o
実況中継シリーズ Vue.jsで実現するMVVMパターン Fluxアーキテクチャとの距離 - Re.Ra.Ku アドベントカレンダー day 13 - Re.Ra.Ku tech blog
前説 丸山です。Re.Ra.Ku. アドベントカレンダー13日目の記事です。前日はiOSアプリのUIをコードで書いてみる話でした。明日はおそらくScalaの話になると思います。 さて、以前も話題にしましたが、builderscon2016が先日開催されました。チケットは3hでSOLD OUT。プラチナチケットと化した参加権ですが、発表する側ならば実質無料で参加し放題！これはいっそ申し訳ないレベルでは！？ というわけで、せっかく発表したのでその内容をなるべく多くの手段で共有したい。そう思い、今回も実況中継シリーズを弊社テックブログで行います。実況中継シリーズというのは、プレゼンをブログで再現するアレです。なお、実際のプレゼンは動画になってYoutubeにアップロードされております。builderscon公式サイトのセッション詳細ページからもご覧いただけますので、よろしければそちらも合わせてご
jQueryによるコンポーネント化考察 - アルファブレンド プログラミングチップス
はじめに JavaScript Advent Calendar 2016 - Qiita 4日目 注) SPAの話ではありません。 なぜjQueryを使うのか 今の時代、JavaScriptはAngular2やReactに代表されるコンポーネント指向の時代を迎えている。 そんな中でなぜjQueryを使うのか。 下記の条件が組み合わさっている場合にはjQueryの方が使いやすい。 JavaScriptが必要な箇所が少ない SPAでJavaScriptをメインで使う場合はjQuery等今更使うことは無いと思うが、 ほとんどサーバーでレンダリングされるhtmlで完結しているシステムに、 時々動きを加えたい、なんて時はいちいちNodeの環境を準備、周知し、 ビルドしつつ開発する方が面倒。 開発陣が入れ替わる ずっと同じリーダーが開発の深い部分まで指揮していない場合もある。 そういった場合はメインの
FluxもMVCも不要？コンポーネント指向Webプログラミング - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? （※2016/07追記： redux使ってみたら悪くなかったので宗旨替えしました。こちらの記事とかをどうぞ。http://qiita.com/uryyyyyyy/items/7d4b0ede3f2b973d6951 ） タイトルは半分くらい釣りですが、半分くらい本気です。 目的 Fluxわからん Facebook公式の例の図を見て、「うっ、複雑だ。。。」って受け付けなかった人は僕だけじゃないと思ってます。 そのわりにはメリットもピンとこないし実装も乱立していて、正直『MVC』『オブジェクト指向』のようにバズワード化してる印象を受けていま
ソースコードを美しくデザインする - Qiita
はじめに 以前こんな記事を投稿しました。ノンデザイナー・デザイン初心者向け、デザイン虎の巻 上記記事では、デザインという漠然とした問いに対して、キモとなりそうな点をツラツラと挙げています。その中でレイアウトを知るという項目があります。これはプログラミングにおいても役に立つ重要な知識ではないかと思いました。 そこでレイアウトという1デザインメソッドをベースに、ソースコードの整形について具体的に考えてみました。もし何かの参考になれば幸いです。 前提条件 ここでのデザインとは設計のような上流・大きなものではなく、コードの見た目に関すること、表面的で単純なものです 名前やコメントの整形もある意味デザインとしても考えられますが、ここではレイアウトのみを取り上げたいと思います サンプルコードはJavaScriptになります（考え方なので他言語でも応用できるかと思います） 目次 デザインのおさらい 良い
intro-to-aop
複雑なアプリケーションではロギング、 トレーシング 、メトリクスといったサポートの機能により、関数にすぐ負荷がかかってしまいます。これらのコードブロックはあらゆるコードベース上でそれぞれ少し変形して繰り返し使用されるのですが、これを 横断的関心事(cross-cutting concerns) と言います。 アスペクト指向プログラミング （AOP）は、アスペクトと呼ばれるモジュール内にコードブロックを引き入れて、 関心の分離 (separation of concerns)を手助けします。 AOPの実装 Phoneクラス ^(1) 不自然な例だというのは承知の上で、 dial メソッド1つを使って簡単なPhoneクラスを構築してみました。 function Phone() {}; Phone.prototype.dial = function (friend) { var start =
JavaScript Patterns
A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM and browser patterns (upcoming). Patterns collected while developing 喜感网. General Patterns Function Declarations - creating anonymous functions and assigning t
最強オブジェクト指向言語 JavaScript 再入門！
この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
技術選定の審美眼 / Understanding the Spiral of Technologies
複雑なJavaScriptアプリケーションに立ち向かうためのアーキテクチャ
jQueryでやるView Component - Qiita
How is the state of the applications maintained efficiently using jQuery or similar libraries? See the description for more details! - Hashnode
Laravel
yoshiko
Nyle Engineering Blog
