【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
TypeScript Tutorial For Beginners: Your Friendly Guide
Published: Sep 23, 2019 - Last updated: Feb 7, 2020 Table of Contents TypeScript tutorial for beginners: who this guide is for The following guide is a TypeScript tutorial for JavaScript developers interested in learning more about TypeScript. That means a decent knowledge of "vanilla" JavaScript is appreciated, even though I'll give you pointers to the fundamentals as we go. Do the words TypeScri
Google Apps ScriptsでTypescriptが超簡単に使えるようになった！ - アクトインディ開発者ブログ
morishitaです。 Cloud Functions と並ぶ(?)Google のサーバレスな JavaScript 実行環境といえば Google Apps Scripts（GAS）です。 GAS ってあの Excel で言う VB スクリプト環境のようなものでしょう？ と思ったあなた！ このエントリでその認識が変わると思います。 以前は使いやすいとは言い難かったGASですが、最近は使いやすくなってきました。 といっても、GAS 自体がアップデートされたのではなく周辺ツールが整備が進み開発・運用しやすい状況が整ってきたからです。 そして、なんと最近Typescript でとても実装しやすくなったので、それをご紹介したいと思います。 google/clasp 以前の GAS は Web エディタ上でしか実装できず、コードを VCS で管理することもままならない状況でしたが、Google
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
レコメンドシステム入門 Javascriptで実装する｜es
レコメンド（推薦システム）に関して素晴らしい記事があったので訳してみました。訳に難があるが、そこはご勘弁ください。 プログラム実行してみると理解できると思います。入門者に打って付けの記事です。 以下、本文。 インターネットの世界はレコメンドで溢れていますね。 Amazonのように商品を購入するeコマース・サイト、Facebookのようなソーシャルネットワーク、YoutubeやNetflixのようなビデオ/映画サイトなど。これらのサイトに共通するのは、あなたに新しいものを推薦するために、映画、商品と友人などの過去のデータを使うことです。 この記事では、レコメンド機能がJavaScriptで、どのように動くか簡単に紹介します。推薦システムを実現するための、異なるアプローチも見ていきます。最終的にはアルゴリズムを切り替えただけで、結果を出力できるようにします。映画評論家の小さいデータセットと、M
Webpack の考え方について - mizchi's blog
なぜ初心者は webpackが解らないのか？- Why can’t you understand the webpack? - from 健人 井関 www.slideshare.net この記事バズってたけど、わからない人がよりわからなくなる、という点で問題だと思っていて、webpack の目的の本質的な部分から整理する必要があると思います。 (あと友人が webpack に挑戦していたので入門資料も兼ねてる) Webpack の本質的な部分は次の3つです。それ以外は全部おまけ機能だと思ってよいです。 ES Modules のエミュレート node_modules のリンカ 拡張子ごとの変形 Webpack が本当にやりたいこと こういうコードがあるとします。 // src/a.js export default () => console.log('hello'); // src/in
アロー関数が実装された - JS.next
概要 ES2015を象徴する機能である、アロー関数構文の実装がついにV8で始まった。 無名関数を短く書ける [3.28.31] アロー関数は無名関数の省略記法である。 今までこう書いていたのが、 var fn = function (a, b) { } こうスッキリ書ける。 var fn = (a, b) => { } 「=>」が矢のように見えることから「アロー」関数と言う。 更に短くできる これが、 [1, 2, 3].map( function (v) { return v * v } ) // [1, 4, 9] アロー関数だとこうなるが、 [1, 2, 3].map( (v) => { return v * v } ) // [1, 4, 9] 引数が一つの時には「()」を省略できるので、こう書ける。 [1, 2, 3].map( v => { return v * v } )
jQuery だけで Single Page Application を作る方法 - Qiita
ぶっちゃけ誰も得しないけど、一度作った経験がある(ただしそれはJSONで動的データを読み込んだりはしないが)ので、一応できるんだぜということを示すために作った。 https://github.com/srd7/jquery-spa-sample 注意 with-webpack は、webpack を利用して jquery と自作コードをまとめあげている。ただしクライアントサイド的には依存ライブラリは jquery のみ。いやまぁ Jade を読み込んだりはしてますけども・・・。 なので「jQueryだけじゃねーじゃん」というツッコミを受けそうなのでonly-jqueryというのを作った。 ただしこれは with-webpack のコードをコピペして手動で一つのファイルにまとめあげた感じ。 その他の違いとして、with-webpack Jade -> HTML に変換した HTML を Ja
JavaScript開発者が一度は読むべきStackOverflow - Qiita
10.How do JavaScript closures work? http://stackoverflow.com/questions/111102/how-do-javascript-closures-work JavaScriptのクロージャーについて 結構とっつきにくい「クロージャー」に苦労されている人も多いかもしれませんが、サンプルコードが多いので英語わからなくても助かります 個人的にはQuestionの「Like the old Albert Einstein said: ... 」というくだりが好きw 9. What does “use strict” do in JavaScript, and what is the reasoning behind it? http://stackoverflow.com/questions/1335851/what-does-use
大規模Reactアプリケーションを構築するためのベストプラクティス | POSTD
Sift Scienceで製作にReactを使い始めてからほぼ1年になりました。その間、Backbone+Reactという フランケンシュタインのような 複合アプリケーションを、Reactコンポーネントからなる、かなり大きな1つの階層に育て上げました。この記事では、UI不和を最小限にしながら、コードベースをスケーリングするために役立った技法とベストプラクティスを紹介します。また、一般的なコンポーネントのデザインパターンについて、いくつか説明します。 この記事が皆さんの時間の節約と精神衛生の維持に役立ち、UIが複雑になってもReactコードベースの保全性を維持する（破綻するのではなく）ための新しいツールを提供できれば幸いです。 componentDidUpdateで、もっとできる Reactの本質は、DOMの更新というタスクを命令的なものから宣言的なものに変えるということです。他のタイプの命
JSで切り替えたページにBackで戻れるようにする - Qiita
ページを読み込み直さずにJavaScriptでタブ切り替えやページャーで表示を変えた場合、そこからリンクをクリック等で別のページに遷移した後にブラウザのBackやhistory.backで戻って来ると、初期表示のページになってしまいます。 そこで、HTML5で導入されたhistory.replaceState()を使って現在の履歴を表示状態を含むものに書き換えて、Backで遷移直前の表示状態に戻れるようにします。 以下、jquery.pajinateを使ったページングがあるページを例に挙げます。 <div id="link-list"> <ul class="content"> <li><a href="path/detail/page1.html">リンク1</a></li> <li><a href="path/detail/page2.html">リンク2</a></li> ・・・ <
Node.jsフロー制御 Part 1 – コールバック地獄 vs. Async vs. Highland | POSTD
（このシリーズのPart 2はこちら: Node.jsフロー制御 Part 2 – FiberとGenerator ） 今回は、JavaScript/node.jsアプリケーションのフロー制御に対するアプローチを、いくつか取り上げて比較してみたいと思います。 通常のコールバックを使う 平坦化されたコールバックを使う Async （ @caolan 作）を使う Highland （こちらも @caolan 作）を使う Bluebird （ @petkaantonov 作）を使う Expressフレームワークを使った以下のルート処理（お粗末ですが）を例に見てみましょう。 ファイルから読み込む いくつかのプロセスを実行する（ステップの数は3つ） プロセスとは、単に拡張データをコールバックする任意の非同期処理を指します ファイルに結果を書き出す リクエストに対して成功またはエラーのメッセージを返す
「React / Flux を実案件で使ってみた」その後
改めて覗いてみよう 1) CheckboxWithLabel changes the text after click: AssertionError: # /path/to/test/components/CheckboxWithLabel_test.jsx:21 assert(label.getDOMNode().textContent === 'On') | | | | | | "Off" false | HTMLLabelElement{htmlFor:"",form:null,accessKey:"",control:HTMLInputElement{src:"",valueAsNumber:NaN,incremental:false,defaultChecked:false,form:null,multiple:false,list:null,size:20,checked:f
AngularJS についての所感
AgularJS に対する気持ち 所感といいつつ、主に自分がつらさとして感じていることを書く。所感シリーズとしては jQueryについての所感 も併せて読みたい。 この学習曲線の中でいうと、たぶん今の自分は Very Cool! の頂点から降りている最中くらいだと思う。そして、マサカリをふりかぶった諸兄にひとつだけ言いたいのは、共感脳を養った方がモテるということだ。 チキンハート的弁解: 以下はAngularJSに関するつらさを述べることに専念するために、美点を挙げていないだけであってAngularJSを全方位的に貶めたり、何かと比べて明確にクソだというような意図はない。 画像は AngularJS: The Best Parts · Anand Mani Sankar からの引用。X軸にある www.bennadel.com は AngularJS 大好きさん。 辛1. $scope が
ES6時代のJavaScript - クックパッド開発者ブログ
こんにちは会員事業部の丸山@h13i32maruです。 最近のWebフロントエンドの変化は非常に激しく、ちょっと目を離した間にどんどん新しいものが出てきますよね。そんな激しい変化の一つとしてES6という次期JavaScriptの仕様があります。このES6は現在策定中で、執筆時点ではDraft Rev31が公開されています。 JavaScriptはECMAScript(ECMA262)という仕様をもとに実装されています。 現在のモダンなWebブラウザはECMAScript 5.1th EditionをもとにしたJavaScript実行エンジンを搭載しています。 そして次のバージョンであるECMAScript 6th Editionが現在策定中で、略称としてES6という名前がよく使われます。 今回は、他の言語にはあってJavaScriptにも欲しいなと思っていた機能や、JavaScriptでよ
jQueryでaリンクにイベントを設定するモダンな書き方を教えてください リンクにクリックイベントを設定するとき 最初 <a href="#" onClick="jump(1);">ページ１<…
jQueryでaリンクにイベントを設定するモダンな書き方を教えてください リンクにクリックイベントを設定するとき 最初 <a href="#" onClick="jump(1);">ページ１</a> <a href="#" onClick="jump(2);">ページ２</a> function jump(page) { location.href = 'http://hoge' + page; } としてましたが、なんとなくjQueryでロード時にイベントを設定する方が良いのかなと思って、以下のように直しました $(function(){ $("#one").click(function(){ location.href = 'http://hoge' + 1; }); $("#two").click(function(){ location.href = 'http://hoge' +
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript: 通常の関数とアロー関数の違いは「書き方だけ」ではない。異なる性質が10個ほどある。 - Qiita
https://www.boxfactura.com/pulltorefresh.js/