JavaScriptデザインパターン入門 - Qiita
1. はじめに JavaScriptデザインパターンは、JavaScriptを使ってプログラムを書くときによく出くわす問題を解決するためのガイドです。これらのパターンの背後にある考え方を理解することで、自分の問題に適用することができます。また、これらのパターンが自分のコードに役立つ場合を見つけることもできます。 2. モジュールパターン モジュールパターンは、JavaScriptのモジュールシステムの一部で、データを保護する方法を提供します。これは、モジュール内のプライベートなデータと動作を保護し、一方で公開APIを提供する方法です。これにより、プライベートとパブリックのアクセスレベルを持つ自己完結型のモジュールオブジェクトを作成することができます。 これは、JavaやC++のような言語でクラスにアクセス修飾子を使用するのに似ています。 JavaScriptでは、クロージャを使用してモジュ
React component patterns
Inspired by a technical talk I’m giving for a Meetup, I wanted to take a moment and share what I’ve learned on React component patterns. Components are the heart of React, so understanding how to utilize them is paramount to creating great design structures. The diagrams provided are from an excellent talk that Michael Chan gave on React component patterns. I highly recommend watching the video. W
イベントモデルの概念と用語法が混乱しているので、イライライするんですが - 檜山正幸のキマイラ飼育記 (はてなBlog)
[追記 dateTime="2007-12-07 夕刻"]あーっ、今ごろ気付いた。イライライって「イ」がひとつ多いや。タイトルを編集すると、なんか悪いことが起こったりしませんかね？ うーん、いいや。typoしたままにしとこう。ちなみに、「イライライ」は回文になっているぞ。[/追記][追記 date = "2007-12-11"]http://d.hatena.ne.jp/keyword/%a5%a4%a5%e9%a5%a4%a5%e9%a5%a4 [/追記] いつか文句言ってやろうと思っていた件ですよ。長いぞ。 内容： 似てるけど少しずつ違うイベントモデル達 イベントターゲット イベントフロー EventTargetインターフェース イベントハンドラーとイベントリスナー リスナーとハンドラーについてもう少し イベント伝搬とハンドラー実行 イベントの通過または出現 イベントタイプ 「イベント
早わかり イベントモデル - 檜山正幸のキマイラ飼育記 (はてなBlog)
「イベントモデルの概念と用語法が混乱しているので、イライライするんですが」が随分長くなったので、その要点を箇条書きにまとめておきます。 Javaイベントモデルにおけるイベントソースを、DOMイベントモデルではイベントターゲットと呼ぶ。 DOMツリー内をイベントが伝搬する運動過程をイベントフローと呼ぶ。 イベントフローのときに通過するノードの列をチェインと呼ぶ。チェインの両端は、ルートノードとイベントターゲット・ノードである。 イベントフローは、キャプチャリング・フェイズ、ターゲット・フェイズ、バブリング・フェイズの3つの部分に分けられる。 イベントフローのチェインに含まれるノードは、EventTargetインターフェースを実装する必要がある。 「イベントフローの折り返し点＝チェインの端点」であるイベントターゲットと、EventTargetインターフェースおよびEventTargetを実装し
JavaScriptのPromiseオブジェクトについて調べた事 (2) | QUARTETCOM TECH BLOG
目次へ戻る 2) Promiseとは何か ひと昔前の非同期処理では、メソッドにコールバックを渡す手法が取られてきました。コールバックの渡し方や扱いはライブラリによって決定されます。そこで、非同期処理の手法をオブジェクトとして定義すれば様々なライブラリ間で共通した表現ができると考えられたのが Promise です。 Promiseとは非同期処理を抽象化したオブジェクトと、それを操作する仕組みの事を言います。 Promiseオブジェクトの定義 Promiseオブジェクトがどのような表現を持っているかは CommonJS で定義されています。Promiseオブジェクトの表現方法は段階によって分かれており、Promises/A,Promises/B…のような名前が付いています。 ECMAScript6で定義されているPromiseオブジェクトは Promises/A+ というコミュニティベースの仕
JavaScriptの非同期処理Promise・async awaitを学んでみた | Wedding Park CREATORS Blog
こんにちは、サーバーサイドエンジニアの菅原です。 今回はJavaScriptの非同期処理について今更ながら学んでみました。昔ながらのCallback、ES6から追加されたPromise、ES7から追加されたasync await、さらにはRxJsについても調べてみました。 背景 昨今はUXの需要の高まりから非同期処理を書くことが多くなり、リアルタイム性やチャット機能、パフォーマンス改善のためにも非同期処理のコードを書くことが増えています。ただ非同期処理のJavaScriptのコードは処理が増えるごとにコールバック地獄と呼ばれる可読性が損なわれる危険性があることも事実です。 今回は以下のプログラミング条件から非同期処理について簡単なコードを用いての紹介と補足でRxJsを用いた非同期処理を紹介していきます。 実行プログラムの条件 1, 認証ユーザかチェックを行う。 2, 1が成功するとウエパち
[JavaScript] sleep(setTimeout) を Promise化する | DevelopersIO
はじめに おばんです、ダイエットが捗らない田中です。 さて、今回は sleep と Promise についてちょっとしたTipsをまとめます。 sleep は非同期処理を擬似的に作り出す時などに有用で、 Promise で扱いたいシーンがたまにあるので紹介します。 setTimeout JavaScriptには処理を一時停止させる sleep 関数が存在しません。処理を一時停止させたり、待ちを発生させたい場合は setTimeout 関数を利用して実現する方法があります。 const printHoge = () => { console.log('Hoge') } setTimeout(printHoge, 5000) // Hoge <- 5秒後にコンソールに出力される sleep(setTimeout) を Promise化する 連続した非同期処理を書くときによく使う言語機能として
![[JavaScript] sleep(setTimeout) を Promise化する | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c530ac8058349624341e83c42577b3ded88f3e6/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F09%2Fnodejs.png)
JavaScript の Promise: 概要 | Articles | web.dev
Promise を使用すると、遅延計算と非同期計算を簡素化できます。プロミスは、まだ完了していないオペレーションを表します。 デベロッパーの皆様、ウェブ開発の歴史において重要な瞬間に備えてください。 [ドラムロールが始まる] JavaScript に Promise が登場しました。 [花火が爆発し、きらめく紙が降り注ぎ、観客が歓声を上げる] この時点で、お客様は次のいずれかのカテゴリに該当します。 周囲の人々が歓声を上げていますが、何が起きているのかわかりません。「約束」が何なのかさえわからないかもしれません。肩をすくめようとしますが、キラキラした紙の重みが肩にのしかかってきます。心配しないでください。私もこの件に注意を払うべき理由を理解するのにかなり時間がかかりました。最初から始めることをおすすめします。 空気をパンチします。そろそろですね。Promise は以前に使用したことがありま
JavaScript: 5分でわかるPromiseの基礎（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: JavaScript: Learn Promises - JavaScript Promises made easy. Learn the basics in 5 minutes. 原文公開日: 2017/10/31 著者: Brandon Morelli サイト: https://codeburst.io/ 更新情報: 2017/11/16: 初版公開 2021/03/05: 更新 JavaScriptのPromiseをわかりやすく解説しました。Promiseの基本を5分で学びましょう。 この記事で学べること 本チュートリアルでは、JavaScriptの「Promise」の基礎を学びます。Promiseのすべてを網羅的に説明するものではありませんが、Promiseを理解してコードで使い始めるのに必要な知識を固めることができます。
JavaScriptのPromiseオブジェクトについて調べた事 (5) | QUARTETCOM TECH BLOG
目次へ戻る 5) Thenable Promiseオブジェクトはthen()メソッドを持ちます。then()にはPromiseオブジェクトの状態が fulfilled または rejected に変化した時の処理をコールバック関数として渡すことができます。この事を Thenable と呼びます。 thenの引数 then()はonFulfilled onRejectedの2つの引数を取ります。ここには処理が成功した時、失敗した時、それぞれのコールバックを渡します。 promise.then(onFulfilled, onRejected) promise .then( function(){ console.info('fulfilled'); }, function(){ console.error('rejected'); } );
AngularのLifecycle Hooksを理解する
Angularのコンポーネントやディレクティブには Lifecycle Hooks（ライフサイクルフック） という仕組みがあり、コンポーネントの変化にあわせてコールバックを設定できます。これによりコンポーネントのデータやビューの変更時の処理を追加できます。 コンポーネント志向のAngularアプリケーションの構築では、Lifecycle Hooks の理解が不可欠です。 今回は Lifecycle Hooks の基本的な仕組みを紹介します。 Lifecycle Hooksとは 記事の冒頭でも説明したように、Lifecycle Hooks はコンポーネントやディレクティブが変化（作成・変更・破棄）するタイミングで実行されるコールバックメソッドの総称です。 例えば、次のようなケースで利用します。 コンポーネントの初期化時にHttpクライアントでデータを取得する。親コンポーネントの初期化時に、子
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue コンポーネント実装パターン
New Features for Developing AngularJS Applications - Part 1: Component-Based Architecture
Angular Component Design Anti-Patterns
Microsoft Word - Technical design for AngularJS-apps in UML.docx
JavaScript Promise デザインパターン - エラーハンドリング , reduce を使った可変長非同期逐次処理 , キャンセル可能なPromise , イベントループなど - - Qiita
JavaScriptのasync/awaitがPromiseよりもっと良い - Qiita
Here is what you need to know about dynamic components in Angular | HackerNoon
Moving Angular Factories to Services With Classes - codelord.net
JavaScriptの非同期処理まとめ::Promise編 - Qiita
