十六章第六回　ジェネレータこのページの最終更新日：2019年7月2日 今回はジェネレータ（generator）を解説します。これは、ざっくり言うと途中で抜けたりまた入ったりできる関数です。 今まで、関数が実行されると必ずその関数は最後まで（またはreturn文にたどり着くまで）実行されました。今回紹介するジェネレータ関数（generator function）を使うとそうではない関数を作ることができます。 function*では、例を見てみましょう。 // ジェネレータ関数を定義 function* gen(x){ console.log(x); yield; console.log(x*2); yield; console.log(x*3); } var g = gen(10); console.log("1回目"); g.next(); console.log("2回目"); g.ne

概要 V8でジェネレータ周りの実装が進んできたので、解説してみようと思う。 ジェネレータ関数 ジェネレータ関数とは、（一つの見かたとしては）処理を途中で一時停止できる関数のことである。 例えば、呼び出される度に数を順番に返す関数を定義したいとする。 function count(n) { return function () { return n++ } } var next = count(10) next() // 10 next() // 11 next() // 12 これがジェネレータ関数を用いると次のように書ける。 function* count(n) { while (true) { yield n++ } } var gen = count(10) gen.next() // { value: 10, done: false } gen.next() // { value:

ECMAScript 6（2015年6月に公開され、今もなお比較的新しい JavaScript）の大目玉である イテレータ と ジェネレータ。なかなかに複雑で巨大な仕組みになっていてややこしいです。 そこで今回は ジェネレータ を、順を追って理解できるように解説したいと思います。 Qiita: JavaScript の イテレータ を極める！ ←こちらから読むのがオススメです Qiita: JavaScript の ジェネレータ を極める！（この記事） また、実用的なサンプルを「3. 実用サンプル」に示しました。 初めにこちらを見て、何ができるのかを知ってから読み始めるのもオススメです。 （2017年3月現在、オープンなページでの使用はまだ避けたほうがいいかもしれませんが、実装は確実に進んでいます。ECMAScript 6 compatibility table） 1. ジェネレータ、ジェ

通常の関数は、単一の値だけを返します(もしくはなにも返しません)。 ジェネレータは、要求に応じて次々に複数の値、場合によっては無限の数の値を返す(“生み出す”)ことができます。それらは 反復可能(iterables) と上手く機能し、データストリームを簡単に作成することができます。 ジェネレータ関数ジェネレータを作成するには、特別な構文構造: function*、いわゆる “ジェネレータ関数” を使用する必要があります。 このようになります:

前のページ 次のページ コレクション内の各アイテムに対する処理は非常に一般的な操作です。JavaScript では簡単な for ループから map()、filter() にいたるまで、コレクションに対する反復処理の複数の方法を提供します。 イテレーターとジェネレーターは、コア言語の内部に反復処理が直接的に取り入れられており、for...of ループの動作を簡単にカスタマイズできる仕組みをもたらします。 詳細についてはこちらもご覧ください: Iteration protocols for...of function* と ジェネレーター yield と yield* JavaScript では、イテレーターはシーケンスおよび潜在的には終了時の戻り値を定義するオブジェクトです。 より具体的に言うと、イテレーターは、次の 2 つのプロパティを持つオブジェクトを返す next() メソッドを持つ

