SOLID原則を理解し、JavaScriptで実践するためのガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
ソフトウェア開発者にとって、堅牢でテスト可能で拡張性があり、保守性の高いオブジェクト指向のソフトウェアシステムを設計することは重要です。 そこで登場するのがSOLID原則です。 SOLIDは、ソフトウェア開発中に生じるかもしれない特定の問題を解決するために5つの設計原則が組み合わさったセットです。 この記事では、SOLID設計の原則について詳しく学んでいきます。 具体的には、SOLID原則が何を意味しているのか、各部分がそれぞれ何を表しているのか、また実際のプログラム例を挙げながら現役のプログラマーが説明します。 さらに、JavaScriptを使ってこれらの原則を実装する方法も紹介します。 SOLID設計原則とは？ 単一責任原則 (SRP) Open/Closed原則 リスコフ置換原理 (LSP) インターフェース分離原則 (ISP) 依存関係逆転の原則 最後に SOLID設計原則とは？
【JavaScript】初心者にもわかるPromiseの使い方 - TECH PLAY Magazine
JavaScriptのPromiseを聞いたことはあるでしょうか？ 非同期処理を行うときに使う・・・くらいのことは聞いた人がいるかもしれません。 この記事ではJavaScriptのPromiseを使った何ができるかを、サンプルコードを使いながら解説します。 JavaScriptのPromiseとは何なのかを、非同期処理とコールバックを交えて解説します。 またサンプルコードを使って、Promiseを単独およびチェインで実行する方法から、同時に複数の非同期処理を実行する方法まで解説を行います。 最後にエラーハンドリングについても、簡単に説明します。 Promiseとは PromiseとはJavaScriptにおいて、非同期処理の操作が完了したときに結果を返すものです。 非同期処理とは、ある処理が実行されてから終わるまで待たずに、次に控えている別の処理を行うことです。 なぜこのような仕組みがある
7 JavaScript Design Patterns Every developer should know
Design patterns in JavaScript are reusable solutions applied to commonly occurring problems in writing JavaScript web applications. It is quite appropriate to refer JavaScript design patterns as templates to provide solutions to problems but not quite to say that these patterns can replace the developers. Design patterns help combine experiences of many developers to structure the codes in an opti
25+ JavaScript Shorthand Coding Techniques — SitePoint
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. This really is a must read for any JavaScript developer. We’ve written this guide to shorthand JavaScript coding techniques that we’ve picked up over the years. To help you understand what is going on, we’ve in
Webpackで始めるVue.js - log.pocka.io
#まえがきこの記事はWebpackを使って単一ファイルコンポーネント(Single File Component)のVueアプリケーションを作るチュートリアルです。 公式の日本語ドキュメントはかなりしっかりしています。 しかし、vue-cliを使わない通常の開発フローに沿ったチュートリアルや、単一ファイルコンポーネントの使い方等、実際に使うにあたって必要な情報がかなり少ないです。 本記事ではその部分のカバーをすることを目的とします。 対象読者は フロントエンド開発の知識がある(JSやCSSのコンパイル等) npmを用いた開発フローをある程度知っている Vue.jsの名前くらいは知っている 最近のJavascriptがある程度書ける くらいの人を想定しています。 #つくるものこのチュートリアルでは、Vue.jsを使ったカウンターアプリを作ります。 JSファイルのビルドにはWebpackを、各
Redirecting…
Redirecting… Click here if you are not redirected.
【JavaScript】デザインパターンを知ってみる。モジュール・パターン編 | バシャログ。
JavaScriptで書くデザインパターンが気になっているので、手始めに一番よく見ているであろうモジュール・パターンについていろいろ調べてみました。 なぜ使うの？ モジュール・パターンは名前の通り、処理を他の処理とぶつからないように安全に切り離し、モジュールの形として提供する考え方です。YUI などの大規模なフレームワークから小さなライブラリにも取り入れられています。以下のようなメリットがあります。 グローバル変数を極力減らして、機能をモジュールの形で提供できる。 コードの成長に合わせて構造を作れる コードを見通しやすくする 要件に応じて追加、置き換え、削除ができる シンプルな書き方 Sample というオブジェクトを作って、いろいろ便利な機能をつけていきたい、という場合、下記のような書き方ができます。 var Sample = { name: 'sampleくん', age: '30',
Underscore.jsがちょっと便利だったので紹介してみる。 - (define -ayalog '())
数日前@naoiwata師匠に「JavaScriptにパターンマッチってないですよね？」って聞いていたら「Underscore.jsならあるかも」みたいなことをそそのかされたので少し触ってみた。 Underscore.jsは関数型プログラミングをしたい人のための軽量ライブラリだという認識でだいたい良いと思います。最近、「JavaScriptで学ぶ関数型プログラミング」みたいな本も出ているみたいで、ちょっと中身みたけどUnderscore.jsの使い方ぽい感じの本だったので興味ある人は読んでみるといいかと*1。 ちなみに僕が求めているパターンマッチは文字列の正規表現ではなくて、関数型言語でいわれるようなパターンマッチ。Gaucheのutil.match的なやつ。 で、とりあえずUnderscore.jsなんぞということでバーっとひと通りみてみた。 Underscore.js だいたい大きく6
自作オブジェクトのイベントのやりとりにはjQuery.triggerではなくjQuery.triggerHandlerを使うほうがよいと思った - hitode909の日記
DOMオブジェクトには昔からdispatchEventとか，addEventListenerとかあって，最近だと，node.jsのEventEmitterとか，jQueryのon, triggerを使って自作のオブジェクト間でアプリケーション的に定義されたイベントをやりとりできる． これまで，自作オブジェクトからイベントを発行するのに，jQueryのtriggerを使ってたけど，意図しない挙動をすることがあることが分かって，triggerHandlerを使うように変えた． jQuery.trigger()は，イベントタイプと一致する関数をレシーバが持ってるとき，その関数が呼ばれる． イベントのやりとりと，メソッドの呼び出しは独立しているというイメージがあったので，うっかり同名のメソッドを定義したときに，一見するとよく分からない挙動になって，難しい． なので，自作オブジェクトがイベントを発行
JavaScript イディオム集
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
JavaScriptと非同期のエラー処理
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。前回のコールバック地獄に関する記事では、複雑な入れ子になりやすい非同期処理でも、GeneratorやjQuery.Deferredを使うことで、同期的な見た目に変形できることを示しました。 ところで、非同期処理においてはもう一つ「 エラー処理に例外が使えない 」という問題があります。今回はエラー処理について考えてみたいと思います。 例外を使ったエラー処理 非同期処理の話の前に、一度「例外」についておさらいしておきましょう。JavaScriptに限らず、エラーと言えばよく例外を使って記述されます。 「Web APIから500が返ってきた」とか「入力された値が期待する型
JavaScript のスコープチェーンとクロージャを理解する - tacamy--blog
前回で JavaScript のスコープの基本がわかったので、今回はスコープチェーンとクロージャを勉強してみました。 Call オブジェクトとクロージャの理解がかなり大変でした・・。 変数オブジェクト JavaScript で変数の宣言と参照をするということは、変数オブジェクトを読み書きするということです。 変数オブジェクトというのは、key と value による変数管理専用のハッシュテーブルのこと key が変数名、value が値のセットになっているテーブルで、変数の数だけレコードができるイメージ 変数オブジェクトはプログラマが意識することのない、便宜的なオブジェクト グローバルオブジェクト JavaScript は、ブラウザが新しいページを読み込んだとき、内部的に新しいグローバルオブジェクトを生成して初期化します。 グローバルオブジェクトとは、グローバル変数やグローバル関数を管理す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[archived] axiosを乗りこなす機能についての知見集 - Qiita![[archived] axiosを乗りこなす機能についての知見集 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/583ec1354ea8325181eb276736da3bb0366cb4bc/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-1150d8b18a7c15795b701a55ae908f94.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-4.0.0%2526w%253D840%2526h%253D380%2526txt%253D%25255Barchived%25255D%252520axios%2525E3%252582%252592%2525E4%2525B9%252597%2525E3%252582%25258A%2525E3%252581%252593%2525E3%252581%2525AA%2525E3%252581%252599%2525E6%2525A9%25259F%2525E8%252583%2525BD%2525E3%252581%2525AB%2525E3%252581%2525A4%2525E3%252581%252584%2525E3%252581%2525A6%2525E3%252581%2525AE%2525E7%25259F%2525A5%2525E8%2525A6%25258B%2525E9%25259B%252586%2526txt-color%253D%252523333%2526txt-font%253DHiragino%252520Sans%252520W6%2526txt-size%253D54%2526txt-clip%253Dellipsis%2526txt-align%253Dcenter%25252Cmiddle%2526s%253D9fd6ce4b873b0d9b4303be66ddf96230%26mark-align%3Dcenter%252Cmiddle%26blend%3Dhttps%253A%252F%252Fqiita-user-contents.imgix.net%252F~text%253Fixlib%253Drb-4.0.0%2526w%253D840%2526h%253D500%2526txt%253D%252540terrierscript%2526txt-color%253D%252523333%2526txt-font%253DHiragino%252520Sans%252520W6%2526txt-size%253D45%2526txt-align%253Dright%25252Cbottom%2526s%253Ded893b7eabdaa75da91d28680de5bf50%26blend-align%3Dcenter%252Cmiddle%26blend-mode%3Dnormal%26s%3Dd9427075b852d6cdee41a35d51f55c6f)