タグ

JavaScriptに関するgokichanのブックマーク (9)

  • JavaScriptでも単体テストを導入しよう!ってかテストって何?

    昔はお遊び程度の使われ方をしていたJavaScriptも、格的な開発に使われるようになってからだいぶ経ちました。 開発の規模が大きくなってくると、どうしても「テスト」という考え方からは逃れられません。そこで、JavaScriptの開発でもテストを導入してみましょう。 この記事では、「JavaScriptのテストってどうするの」という方や「そもそもテストって何」という方に向けて、JavaScriptにおけるテストについて紹介します。 テストってなんだろう 個人で普通にプログラミングしていると「テスト」という単語にはなかなか触れる機会がないと思います。ですが、プロジェクトがそこそこの規模になってくるとテストは非常に重要になってきます。 まずはテストとはなんなのか、どういった効果があるのかについて説明します。 単体テスト(ユニットテスト) プログラミングにおいて、特に小さな規模の開発においては

    JavaScriptでも単体テストを導入しよう!ってかテストって何?
  • Promiseとasync/awaitを用いた非同期処理の実装

    Promiseとasync/awaitを用いたJavaScriptの非同期処理について記述していきたいと思います。JavaScriptでは外部サーバと情報をやり取りする際に非同期処理を行います。従来JavaScriptではコールバックを用いて非同期処理を行っていました。しかしこのコールバックというものは、なかなかの曲者で多くの問題を抱えています。一番の問題は連続で非同期処理を行う際です。例えば以下のようなケースです。 salesforce組織にログイン認証を行う 取引先の住所を取得する 取引先の住所から、最寄りのレストランの情報を取得する 画像を読み込む 画像をリサイズし描画する 上の①~⑤の処理は全て一つ一つ順番に処理をしなければならない非同期処理です。コールバックのみで記述しようとすると、上記のケースではどうしても処理全体をまとめてテストしなければならなくなります。 ES6、ES7で登

    Promiseとasync/awaitを用いた非同期処理の実装
    gokichan
    gokichan 2020/09/21
    imageのロードをasync awaitで
  • JavaScriptライブラリbluebirdでPromiseを簡単に作る | KEYPOINT – キー・ポイント株式会社 開発日誌

    前回に引き続き、今回も、JavaScriptのPromise関連の記事です。 今回は、JavaScriptライブラリのbluebirdを使って、コールバックで非同期処理を行う関数を簡単にPromiseを返す関数に変換する方法を紹介します。 bluebirdとは bluebirdとは、Promiseを実装したJavaScriptのライブラリです。現在、多くのブラウザやNode.jsなどのJavaScript実行環境では、Promiseが標準で対応されていますが、IEなどの未対応の環境でも、bluebirdを利用することでPromiseを使えるようになります。 それだけでなく、bluebirdにはES2015の標準の仕様にない便利な関数があり、Promiseに対応している環境でも便利なライブラリです。 bluebirdのpromisify、promisifyAllでPromiseを返す関数を作

  • PromiseベースでImage().onloadする - Qiita

    やりたいこと JavaScriptで、画像の width/height が知りたいとき、以下のようにする。 const img = new Image(); img.onload = () => { console.log(img.width, img.height); } img.src = '画像のパス'; img.src にパスをつっこんで、読み込み完了したタイミングで onload が走る。 このとき、 onload で完了を待たずに img.width などとしても0が返される(読み込み完了前の値が返される)。 これを Promise ベースで書いて、 async/await や、 then/catch の構文で使えると便利なのでは。 結果 こう書ける。Imageに限らず、onloadにコールバック指定する系はだいたい書き換え可能。 new Promise((resolve, r

    PromiseベースでImage().onloadする - Qiita
  • JavascriptのAjaxについての基本まとめ - Qiita

    Ajaxとは Asynchronous JavaScript + XMLの略。 すなわちJavascriptとXMLを使用して非同期(Asynchronous)でページ内容を更新する技術のこと。 ①クライアントから非同期更新に必要なデータをサーバに送る ②サーバはデータを受け取ってクライアントに整形済データを返す ③クライアントはサーバから受け取った整形済データをDOMに反映する ざっくりこのような流れでAjaxは実現されている。 クライアントからデータを送ったり、サーバから整形済データが返ってきたと検知するところにJavascriptのXTR(XMLHttpRequest)という技術が使われていて、返ってくる整形済データがXMLだったりするのでAsynchronous JavaScript + XMLと呼ばれている。 ただしXMLは名前だけ残っている感じで、今は返ってくるデータはJSON

    JavascriptのAjaxについての基本まとめ - Qiita
  • 面倒な作業不要で、Webアプリ開発が劇的にはかどる!至高のJavaScriptライブラリ6選 - paiza times

    どうも、まさとらん(@0310lan)です! 今回は、Webサービスやアプリ開発などにとても便利なJavaScriptライブラリを厳選してご紹介しようと思います! 強力な独自機能を簡単に追加できるものやトレンドに合わせたWebデザインを構築できるもの、そのままWebサービスとして利用できるものまで、ピックアップしてみました。 これからWeb開発を始めようという人はもちろんですが、開発ネタに困っている人も何か良いアイデアが発見できるかもしれないので、ぜひ参考にしてみてください! ■波形表示やプレイヤーも作れる高機能な音楽ライブラリ! 【 wavesurfer.js 】 音声ファイルを読み込むだけでグラフィカルな波形表示が可能で、多彩なオプションを利用することで自在に音声を制御できるJavaScriptライブラリです。 音声の再生・早送り・巻き戻し・ミュートなどの基機能はもちろん、音声の書き

    面倒な作業不要で、Webアプリ開発が劇的にはかどる!至高のJavaScriptライブラリ6選 - paiza times
  • Google流 JavaScript におけるクラス定義の実現方法

    目次 2019年追記 はじめに クラス実現のために必要な JavaScript の言語仕様 function this call new 演算子 prototype チェーン プロパティ: prototype Google Closure 流のクラスの実現方法の概要 クラスの宣言とコンストラクタの定義 メンバ変数 (インスタンス変数) メソッド定義と呼び出し private, protected 継承 プロトタイプチェーンを利用してメソッドを親クラスから引き継ぐ 親クラスのコンストラクタの呼び出し メソッドオーバーライドと親クラスのメソッドの呼び出し 多重継承 abstract, interface inherits の実際のコード 良くないクラス実現方法 ES6 のクラス 2019年追記 この記事ではclassが導入されたES6以前のJavaScriptでどのようにクラスに相当するものを

  • 第4回 JavaScriptでオブジェクト指向プログラミング ― @IT

    JavaScriptが、いま注目を浴びている。 JavaScriptがこれだけの注目を浴びた理由の1つとして、Ajax技術の登場とも相まって、JavaScriptに対する確かな理解の必要性が高まったという事情は否定できない。しかし、それだけでは説明できない急速な注目の理由として、もう1つ、JavaScriptという言語そのものが持つユニークさが開発者の目を引いたという点は看過できないだろう。 もっとも、このユニークさは同時に、多くの開発者が感じているJavaScriptに対する苦手意識と同義でもある。これまでVisual BasicやC#、Javaといった言語でオブジェクト指向構文になじんできた開発者にとって、JavaScriptのオブジェクト指向構文はいかにも奇異なものに映るのだ。ようやくクラスという概念を理解した開発者が、JavaScriptという言語の背後にたびたび見え隠れする「プロ

    第4回 JavaScriptでオブジェクト指向プログラミング ― @IT
  • JavaScript例文辞典

    ■基 [01]JavaScriptを定義する [02]外部JavaScriptファイルを読み込む [03]スタイルシートを定義する [04]NN3、NN4、NN6、IE4.x、IE5.xで動作するように記述する [05]NN4でのみ動作するように記述する [06]NN6でのみ動作するように記述する [07]IE4.x以上で動作するように記述する [08]IE5.x以上で動作するように記述する [09]IE5.5以上で動作するように記述する [10]ビヘイビアファイルを読み込む [11]IEとNN両方で動くように記述する [12]連続して関数を呼び出す [13]MacOS Xかどうか判別する [14]Safariのみ動作するように記述する [15]Safariのバージョンを返す [16]Operaのみ動作するように記述する ■構文 [01]変数に文字や数値を入れる [02]四則演算を行う

  • 1