function init() { var name = "Mozilla"; // name は、init が作成するローカル変数 function displayName() { // displayName() は内部に閉じた関数 console.log(name); // 親関数で宣言された変数を使用 } displayName(); } init(); init() 関数はローカル変数 name を作成し、それから関数 displayName() を定義しています。displayName() は init() の中で定義されている内部関数で、その関数本体の内部でしか利用できません。displayName() 自体はローカル変数を持っていませんが、外側のスコープで宣言された変数にアクセスできるので、displayName() では親関数 init() で宣言された変数 name を

JavaScript は非常に関数指向な言語であり、これにより多くの自由があります。ある時点で作成した関数を別の変数にコピーしたり別の関数に引数として渡し、後でまったく別の場所から呼ぶことができます。 私たちはすでに関数がその外（“外側” の変数）にアクセスできることを知っています ですが、関数が作成されたあとで外側の変数を変更すると何が起きるでしょうか？関数は最新の値 or 古い値どちらを取得するのでしょうか？ また、関数がパラメータとして渡され、別のコード部分から呼び出される場合、新しい場所での外側の変数にアクセスできるのでしょうか？ これらのシナリオやより複雑なシナリオを理解するために、知識を広げていきましょう。 JavaScript では変数を宣言する方法が3通りあります: let, const（モダンな方法）,とvar (過去の名残)です。 この記事では、例には let を使用し

関数とスコープ 定義された関数はそれぞれのスコープを持っています。スコープとは変数や関数の引数などを参照できる範囲を決めるものです。 JavaScriptでは、新しい関数を定義するとその関数にひもづけられた新しいスコープが作成されます。関数を定義するということは処理をまとめるというだけではなく、変数が有効な範囲を決める新しいスコープを作っていると言えます。 スコープの仕組みを理解することは関数をより深く理解することにつながります。なぜなら関数とスコープは密接な関係を持っているからです。 この章では関数とスコープの関係を中心に、スコープとはどのような働きをしていて、スコープ内では変数の名前から取得する値がどのように決まるかを見ていきます。 JavaScriptのスコープは、ES2015において直感的に理解しやすい仕組みが整備されました。 基本的にはES2015以降の仕組みを理解していればコー

Reactでは作成したアプリケーションはwebpackにより全てのコードが1つのJavaScriptファイルにバンドルされます。 小さなアプリケーションならよいですが大きなアプリケーションですと初期表示に読み込むJSファイルが増加していく問題を抱えています。 React.lazy は JavaScriptファイルを分割して利用しているコンポーネントが呼び出されたタイミングでロードするための機能です。 React.lazyの利用 次のように記述すると遅延読み込み用のコンポーネントが作成されます。 const SomeComponent = React.lazy(() => import('./SomeComponent')); React.lazyはReact.Suspense と一緒に利用して、このコンポーネントが呼び出されたタイミングで通信を行いコンポーネントファイルを取得します。 co

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

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 npm に初めて触れるときは、package.json がどういう役割をもっているのか、パッケージをインポートするとはどういうことなのかなど分からないことだらけであり、筆者も少しずつ調べては試すことを繰り返した記憶がある。これから Node.js を学ぼうという人にはこのような部分でつまづいてほしくないため、この記事では npm を使う上で必要な概念的知識を説明する。この記事を読めばスムーズに Node.js の学習が始められると思われる。 NPM とは NPM と名のつくものは実は 2 つあり、ひとつはオンライン上のパッケージレ

解決したいこと React 初心者なので、JSX コード内で HTML にレンダリングさせたくない部分をコメントアウトする方法がわからない。 方法 {/* ... */} または {// ...} という構文でコメントアウトできる。 例 var Header = React.createClass({ displayName: 'Header', render: function () { return ( <div> {// <h1>wasshoi</h1> } <nav> <ul className="header--nav"> <li> <a href="#">hoge</a> </li> {/* <li> <a href="#">fuga</a> </li> */} </ul> </nav> </div> ); } });

先日、nodistでnode.jsを入れた後npmがバージョンアップできない問題という記事で、おかしな対応策を書いたら、正しいnpmのアップデート方法をコメントで指摘してもらった。 実際やってみたところ、npmが正しくバージョンアップできた。感謝。 しかしながら、npm5からバンドルされているはずのnpxが入らなかったので、npx単独でインストールしてみたら入った。

結局npxは入らない。nodeの下位バージョンでnpmのバージョン指定アップデートを実施すると、以降はnpm --versionのバージョン表示ですら、npmlogが足りないなど、エラーを生じるようになってしまってNG。 ※nodistのuninstall→installを繰り返すと解消することもあるが本質的でない。 修正の参考qiitaはcf cf nodistでnode.jsを入れた後npmがバージョンアップできない問題 nodistでnpmをUpdate nodistのnpmにはnpxがバンドルされないので、別途入れてみた。

webpackを使用したら少しハマったので備忘録。 各バージョン・環境 Windows 10 - node : 8.9.0 - npm : 5.8.0 ※ nodeのバージョン管理に「nodist」を使用。 実行した手順。 ①実行したいプロジェクトのディレクトリに移動し、以下のコマンドを叩く。 npm init -y よし、package.jsonが生成された！！ ②続いて、webpackを実行するために本体をインストールする。 npm i -D webpack webpack-cli よしよし、node_modules やら package-lock.jsonやらが生成されたぞ。。 ③エントリーポイントをビルドしてみる。 npx webpack 'npx' は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。 ゲェ～～～ン！ え？なんで

記事を移転しました。 以下の概要をみて、興味があればご覧ください。 概要 あなたは普段、何気なく npm install を使っていることでしょう。 しかし、 npm install が何をしているのか、実は誤解している人も多いと思います。 記事のタイトルは釣りではないので、どんな時に npm install は問題を起こすのか、説明できない人は以下を読み進めてください。これは多くの開発者が無意識に無視している、とても重要な事項だと思っています。 なお、npm 4.x系以下の方は本記事の対象ではありません。 続き -> https://blog.minimalcorp.com/users/jigen/posts/6f325dc9b8a00370b6aedf47a34cb3ce

記事を移転しました。 概要を読んでみて、気になる方は続きをご覧ください。 結果だけ書くと yarn　の方が速くて簡潔です。 また必要な状況はかなり限定的ですがyarnにあってnpmにない機能も存在します。それに関する内容にこの記事で若干触れました。気になる方はご覧ください。 (比較した方法・バージョンとかは下を読んでください。誤りがあれば意見いただけると嬉しいです。） 続き -> https://blog.minimalcorp.com/users/jigen/posts/3c08ecb4391ae4836cd84d27378440ae

代表的なnode.jsのパッケージマネージャにnpmとyarnがあります。 npmよりyarnの方が良い！ と書いてある記事を何回か見かけたので、今回はyarnについてまとめてみました。 npmについては以前の記事でまとめています。 npmとは -Qiita JavaScriptのパッケージマネージャ 2016年にFaceBookが公開した npmと互換性がある = 同じpackage.jsonが使える yarnのメリット npmよりインストールが速い 約半分になる場合もあるそう npmより厳密にモジュールのバージョンを固定できる yarn.lockファイルで、各パッケージのインストールバージョンを固定できる。 npmと一緒に使える npmと同じのpackage.jsonが使えるため、同一プロジェクトでnpm or yarnで固定しなくて良い。 yarnの使い方 yarnのインストール タ

「Yarn」は「npm」を改良したツールです。 yarnpkg.com 前提 Yarnのインストール Yarnとnpmの違い まとめ 前提 WindowsにYarnをインストールする場合、事前に Node.js npm がインストールされている必要があります。 Node.jsとnpmまだ入ってない場合は、先にインストールしておきます。 （参考） jsstudy.hatenablog.com Yarnのインストール Windowsでコマンドプロンプトを開き、以下のようにコマンドを入力します。 npm install -g yarn Yarnがインストールされたら、以下のコマンドでYarnのバージョンを確認してみます。 yarn -v 「1.19.1」などとバージョンが表示されたらOKです。 Yarnとnpmの違い npmの代わりにYarnを使うメリットは何でしょうか？ （参考） www.go

anyenvのデフォルトnodeバージョン管理がnodenvになりました。2018年までの記事ではndenvやnenvをinstallしている例も見られますが、現在は使えません。したがって、 で出てくる*env一覧にnenvやndenvは登場しません。 解決法は二つあります。 nodenvにする カスタマイズしてnodenv以外を使う オススメは前者です。なぜなら、ndenvは2018年をもってdeprecatedになり、nenvも長い間アップデートがないためです。 後者を選び、別のnodeバージョン管理(ndenvとかnとかnodeenvとか）を入れたい人は、 https://github.com/anyenv/anyenv-install を見て、自前でカスタマイズを行うことが可能です。

概要 記事一覧はこちらです。 Spring Boot + npm + Geb で入力フォームを作ってテストする ( その７９ )( webdriver-binaries-gradle-plugin を利用して WebDriver を個別にダウンロード不要にする ) の続きです。 今回の手順で確認できるのは以下の内容です。 nodist を 0.8.8 → 0.9.1 へ、Node.js を 8.11.4 → 10.15.3 へ、npm を 6.2.0-next.1 → 6.9.0 へバージョンアップします。 また npm でインストールしているモジュールを一部を除き最新のバージョンにします。 参照したサイト・書籍 nullivex/nodist https://github.com/nullivex/nodist 目次 まずは現在の状況を確認する nodist を 0.8.8 → 0.9.

nodistの新しいバージョンが出ていたのでアップデートしました。 アップデートのやり方を検索したら、新しいインストーラーをそのまま実行すれば良いみたいでした。 nodist 0.8.8 → 0.9.1へ更新 （参考） ksby.hatenablog.com https://github.com/nullivex/nodist/releases から NodistSetup-v0.9.1.exe をダウンロードし、実行します。 「Welcome to Nodist Setup」画面が表示されます。「Next >」ボタンをクリックします。 「License Agreement」画面が表示されます。「I Agree」ボタンをクリックします。 「Choose Install Location」画面が表示されます。「Destination Folder」に 0.8.8 をインストールした時の D:

なにこれ React.js製の静的サイトジェネレーター Gatsbyは、プラグインを使って簡単に機能拡張できる仕組みを持っています。公式プラグインとコミュニティ提供のものをあわせると、なんと502個もあるそうです。今回はその中でも、おすすめ45個をユースケース別にご紹介します。 ※ 本記事はブログの転記です。Qiitaで使えない機能（コードブロックの指定行強調表示など）の表示結果はスクリーンキャプチャにしています。HTMLでの表示結果を見たい場合はブログをご覧ください。 ユースケース別目次 ※クリックすると説明セクションにとべます。 マークダウン系 コードブロックでシンタックスハイライトする コードブロックにタイトルを追加する 見出しにGitHub風ホバーリンクをつける 絵文字を使う Graphvizでグラフを描画する 数式を使う コードブロックにJavaSriptファイルなどを埋め込む

WorpdressからGatsby.jsに移行するにあったって、wordpressの記事情報の取得・表示までの連携をメモします。 以下内容はCLIにてgatsby newで作成したプロジェクトを基本にしています。 Wordpressプラグインの追加 wrodpressとの連携はgatsby-source-wordpressにて行うのでパッケージをダウンロードします。

GatsbyJS をGoogle App Engine にデプロイする方法の備忘です。 app.yaml と cloudbuild.yaml を設定してCloud Buildのコマンドを叩くことでデプロイします。 Google App Engine の設定 まずは app.yaml の設定です。 基本は Hosting a static website on Google App Engine  |  App Engine standard environment for PHP  |  Google Cloud を参考にします。 ルーティングの都合上、拡張子を指定しない場合のリクエストは index.html にマッピングさせます。 runtime: php55 api_version: 1 handlers: # file with extensions (e.g. .html) -

A complete release history for React is available on GitHub. Changelogs for recent releases can also be found below. Note The current docs are for React 18. For React 17, see https://17.reactjs.org. See our FAQ for information about our versioning policy and commitment to stability.

Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...

関連キーワード VPN | SSL | ネットワーク | パブリッククラウド 専用クライアントソフトウェアを利用して接続するクライアントベースのVPN（仮想プライベートネットワーク）は、設定や運用管理に手間がかかり、効率的なデータの送受信を妨げる可能性がある。そのため「クライアントベースのVPNが近いうちに過去の遺物になる」と予測する意見もある。だが欠陥は指摘されても、クライアントベースのVPNは必要とされ続ける。消滅するより、むしろ進化する可能性の方が大きい。 VPNを利用する目的は、信頼性の低いネットワークを介して信頼性の高いデータの送受信を実現することにある。VPNはデバイス同士を結ぶ仮想的なトンネルを作り、データを暗号化して伝送できる。このトンネルと暗号化によってデータを読み取られたり、改ざんされたりする事態を防ぐ。 クライアントベースのVPNと比較されるのは、TLS（Transp

JAISTに入学してようやくひと月が経ちました1。 ひと言でいうとJAISTは最高です。働きながら大学院生になった感想を残しておこうと思います。 JAISTは最高 JAISTは最高です。僕は東京サテライトの学生なので以下特に「石川本校」と断りのない限り東京社会人コースのことだと思ってください。 学生のレベルとモチベーションが高い 社会人コースはその名の通り社会人しかいません。働きながら勉強しようという連中なので当然非常に高いモチベーションです。 グループワークをするとみんなつばを撒き散らしながら白熱の議論をしますし、発表するとなるとマイクを奪い合って登壇します。 また、どういうわけかすでに高い教育を受けて世界を股にかけて活躍している第一線のビジネスパーソンがずらりと揃っています。JAISTは入試の際に「自分の出身大学、指導教官、勤め先などを一切明かしてはならない」というルールがあります。こ

はじめに Nginx でロードバランサを構成する Webサーバ1号機の作成 Webサーバ2号機の作成 ロードバランサの作成 ロードバランサとWebサーバの起動 Web アプリケーションの準備 Docker でアプリケーションをビルドする DBサーバの準備 ロードバランサとアプリケーションサーバの起動 まとめ はじめに 前回は Docker のインストールからイメージビルド・コンテナ起動・Compose までの流れをみてきました。 blog1.mammb.com 今回は以下のような、一般的な Web アプリケーションの開発環境を構築していきます。 前回の記事とあわせて、Docker の活用方法を理解いただければと思います。 Nginx でロードバランサを構成する 最初に、単純な Web サーバを Nginx でロードバランシングする環境を作成して動作を見てみます。 このような構成となります。

オープンソースソフトウェアの開発においては、コミュニティメンバーからのコードのコントリビュートだけでなく、さまざまな立場の人々から「この機能がほしい」「この動作はバグではないか」といった意見が寄せられます。 有名なオープンソースプロジェクトであるほど、そうした多くの意見やコメントを受け止めつつ開発は進んでいくわけですが、そうした状況は一方でさまざまな気苦労を生むであろうことは容易に想像が付きます。 人気のあるプログラミング言語として知られるPythonの生みの親であるGuido van Rossum氏は2018年7月、Pythonを開発する過程で生ずるさまざまな意思決定の気苦労から離れたいとの理由で、Pythonにおける「優しい終身の独裁者」からの引退を発表しました。 ちょうど新バージョン「Ruby 2.6」が登場したばかりのRubyに対しても、米国の掲示板redditで「[whining

この記事は新野淳一氏のブログ「Publickey」に掲載された「Pythonの生みの親グイド・ヴァンロッサム氏が職業プログラマから引退を表明。昨年Pythonの優しい独裁者からも引退」（2019年11月1日掲載）を、ITmedia NEWS編集部で一部編集し、転載したものです。 Pythonの生みの親であるGuido van Rossum（グイド・ヴァンロッサム）氏が、勤務先であったDropboxを退社し、これからは引退生活を送ることを表明しました。 下記はヴァンロッサム本人のツイートです。 Python開発からGoogleへ、そしてDropboxへ 1956年にオランダで生まれたヴァンロッサム氏は、約30年前の1989年12月に趣味の一環として新しいプログラミング言語Pythonの開発をスタート。Pythonという名前はBBCのコメディー番組「モンティ・パイソン」にちなんだとされています

Accelerate your digital transformation Whether your business is early in its journey or well on its way to digital transformation, Google Cloud can help solve your toughest challenges.

All of Percona’s open-source software products, in one place, to download as much or as little as you need.

2019.11.02 に FRONTEND CONFERENCE 2019 (#frontkansai) にて発表したスライドです。