タグ

JavaScriptに関するbenzinaのブックマーク (252)

  • 高階関数、カリー化、部分適用 - Qiita

    背景・動機 業務でReduxを利用していますが、公式サイトに以下のようなコードが現れビビったので調べました。

    高階関数、カリー化、部分適用 - Qiita
  • 拝啓 Google様、JavaScriptとJSONで動的に変化するページをインデックスしてください - Qiita

    今回のお悩み 「Google様に、Webページ「A.html」をインデックスしてもらいたい」 そう、Webサイトを作るすべての人たちの願いだよね。 ーー さて、今回インデックスしてもらいたいWebページ「A.html」はURLパラメータに応じて内容が変化するページである。 JavaScriptにより、URLパラメータに対応するデータを「data.json」から取得、レンダリングするというものだ(URLパラメータは「A.html?id=XX」と記述し、今回はid=1〜3まで存在するという設定)。 インデックスにはパラメータ別で登録したい。 つまり、id=1〜3の3ページ分を別々に登録する。 また、ページのタイトルやディスクリプションについても、パラメータごとに設定したものを検索結果に表示させたい。 最近のクローラーはJavaScriptでの処理も認識するとのことだが、果たして結果はー。 <!

    拝啓 Google様、JavaScriptとJSONで動的に変化するページをインデックスしてください - Qiita
  • 非同期処理ってどういうこと?JavaScriptで一から学ぶ - Qiita

    非同期処理ってよく聞くけどどういうことなのかいまいち分かっていなかったので、JavaScriptを題材に勉強がてら基的なところをまとめます。 非同期処理ってなに? プログラムって実行すると、コードを上から順に1行ずつ実行していきますね。 その処理の1つに時間のかかる処理があると、その実行が完了するまで、次の行には進みません。 例えば次のようなコード。実行環境はNode.js (v5.3.0) です。 処理の途中で5秒間sleepします。 console.log("start"); function sleep(milliSeconds) { var startTime = new Date().getTime(); while (new Date().getTime() < startTime + milliSeconds); console.log("sleepが完了しました。");

    非同期処理ってどういうこと?JavaScriptで一から学ぶ - Qiita
  • 弊社でのJavaScriptの書き方 - Qiita

    まあこれは弊社(Claves)での取り組み方(別に相談してないので独断ですらある)です。 多分そのうち陳腐化するので金科玉条のごとき扱いはしない方が良いです。 書くにあたった動機 若い人間がJavaScriptを書く場合に、 参照しているものが古い 便利なライブラリとかがあるのに再発明とかしてる Railsで書く場合にどう書けば良いのか などが整理されていないと感じた。 都度説明していたが三回をこえて面倒なので書き下すことにした。 JavaScript? TypeScript? 正直モダンに書くのであればJavaScriptでもTypeScriptでも良いと思っている。 構文的にはTypeScriptはモダンなJavaScriptに型、抽象クラスなどが追加されていると思って良いかと思う。 継承とかゴリゴリ書くのであればTypeScriptは便利だし、後述するReactなんかも TypeSc

    弊社でのJavaScriptの書き方 - Qiita
  • ウェブアプリ開発者とウェブサイト制作者の分断 | ClockMaker Blog

    さる平成30年6月23日(土)にサッポロクリエイティブキャンプ2018で「イマドキのウェブサイト制作の最前線」と題して発表してきました。 このとき発表した内容が、国内のフロントエンドエンジニアHTMLコーダーの間でバズったので紹介します。 両者の意見は「jQueryはオワコンなのか – ウェブアプリ開発者とウェブサイト制作者の大きな溝 – Togetter」にまとめてますので、参照ください。 ウェブアプリ開発者は積極的に新しいものを取り入れていこう、流行らせていこうという思いのもと、過去の技術を過剰に批判します。また、ウェブアプリ開発者の分野はウェブ全体の需要のなか少数であるにもかかわらず、彼らの声が大きいため、あたかもウェブ制作全体を指して言及しているように見受けられます。 実際のところ、大多数のウェブサイトの用途を意図して発言していることは多くはありません。具体例を挙げましょう。 ウ

    ウェブアプリ開発者とウェブサイト制作者の分断 | ClockMaker Blog
  • jQueryはオワコンなのか - ウェブアプリ開発者とウェブサイト制作者の大きな溝

    6/23に開催されたサッポロクリエイティブキャンプにて、フロントエンド技術概要を紹介。 ・多様化するウェブの用途の中で様々な技術が生まれている ・技術の選択肢が増えている ・AngularVueReactの役割と使い方 という話のあとで、jQueryの立ち位置に触れた。

    jQueryはオワコンなのか - ウェブアプリ開発者とウェブサイト制作者の大きな溝
  • フロントエンドのコンポーネント設計に立ち向かう - Qiita

    ReactVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コンポーネント設計?なにそれ?おいしいの?」という方 初めてコンポーネント設計でアプリ作ってみたけど、当にこれでいいのか自信の無い方 はじめに: "コンポーネント"とは まず最初に"コンポーネント"という言葉についてですが、ここでは「GUIのパーツをモジュー

    フロントエンドのコンポーネント設計に立ち向かう - Qiita
  • Papa Parse - Powerful CSV Parser for JavaScript

    The powerful, in-browser CSV parser for big boys and girls Download Demo Documentation // Parse CSV string var data = Papa.parse(csv); // Convert back to CSV var csv = Papa.unparse(data); // Parse local CSV file Papa.parse(file, { complete: function(results) { console.log("Finished:", results.data); } }); // Stream big file in worker thread Papa.parse(bigFile, { worker: true, step: function(result

    benzina
    benzina 2017/11/14
    CSV パースの JavaScript ライブラリ
  • JavaScriptの同期、非同期、コールバック、プロミス辺りを整理してみる - Qiita

    対象 このあたりの理解があいまいな方: JavaScriptは非同期で処理できる!? 並行処理と非同期処理って同じ!? そもそも同期と非同期って何が違う!? 非同期の結果はコールバックで受け取る!? コールバックを多用するとコールバック地獄に陥る!? Promiseを使うとコールバック地獄を回避できる!? JavaScriptの基礎 大前提として、JavaScriptはシングルスレッドで動いています。 これはつまり、JavaScriptは並行処理はできないということです。 同期であろうと非同期であろうと2つ以上の処理を同時に行なうことはできません。 JavaScriptでは、キューに登録された関数が順番にひとつずつ実行されていきます。 でもキューに登録される順番が同期であったり非同期であったりします。 JavaScript以外(例えばデータベース等)に仕事を任せてる間、その処理を待たないで

    JavaScriptの同期、非同期、コールバック、プロミス辺りを整理してみる - Qiita
  • memorandum

    存在しないユーザーです。

  • JavaScriptテスト自動化キホンのキ - Qiita

    if(add(1, 2) == 3) { console.log("テスト結果OK"); } else { console.log("テスト結果NG"); } のように、ひたすら泥臭いコードを書くハメになる可能性があります。(これは極端な例ですが) また、このままではテスト実行後の結果がとても分かり辛いです。 どんなテストに成功したのか/失敗したのか、全体でどれだけテストがあって、どれだけパスしたのか。 はたまた失敗した場合に、どんな部分がNGだったのか。 これらを解決するためにあるのが、テストフレームワークと呼ばれるものです。 Javaで言えばJUnitRubyではRSpec、PHPではPHPUnitPHPSpecなどが該当します。 こういったテストフレームワークを使うことで、テストを簡潔に分かりやすく書けるようになります。 また、こんな感じでテスト結果も見やすく出力してくれます。

    JavaScriptテスト自動化キホンのキ - Qiita
  • ChromeのデベロッパーツールでJSをデバッグする方法(2018年版) - ICS MEDIA

    JavaScriptのデバッグは必ず覚えておきたいウェブ開発の必須スキルの1つです。プログラムの実行をデバッグすることで現在の変数の値や、処理がどのように進んでいるのかを確認します。これを利用してプログラムが意図した動作になっているかの分析に役立てることができます。 記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」(以下「デベロッパーツール」)を使用してJavaScriptをデバッグする際の基的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、1つ一つ順番に試しながら読み進めてください。 この記事で学べること ・デベロッパーツールの使い方 ・JavaScriptのブレークポイントの使い方 ・実行中の変数

    ChromeのデベロッパーツールでJSをデバッグする方法(2018年版) - ICS MEDIA
  • JavascriptのChromeでのデバッグ方法個人的まとめ2016 - Qiita

    はじめに Javascript開発でよく使ってるデバッグ方法についての個人的なまとめです。 当たり前の事ばかりですが、これからJavascript開発をやる方や興味がある方に少しでもお役に立てればと思います。 デバッグの鉄板 console.log Javascriptの開発でconsole.logを使わない人を探すほうが難しいくらいだと思います。

    JavascriptのChromeでのデバッグ方法個人的まとめ2016 - Qiita
  • JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita

    論理演算子「&&」「||」について JavaScriptの基である論理演算子の && || について、 根的に勘違いをしていたことに最近気付いたので自戒の意味を込めてここに記します。 論理演算子の使い道 1. お馴染みの使い道「条件処理」 JavaScriptには皆さんご存知の通り論理演算子&& ||が存在します。 それぞれ「AND」「OR」という意味で、条件処理の中で使うことが多い演算子です。 // aとbに0または1を足し続ける // aとbのどちらかが最大値に達すると終了 var a = 0, b = 0, max = 50; // 条件式その1 AND while (a < max && b < max) { // 0または1を足す a += Math.round(Math.random()); b += Math.round(Math.random()); console.l

    JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita
  • 2017年版、5分でわかるJavaScript入門(ES6対応版) - paiza times

    こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 今、一番身近なプログラミング言語といえば、間違いなくJavaScriptです。 JavaScriptは、インターネット利用に必須のウェブブラウザ上で動作する唯一のプログラミング言語です。 プログラミングを学ぶ時も、いつも使っているブラウザ上で動作させることができて結果が見えるため、興味を持って始めるやすい言語かと思います。 JavaScriptには、広く使われていること、活発な開発、インターネットとの相性の良さ、非同期プログラミング、仕様が標準化されていること、オープンソースでの実装があること…などなどの特徴があり、今や以下のような様々な用途でも使われるようになっています。 ウェブブラウザ(Chrome, Firefox, Internet Explorer...) サーバアプリケーション(Node.js, Ex

    2017年版、5分でわかるJavaScript入門(ES6対応版) - paiza times
  • 食べられないほうのカリー化入門 - Qiita

    『カリー化』(Currying) という概念をご存知でしょうか。"Curry" はべ物のカレー(Curry)と同じスペルですが、ここでいう Curry はそれとは別のもので、多くのプログラミング言語に応用できるかもしれない、とても便利かもしれない概念です。 では教えてくれ。”カリー化”とはなんのことだ? 『ふたつの引数のうち、大きい方の数を返す』という機能を持った関数 max を実装したいとしましょう。そのようなとき、大抵は次のように定義すると思います。 この関数 _max も『大きい方の数を返す』という機能を持っていますが、_max は max とは呼び出し方が少し異なります。たとえば、_max で 1 と 2 のうち大きい方を求めるには、 _max(1)(2) のように書きます。 _max が通常の max と異なるところは、関数を呼び出すときに引数をひとつづつ渡すようになっていると

    食べられないほうのカリー化入門 - Qiita
  • クロージャの使用例

    今日は、クロージャの使用例を書きます。昔クロージャについて書きましたが、いまいち実際どういう場面で使われるのかイメージできてませんでした。

  • [JavaScript] 猿でもわかるクロージャ超入門 まとめ - DQNEO起業日記

    クロージャとは クロージャは、言葉で説明するのが大変難しい概念です。 あなたは、自転車の乗り方を、口だけで説明できるでしょうか? あなたは、螺旋(らせん)の形を、言葉だけで説明できるでしょうか? ずばり、できないでしょう。 しかし、自転車に乗ることはできますし、針金で螺旋の形を作ることはできるでしょう。 「クロージャ」もこれと同じです。 だから、Wikipediaのこんな解説を見ても落ち込まないでください。 クロージャ (クロージャー、Closure) は、プログラミング言語において引数以外の変数を実行時の環境ではなく、自身が定義された環境(静的スコープ)において解決する関数のことである。 理解できないですよね? 私もそうでした。 クロージャを既に知っている人にしか、この文章は理解できないでしょう。 クロージャを作るのは難しくない しかし、説明するのは難しくても、作るのは意外と簡単。それが

    [JavaScript] 猿でもわかるクロージャ超入門 まとめ - DQNEO起業日記
  • 私が今までクロージャを理解できなかった理由 - プログラミングを勉強するブログ

    Javascriptを勉強する上で誰もがつまずくと言われるクロージャですが私も例に漏れず理解できないでいました。 さまざまな解説サイトを読んだりサンプルコードを書き換えてみたりして 静的なスコープの言語で利用できる。 関数が終了したあともそのローカル変数が参照できる。 といったクロージャの「仕組み」や「特徴」については分かったものの、もっとも重要ともいえる 「どういう時にクロージャを使えばいいのか」 が分かりませんでした。言いかえると友人がなんて言って悩んでいる時に 「そう言う時はクロージャを使うといいよ」 と言ってあげればいいのか。 例えばプログラムの勉強を始めた友人が 「これと同じ処理もう何回も書いてるんだよ。コピペばっかりしてる気がする」 と言って悩んでいたら 「そこを関数にすればいいんじゃない?」 って教えてあげますよね。 これと同じように友人が 「○○○○○○なんだよ、うまい方法

    私が今までクロージャを理解できなかった理由 - プログラミングを勉強するブログ
  • JavaScript オブジェクト入門 - ウェブ開発を学ぶ | MDN

    完全な初心者はこちらから!ウェブ入門ウェブ入門基的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基CSS の基JavaScript の基ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH

    JavaScript オブジェクト入門 - ウェブ開発を学ぶ | MDN