常連

注目の的

拍手喝采

自己紹介

プロトタイプベースのオブジェクト指向言語は私の知る限り、JavaScriptぐらいしか広く使われているものはないんじゃないかと思います。

しかもJavaScriptもES6からclass構文というシンタックスシュガーを導入しましたし、altJSの一種のTypeScriptも広く使われていますし。

プロトタイプベースという概念を勉強している時に、「この概念、クラスベースと違って難しすぎね？」という感情を抱いていて、今もそれは変わらないです。

ただ勉強を進めているうちに、実はプロトタイプベースの方が概念としてはすごくシンプルで柔軟性があるのではないかという思いも募ってきました。

でも明らかにみんなプロトタイプベースでプログラミングをしたがっていませんよね？それどころかプロトタイプベースという概念を理解していない、しようともしていない人が多いように思います。JavaScriptの文脈で「クラスを作って、そのインスタンスを作る。」とかいう人までいますし。こういった説明は私のような初学者を混乱させるので本当にやめてほしいです。

JavaScript以外のSelfやLuaやIoといった他のプロトタイプベースのオブジェクト指向言語が広く使われていない理由で個人的に考えている理由は以下です。

- 単純に時代の流れ。たまたまクラスベースが流行っただけ。
- 概念的にクラスベースの方が優れているから。
- プロトタイプベースは良くも悪くも柔軟。クラスベースは良くも悪くもプログラマーを縛る。仕事をする上で後者の方が好都合だから。



ぶっちゃけやろうとしていることはどちらもあんまり変わらないし、こんなこと考えている暇があるならコード書いて何か物作れって話ですが、勉強している最中に疑問に思ったので質問しました。

参考文献

[Object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming)
[Self](https://ja.wikipedia.org/wiki/Self)
[Prototype-based programming](https://en.wikipedia.org/wiki/Prototype-based_programming)
[What does it mean that Javascript is a prototype based language?
](https://stackoverflow.com/questions/186244/what-does-it-mean-that-javascript-is-a-prototype-based-language)
___

以下補足です。

1.この質問はタイトルの通り、プロトタイプベースのオブジェクト指向言語が広く使われていない理由を聞いているものです。どちらの概念の方が優れているかといった質問ではないです。**宗教論争をするつもりは一切ありません。**  

2.質問が質問ですし、究極的にはそれらの区別ができないのは分かっていますが、回答の際はできるだけ**明示的に事実と意見の区別**をしていただければ幸いです。  

3.回答の際に参考文献を併せて明記していただけると助かります。

4.私が自分で載せた参考文献はもちろん読みましたが全部読んだ訳では無いので、「てめえの載せた参考文献に書いてあるだろうが読めや。」的な回答を、必要ならして頂けるとありがたいです。

___

補足、修正は適宜行います。じゃんじゃんご指摘ください。ご回答よろしくお願いします。

___

**追記(5/31 4:13)**

ベストアンサーは悩みましたが、sumimさんにしました。

使っている言葉は違うけど、言っていることに共通点があるというのは非常に面白いですね。

みなさんご回答ありがとうございました。非常にためになりました。

プロトタイプベースのオブジェクト指向言語が広く使われていない理由は?

#概要
TypeScript + Vue.js で画面を作成しています。
Vue.js のバージョンは 2.6.11 です。

画面間の遷移に VueRouter を使っているのですが、
理解が不足していてやりたいことができずに困っています。

やりたいことは、VueRouter を使ったページ遷移間で
任意のオブジェクトを渡したい、ということです。

#説明

ページA→ページBの遷移を行う際は次のようにしています。

```
this.$router.push({name: 'ページB'});
```

これでページ遷移はできるのですが、このタイミングでページBに
ページAの持っているオブジェクトを渡したいのですが、
どのように記述すればよいかが見つけられません。

ネットを検索するとそれらしき記事は見かけるのですが、
任意の構造のオブジェクトを渡している記事を見つけられませんでした。

#見つけた方法
ルート定義に prop: true と記述したうえで、ページ遷移処理を次のようにすると
遷移先のページの prop にオブジェクトを渡せるような記述はあるのですが
params に渡すオブジェクトの型が合っていないためエラーになってしまいます。

```
this.$router.push( {name: 'ページB', params: オブジェクト } )
```

VueRouter の型定義を見てみると、
push() に渡す Location 型オブジェクトの params プロパティは
Dictionary<string> 型なので、任意の構造のオブジェクトは渡せないようにも思えます。
（キー、値が文字列なオブジェクトだけしかダメ？）

#お願い

VueRouter を使ったページ遷移の際に任意のオブジェクトを渡す書き方をご存知の方がいらっしゃいましたら
その可否も含めて書き方をご教授いただけますでしょうか。

この辺の情報が記述されている記事の場所だけでもお教えいただけますととても助かります。

以上よろしくお願いいたします。

VueRouter のページ遷移間でオブジェクトを受け渡す方法

先日、保険に入ろうと思っていつもお世話になっている保険会社の方に連絡を入れ資料説明等を受けていたのですが、その会社の顧客管理・営業用システムがWebを使ったシステムで、営業マンの方は、私が加入している保険や個人情報などをタブレット端末で確認しながら説明をして下さっていたのですが、ブラウザのurlがhttp://... になっていました。

インターネットには、小型のポケットルータを使って接続しているようでした。

この保険会社に関わらず、これまでにも社内システムをSSL無しで構築されているのをなんどか見たことがあり、その度に見なかったことにして「あっ、察し・・・」ということでそっと離れていくか、話の分かってもらえそうな人であれば「ちゃんとした方がいいと思いますよ」的なことをお伝えしてきたのですが、今回の場合、既に自分がその会社の保険に加入しており簡単にそっと離れていくということもできず、SSLに対応していないことについてどう伝えればよいのか困ってしまいました。

B2Cで公開されているようなサービスでSSL対応していないサービスを目にすることはまずありませんが、このようなインターネットを使う社内システムでSSLに対応していないサービスというのは世の中にたくさんありそうな気がしてぞっとしています。
現にこの保険会社も名前を出せば多くの方が知っている会社だと思います。

私の疑問点として以下の２点です。

１．そもそもインターネットを使う社内システムはSSL対応しなくても問題ないのでしょうか？
私の答えは「No,問題あり!」なのですが、日本の企業ではかなり多くの会社が社内システムをSSL化していないような気がしてきてむしろ自分の考えが間違っているんじゃないかと思えてきました。(個人情報とか別にSSL化しなくても対して問題ないんじゃないかという気さえしてきました)

私の認識ではSSLへの対応の有無は、その会社の経営の根幹にかかわる重要な問題だと思いますが、そこまで深刻に考えるようなことでもないのでしょうか。

２．１の答えが「No」であればこういった企業のSSL対応への指摘・要望はどのように進めるべきでしょうか？

こういう場合、一般的にはどのような流れで企業への要望を出すのが正しい姿なのでしょうか。

皆が気づいた時点で実名をあげたり、URLをネットにさらすというのも１つの手段だと思いますが、ちょっと乱暴ですし攻撃者を生む可能性もあるのでこれは方法として少し違うかなと思いました。

制度的な面に関しては、現状では法律などで「○○を扱う場合はSSL対応必須」というような規定はないと思います。
B2C等の一般的なWebサービスであれば外からもわかりますが、社内システムに関しては外部から伺い知ることのできない情報ですのでその会社の方針にゆだねられることになります。

指摘・要望に対する反応も企業によって様々なような気がしますが、同じような経験をされた方がもしいらっしゃいましたらぜひご意見を頂ければと思います。

社内システムがHTTPで運営されている企業へのHTTPS化の指摘・要望はどのようにするべきでしょうか？

比較的大きめのSPAプロジェクトで、クライアントサイドのフレームワークを選定中です。

Vue2.0と、Angular2のどちらかにしようと思っていますが、実際にいじってみた結果、VueにVuexやvue-router、vue-class-component、axiosなどのパッケージをつけて、TypeScriptでコンパイルできるようにすれば、Angular2相当のことができるのではないかと思いました。

Angularについて、よく「フルスタック」という言葉で形容されて、つまりはSPAを構築するにあたっての必要十分な機能が全部入り、ということだと思いますが、Vueを用いつつそれらの**機能を必要に応じて外部から取り込む前提であれば**、また、型由来のバグ防止のために**TypeScriptで書くのであれば**、それでも大規模開発に**Angularを採用するべき「根本的」「構造的」理由はありますでしょうか？**

私としては、<component :is="SomeComponent">が大変便利だったり、バックエンドにLaravelを採用しているためvee-validateがありがたかったりと、割と細かい理由でVueを使いたい気持ちがあるのですが、これだけの規模のSPAを開発するのが初めなので、のちのち「ああ、やっぱり大規模開発に強いといわれているAngularにしておけばよかった」とならないか、ちょっと心配です。

何卒よろしくお願いいたします。

大規模開発におけるAngularの優位性（Vue.js+αとの比較において）

# 質問内容

「C++の演算子のオーバーロードは悪いのところ」はどこですか？

# 質問の背景

なんで、そもそもC++の演算子のオーバーロード悪いと思っているかというと、
以下のサイトで、
> これを見て「あっ、C++の演算子オーバーロードだ、殺せ！」となったキミ、ちょっと待ってほしい。実はね...

[http://d.hatena.ne.jp/xef/20130309/p1](http://d.hatena.ne.jp/xef/20130309/p1)

という記述を前に見たことがあったからです。

笑い混じりに「殺せ」と使っている様子をみると、C++演算子の演算子のオーバーロードに多少問題があるのだろうなと思いました。


問題になるケースをC++のコードで、書いていただけるとありがたいです。


# （追記）ベストアンサーについて
（追記）2017/03/21 11:08

書き込んでくれた皆様、
書き込もうとしてやっぱりやめってしまった方、
この質問について真剣に考えてくださった方、
ありがとうございます

ベストアンサーをどうしたらいいか困っています
誰か一人がというより、様々な方々の議論で、答えが作られていると思います
。なにか方法があればお願いしたいです。

# （追記）結論：悪なのか？

あくまでも、個人的な結論ですが、そこまで悪ということはなさそうだと思いました。
質問をする前は、もっと明らかな問題点が回答していただけるのかと思いましたが、そこまで決定的な悪があるようには思いませんでした。


# （追記）独断と偏見でご回答まとめ
(追記) 2017/03/21 11:59

## まとめる理由
回答とたくさんのコメントがあるので、
このページを初見した方が話を把握しづらいと思いますので、
個人的にまとめます。

### グローバル空間の汚染は悪か？

> グローバル空間を汚すことは行儀が悪いコードと言われます

これに対して、yumetodoさんが必ずしもそうではないと教えていただきました

> じゃあフリー関数が悪くてメソッドが正義かというと、実は真逆

とも教えていただき、説得力のある記事など詳しいことはyumetodoさんのご回答にかかれています。

比較演算子についてもありましたが、演算子のオーバーロード自体の問題ではないのかなぁと思い、悪だという決定打にはなりませんでした。

### 問題のあるコードのご提示と改善

raccyさんはC++演算子のオーバーロードでいかが問題となるものを
具体的なコードでご提示していただきました。
* グローバルの汚染がある
* 足し算の定義が一箇所にならない

様々な議論の末、Chironianさんが上記の問題を解決するコードを提示していただきました。

実際にこのページ内に動作するコードが掲載されています。
詳しくは、raccyさんのご回答の先頭のコード（内容が変更されるかもしれません）
または、こちらのChironianさんが作ってくださったリンクをご確認ください。
[http://melpon.org/wandbox/permlink/PvZWTA2JXg1emLCQ](http://melpon.org/wandbox/permlink/PvZWTA2JXg1emLCQ)
（厳密にはChironianさんのリンクのコードとraccyさんとの回答内にあるコードは少し異なります）

### C++標準が良くないものを全面に出している？

（見出しの表現が適切じゃないかもです）

Zuishinさんのご回答とコメントでなるほどと思いました。


`std::cout << ...`について、
> この演算子はビットシフトに使うものであって、入出力に使うものではないはずです。

これを説得付ける資料として、Microsoftが以下のように言っているようです。
（詳しくはZuishinさんのご回答内にリンクなどがあります）

> shift を使用してストリームに書き込みを行うことは適切ではありません。


C++の演算子のオーバーロードの問題点は、

Zuishinさんのコメントを引用すると、

> 繰り返しになりますが、C++ の場合は標準ライブラリが見本として奇怪なオーバーロードを掲げていて、それを手本にした奇怪なオーバーロードが責められることなく大手を振っていました。

ということです。これはすごく納得しました。

「できるのとやるは違う」ということを教えていただきました。

確かにC++標準が作り出すコーディングスタイルが問題というのは、とても問題だと感じました。なぜなら、C++プログラマはその演算子のオーバーロードを使う機会が増えますし、そのスタイルに影響を受けるからです（ここは自分の意見です）。


### Googleのコーディングスタイル

catsforepawさんが、ご提供してくださいました
この記事は、この質問の内にあるブログ記事の年に合わせて、古いものを提供してくださってます。
ここでは、
> 特殊な状況を除き、演算子をオーバーロードしてはいけません。

とだけ書いてあり、演算子のオーバーロードに対して良くないと感じを受けます。

* [http://www.textdrop.net/google-styleguide-ja/cppguide.xml#演算子のオーバーロード](http://www.textdrop.net/google-styleguide-ja/cppguide.xml#演算子のオーバーロード)

最新のものは、Chironianさんがご提供してくださり、

> 念のため最新版を見ると、160度程見解が変わっているようです。

と言われているように、だいぶ変わっています。

yumetodoさんの言葉を借りれば、
> 別に嫌わずにかわいがってあげようよ、と思う、今日このごろです。

ということでしょうか（英語ですし、まだちゃんと読んでません...）。

[https://google.github.io/styleguide/cppguide.html#Operator_Overloading](https://google.github.io/styleguide/cppguide.html#Operator_Overloading)

---

この質問に、
考えてくださった方、
ご回答してくださった方、
回答しようとしたが、やめてしまった方（結構ありますよね笑）、
皆様、ありがとうございます。

# 追記 - ベストアンサーについて

2017/03/24 12時24分

ベストアンサーについて：予想を超え、様々な人でこの回答作りあげている質問になりました。そのため、とてもベストアンサーが選びづらかったです。ですが、teratailから催促メールも来ますし、投票の一番多い、faithandbraveさんにベストアンサーを決定しました。活発な議論がとても楽しかったです。皆様ありがとうございました！

C++の演算子のオーバーロードの悪いところってなんですか？

Gulpでbrowserifyやbabelifyなどを使ってReactのソースをビルドしているんですが、
対象のJavaScriptファイルに単純な構文エラー(カッコが足りない、JSXの構文ミスなど)が発生すると
`gulp.watch`が止まってしまいます。

gulp-plumberを使うと継続できる、とか、
`.on('error', function(){})`でハンドリングできる、など
いくつか対策を見つけたのですが、watchが止まる状況は変わりませんでした。

Gulpの知識が無いので、記述が良くなくて効果が無いだけなのかもしれないのですが、
Gulp+Browserify+babelify+uglify+Reactな環境でエラー発生後もwatchが継続できるように
gulpfile.jsを記述したいです。

gulpfile.js
```JavaScript
gulp.task('build', function() {
	return gulp.src('src/js/*.js')
		.pipe(plumber())
		.pipe(through2.obj(function(file, encode, callback){
			browserify(file.path)
				.transform(babelify)
				.bundle(function(err, res){
						file.contents = res;
						callback(null, file)
				})
				.on('error', console.log('error'))
		}))
		.pipe(uglify({preserveComments: 'some'}))
		.pipe(gulp.dest('./build/js/'));
});
```

```JSON
  "devDependencies": {
    "babelify": "^6.3.0",
    "browser-sync": "^2.9.6",
    "browserify": "^11.2.0",
    "del": "^2.0.2",
    "gulp": "^3.9.0",
    "gulp-plumber": "^1.0.1",
    "gulp-uglify": "^1.4.1",
    "gulp-watchify": "^0.5.0",
    "react": "^0.13.3",
    "run-sequence": "^1.1.4",
    "through2": "^2.0.0",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "vinyl-transform": "^1.0.0"
  }
```

Gulpでエラー発生時にwatchを継続したい

###前提・実現したいこと
webapiを利用したシングルページアプリケーション(SPA)での、API認証はどのように行うべきなのか

SPAアプリケーションに興味を持ち、AngularJSの学習を始め、できれば業務でも活用できればと考えております。
その場合の認証方式とapi提供についていまいち理解が追い付いていないため、質問いたします。

SPAの主な動作原理は以下の通りだと認識しております。
![イメージ説明](bfa5f21ac4e23fc29ad57cf9c6a64dae.jpeg)

質問内容は以下です。
#### 1.この場合のwebapiの認証は、どのような方式を利用するのが一般的なのか
非SPAアプリケーションの場合、セッションを用いて各画面でユーザを判別しますが、SPAからのwebapiでは、何を利用してユーザを判別すればよいのでしょうか？

#### 2.このような形態のサービス提供でも、Oauthを用いてSPAの認証を行うべきなのでしょうか？
非SPAアプリケーションの場合、とりあえずセッションで何でもできるという印象ですが、webapiの場合はOauthによる認証がスタンダードという印象を受けています。


初心者の要領を得ない質問で申し訳ありませんが、よろしくお願いいたします。

webapiを利用したシングルページアプリケーション(SPA)での、認証方式について

Vue.jsのSSRを試そうとして、vue-server-rendererをwebpackでビルドしたのですが以下のエラーが出てしまいます。解決方法を教えてください。

* インストール

```bash
npm install webpack --save-dev
npm install vue --save
npm install vue-server-renderer --save
npm install webpack -g 
```

* webpack.config.js

```JavaScript
module.exports = {
  entry: './src/main.js',
  output: {
    path: "./build",
    filename: 'build.js'
  }
}
```

* src/main.js

```JavaScript
var renderer = require('vue-server-renderer');
console.log(renderer);
``` 

* エラー内容

```
$ webpack
Hash: b780c6234145a9bea83b
Version: webpack 1.14.0
Time: 973ms
   Asset    Size  Chunks             Chunk Names
build.js  597 kB       0  [emitted]  main
   [0] ./src/main.js 70 bytes {0} [built]
    + 39 hidden modules

WARNING in ./~/vue-server-renderer/build.js
Critical dependencies:
6346:47-54 require function is used in a way in which dependencies cannot be statically extracted
 @ ./~/vue-server-renderer/build.js 6346:47-54

WARNING in ./~/vue-server-renderer/README.md
Module parse failed: /Users/takezaki/temp/vue/node_modules/vue-server-renderer/README.md Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)
    at Parser.pp$4.raise (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:2756:10)
    at Parser.pp$7.readToken (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:2477:17)
    at Parser.pp$7.nextToken (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:2468:15)
    at Parser.parse (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:515:10)
    at Object.parse (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/Users/takezaki/temp/vue/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/Users/takezaki/temp/vue/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /Users/takezaki/temp/vue/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.finished (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
    at /Users/takezaki/temp/vue/node_modules/webpack/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:78:16
    at fs.js:334:14
    at /Users/takezaki/temp/vue/node_modules/webpack/node_modules/enhanced-resolve/node_modules/graceful-fs/graceful-fs.js:43:10
    at FSReqWrap.oncomplete (fs.js:95:15)
 @ ./~/vue-server-renderer ^./.*$

ERROR in ./~/vue-server-renderer/package.json
Module parse failed: /Users/takezaki/temp/vue/node_modules/vue-server-renderer/package.json Unexpected token (2:8)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:8)
    at Parser.pp$4.raise (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp.semicolon (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:581:61)
    at Parser.pp$1.parseExpressionStatement (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:966:10)
    at Parser.pp$1.parseStatement (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:730:24)
    at Parser.pp$1.parseBlock (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:981:25)
    at Parser.pp$1.parseStatement (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:709:33)
    at Parser.pp$1.parseTopLevel (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:3098:39)
    at Parser.parse (/Users/takezaki/temp/vue/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/Users/takezaki/temp/vue/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
    at /Users/takezaki/temp/vue/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
    at Storage.provide (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:52:20)
    at CachedInputFileSystem.readFile (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:140:24)
    at DependenciesBlock.onLoadPitchDone (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:255:7)
    at DependenciesBlock.loadPitch (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:182:27)
    at DependenciesBlock.doBuild (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:241:4)
    at DependenciesBlock.build (/Users/takezaki/temp/vue/node_modules/webpack/lib/NormalModule.js:84:14)
    at Compilation.buildModule (/Users/takezaki/temp/vue/node_modules/webpack/lib/Compilation.js:126:9)
    at /Users/takezaki/temp/vue/node_modules/webpack/lib/Compilation.js:309:10
    at /Users/takezaki/temp/vue/node_modules/webpack/lib/NormalModuleFactory.js:58:13
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/takezaki/temp/vue/node_modules/webpack/node_modules/tapable/lib/Tapable.js:75:69)
    at onDoneResolving (/Users/takezaki/temp/vue/node_modules/webpack/lib/NormalModuleFactory.js:38:11)
    at onDoneResolving (/Users/takezaki/temp/vue/node_modules/webpack/lib/NormalModuleFactory.js:121:6)
    at /Users/takezaki/temp/vue/node_modules/webpack/lib/NormalModuleFactory.js:116:7
    at /Users/takezaki/temp/vue/node_modules/webpack/node_modules/async/lib/async.js:726:13
    at /Users/takezaki/temp/vue/node_modules/webpack/node_modules/async/lib/async.js:52:16
 @ ./~/vue-server-renderer/index.js 5:18-43 6:21-46

ERROR in ./~/vue-server-renderer/build.js
Module not found: Error: Cannot resolve module 'module' in /Users/takezaki/temp/vue/node_modules/vue-server-renderer
 @ ./~/vue-server-renderer/build.js 10:35-52
```

vue-server-rendererをwebpackするとエラー

###前提・実現したいこと
reactjsでsigle page applicationを作成していますが
clientサイドで生成されるformに対してcsrf対策を施したいと思って困っています。expressで生成したapiに対してのリクエストにcsrf対策をしたいと思っています。

###発生している問題
調べるとcsurfというnode moduleが使われているようですが、
tokenはサーバーサイドで生成してそれをformのinputにhiddenで埋め込むもののようです。問題はreactだとclientサイドでページ遷移、formを生成しているため、tokenを埋め込めないのではと思いました。
どなたかうまい解決方法をご存知の方ご教授願えればと思います。よろしくお願いします。

reactjsのようなclient-sideでページ遷移するwebアプリのcsrf対策

## 環境、構成
[フロントエンド]
Rails4
UI、バックエンド(WebAPI)とのやり取りを担当

[バックエンド]
Rails4
フロントエンドからリクエストを受け付けてJSONを返すWebAPI

## 質問内容
上記のような構成で認証が必要なWebアプリケーションを開発しているのですが、
ユーザ認証関連の処理でどうするのがよいのか不明な点があるので質問させて頂きます。

現状、以下のような流れでユーザ認証処理を実装しています。
1. フロントエンドでログインフォームにID、パスワードを入力してSubmit
1. SubmitされたID、パスワードをバックエンドにPOST
1. バックエンドはPOSTされてきたID、パスワードで認証処理を行い、認証に成功すればアクセストークン等の認証情報をJSONで返す
1. フロントエンドは返ってきた認証情報を保持し、認証済みでないとアクセスできないページに移動

この流れの4.が不明な点でして、バックエンドから返ってきた認証情報はフロントエンドでどのように保持すればいいのでしょうか？
今は単純に認証情報をセッションに保存してページ移動の度にバックエンドに認証情報の整合性チェックをリクエストする、といった方法で実現しています。
これでも普通に要求を満たした動作はしているので問題は無いのですが、`セッションで保持する`ということに漠然とした不安があります。

フロントエンドとバックエンドが分離していない、RailsのModel, View, Controllerを用いたシンプルなアプリケーションの場合は
認証情報はセッションに保持するのが普通だと思いますが、
今回のような構成でも認証情報の保持にセッションを使うのは普通なのでしょうか？

## そもそもの話
フロントエンドにRailsを使わずにAngularJSやVue.jsなどのJSフレームワークを使えばこのようなことを気にする必要もないのでしょうか？
「まずフロントエンドにRailsを使っていたらバックエンドと分離する意味が無くない？」と思われるかもしれませんが、
私がフロントエンドに疎いサーバサイド寄りのレガシーなエンジニアでして、とりあえず動くものを作るためにフロントエンドもRailsで構築しました。
いずれはJSフレームワーク等で置き換えるつもりではあります。


以上、ご回答頂ければ幸いです。

WebAPIのユーザ認証

JavaFXで縦にテキストフィールドA、テキストフィールドB、テキストフィールドCが並んだ画面があります。

その画面にてTabキー押下時に、「テキストフィールドAからフォーカスが外れた際のイベント」と「テキストフィールドBにフォーカスが当たった際のイベント」を取得したいのですがGoogle検索を利用しても一向に「setOnAction」のようなイベントが見つからない状態で困っています。

上記の2種類のイベント名がお分かりの方がいましたら、是非ご指南ください。 
どうぞよろしくお願いします。

【JavaFX】【フォーカス】テキストフィールドからフォーカスが「外れた際」と「当たった際」のイベント名が知りたい。

[前回の質問](https://teratail.com/questions/17669)では、オセロプログラムを添削していただき本当にありがとうございました。
自身の無知も相まって、前回は非常に多数のご指摘を受けたため、
その点をなるべく修正したものを、もう一度投稿することに致しました。

しかし大変恐縮ながら、前回とは違い、今回全てのソースコードが完成しておりません。
主な理由として、「処理を分ける」内容が実現できなかったことが挙げられます。

Javaにある継承ができれば解決できそうなのですが、
そのような機能が備わっていないJavaScriptでうまくまとめる方法が分からなかったのです。
また、「グローバル変数を減らす」内容も実現できたとは言い難い状態です。

未完成なコードでお恥ずかしい限りですが、「自分だったらこう書く」といったような点があれば、
些細な内容でも全く構いませんので、ご指摘のほどよろしくお願いいたします。
###ソースコード
```HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
</head>

<body>
<div id="othello"></div>
<script type="text/javascript" src="othello.js"></script>
</body>
</html>
```
```JavaScript
// 黒と白の画像を変数に格納
var STONE_BLACK = 'url("http://i.imgur.com/CLEpdaJ.png")';
var STONE_WHITE = 'url("http://i.imgur.com/VZgXNBM.png")';

var BLACK = 1;
var WHITE = 2;

var turn = BLACK;	// 先手は黒

/* 10×10のフィールドを作る */
var field = [
	[9, 9, 9, 9, 9, 9, 9, 9, 9, 9],
	[9, 0, 0, 0, 0, 0, 0, 0, 0, 9],
	[9, 0, 0, 0, 0, 0, 0, 0, 0, 9],
	[9, 0, 0, 0, 0, 0, 0, 0, 0, 9],
	[9, 0, 0, 0, 0, 0, 0, 0, 0, 9],
	[9, 0, 0, 0, 0, 0, 0, 0, 0, 9],
	[9, 0, 0, 0, 0, 0, 0, 0, 0, 9],
	[9, 0, 0, 0, 0, 0, 0, 0, 0, 9],
	[9, 0, 0, 0, 0, 0, 0, 0, 0, 9],
	[9, 9, 9, 9, 9, 9, 9, 9, 9, 9]
]; 
/* ------------------------------------------------------- */
// 黒と白の初期配置
function setStone() {
	field[4][5] = BLACK;
	field[5][4] = BLACK;
	field[4][4] = WHITE;
	field[5][5] = WHITE;
}

// 盤面を描写する処理
function showBoard() {
	var element = document.getElementById("othello");
	var df = document.createDocumentFragment();
	
	for(var y = 1; y <= 8; y++){
		for(var x = 1; x <= 8; x++) {
			var board = document.createElement("div");
			board.id = "p" + y + x;
			board.setAttribute("style", "border: 1px solid black; float: left; height: 60px;\
								width: 60px; background: green; style: pointer");
			board.addEventListener("click", clickEvent, false);
			
			// 8ピース毎に改行する
			if((x % 8) == 1) board.style.clear = "both";
			
			// 初期配置の黒と白を描写する
			if(field[y][x] !== 0){
				var image = (field[y][x] == BLACK) ? STONE_BLACK : STONE_WHITE;
				board.style.backgroundImage = image;
			}
			df.appendChild(board);
		}
	}
	element.appendChild(df);
}
	
// 現在の手番が石を置けるかどうか判別する
function isReversible(y, x, player) {
	var opponent = (player == BLACK) ? WHITE : BLACK;
	var delta_y = [-1, -1, 0, 1, 1, 1, 0, -1];
	var delta_x = [0, 1, 1, 1, 0, -1, -1, -1];
	
	// 選択した箇所に既に石が置かれている場合、以降の処理を行わない
	if(field[y][x] !== 0) return false;
			
	// 選択した箇所の周囲8箇所に石が置けるかどうか判別する
	for(var pos = 0; pos < 8; pos++){
		var n = y + pos_y[pos];
		var m = x + pos_x[pos];
		
		// 周囲8箇所に相手の石がない場合、以降の処理を行わない
		if(field[n][m] !== opponent) continue;
		
		// 周囲8箇所の延長線上に相手の石がある間繰り返す
		while(field[n][m] === opponent){
			n += pos_y[pos];
			m += pos_x[pos];
			
			// 相手の石を挟んで自分の石がある場合、trueを返す
			if(field[n][m] === player) return true;
		}
	}
}
	
function stoneReverse() {
	/* TODO: 
	 *	石をひっくり返す処理
	 * 	(isReversible()メソッドとソースコードはほぼ同じ)  */
}

function stoneNavigation() {
	/* TODO: 
	 *	自分の石を置くことができるマス目の色を変更する
	 *	(field[1][1]～field[8][8]まで全てのマス目に対して
	 *    "isReversible();"を実行、trueが返れば背景色変更) */
}

function clickEvent() {
	var element = document.getElementById(this.id);

	// 設定したdividから配列の要素を得る
	var y = parseInt(element.id.substr(-2, 1));
	var x = parseInt(element.id.substr(-1, 1));
	
	var check = isReversible(y, x, turn);
	
	if(check){
		stoneReverse();
		turn = (turn == BLACK) ? WHITE : BLACK;
		stoneNavigation();
	}
}
	
onload = function() {
	setStone();
	showBoard();
}
```
###未完成部分のコードについて
主にstoneReverse()について、具体的な解説をいただければ幸いです。

【再】オセロプログラムの添削をお願いします

お世話になります。
独学でC#.netでアプリを作っています。

今までは「Windowsフォームアプリ」でしか作ったことはありませんが、「WPFアプリケーション」の形式でも開発してみたくなりました。
軽くネットで調べているうちに、「WPFアプリケーション」では"MVVM"パターンで作成している例が多く見受けられました。

そこで、参考書として、
 ・デザイン面（WPF）
 ・開発手法面（MVVMパターンでの開発手法。）
が中心に載っている参考書を探しています。

ネットでWPFに関する書籍を調べ、中身を見に本屋を数店舗回りましたが、どこも扱っていなかったため、ここでの質問に至りました。

[経験]
仕事でJava4年ほど。
C#は独学で半年くらいです。

値段は特に制限はありませんが、一般的な参考書の範囲内（\3000～\5000程度？）だと助かります。
よろしくお願いいたします。

WPF、MVVMに関するオススメの参考書を探しています。

書籍やネット上で情報として勉強するのも大事ですが、やっぱり実際に稼働してるソースを見るのはまた違った発見がありますよね。

WebでもアプリでもOSでもジャンルも言語もなんでもいいので、プログラマーなら一度は読んだ方がいいと思うOSSのソースがあれば教えて下さい。

プログラマーなら一度は読んだ方がいい書籍というのはよく聞きますが、読んだ方がいいOSSのソースというのはありますか？

今書いているコードを１つ上の段階へとグレードアップするため色々と質問させていただきました。
[質問①](https://teratail.com/questions/15219) [質問②](https://teratail.com/questions/15275)
ですがやはりうまくいかず苦戦していました。
あまり答えを聞くような形でよくないと思いますが、みなさんならこのコードをどのような形で書きますか？？
これを元に今後の参考にとするため質問させていただきました。
よろしければ解答の程宜しくお願いたします。

```Ruby
require 'dxruby'

#マップデータ [Block=32*32][Width17, height15]
map = [[1, 8, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
       [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0, 7, 1],
       [1, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0, 0, 6, 1],
       [1, 0, 0, 0, 1, 1, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1],
       [1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
       [1, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 1, 0, 0, 0, 1],
       [1, 0, 2, 2, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0, 1],
       [1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
       [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1],
       [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
       [1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
       [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1],
       [1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
       [1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
       [1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1],
       [1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1]]

#キャラ、配列パーツ
character = Image.load("c_mario.png")
block     = []
block[0]  = Image.new(32, 32, [50, 200, 255])  #空 背景
block[1]  = Image.new(32, 32, [100, 50, 0])    #茶 ブロック
block[2]  = Image.new(32, 32, [255, 255, 255]) #白 雲
block[3]  = Image.new(32, 32, [0, 0, 0])       #黒 ゴール
block[4]  = Image.load("image_1.png") #アイテム画像
block[5]  = Image.load("image_2.png") #ブロック画像
block[6]  = Image.load("image_3.png") #ゴール画像
block[7]  = Image.load("image_4.png") #ゴール画像
block[8]  = Image.load("image_5.png") #ドカン画像

#初期値設定
x = 32
y = preview = 32
f = 1
item = 0
jump = false

#対応する配列を返す
def collision(x, y, array)
  return array[y/32][x/32]
end


#ループ開始
Window.loop do


  #Y座標移動増分の設定
  y_move = (y - preview) + f


  #すりぬけ回避
  if y_move > 31
     y_move = 31
  end
  preview = y
  y += y_move
  f = 1 #重力設定


  #落下時 座標初期化
  if y >= 480
     x = 32
     y = preview = 0
     item = 0
     map[3][6] = 5 #ブロック再表示
     map[2][6] = 0 #アイテムを消去
  end


  #天井衝突判定
  if collision(x   , y, map) == 1 or 
     collision(x+31, y, map) == 1 then 
     y = y/32*32 + 32
  end
  #床衝突判定
  if collision(x   , y+31, map) == 1 or 
     collision(x+31, y+31, map) == 1 then
     y = y/32*32 
     jump = true  #地面に接地時ジャンプ許可
  else
     jump = false #不許可
  end


  #移動スピード
  if item == 1
    x += Input.x * 5
  else
  	x += Input.x * 2
  end


  #壁衝突判定（左側）
  if collision(x   , y   , map) == 1 or
     collision(x   , y+31, map) == 1 then
     x = x/32*32 + 32
  end
  #壁衝突判定（右側）
  if collision(x+31, y   , map) == 1 or 
     collision(x+31, y+31, map) == 1 then
     x = x/32*32
  end
  #アイテム衝突判定
  if collision(x   , y   , map) == 4 or 
     collision(x   , y+31, map) == 4 then
     x = x/32*32 + 32
     map[2][6] = 0
     item = 1
  end
  #ブロック衝突判定
  if collision(x   , y, map) == 5 or 
     collision(x+31, y, map) == 5 then 
     y = y/32*32 + 32
     map[2][6] = 4
     map[3][6] = 1
  end
  if collision(x   , y+31, map) == 5 or 
     collision(x+31, y+31, map) == 5 then
     y = y/32*32
     jump = true
  end


  #SPACEでジャンプ、ESCで終了
  if Input.key_push?(K_SPACE) and jump
    f = -15
  end
  if Input.key_push?(K_ESCAPE)
    break
  end

  #マップ、キャラの表示
  Window.draw_tile(0,0,map,block,0,0, nil, nil)
  Window.draw(x, y, character)

end
```

#image_5.png 
![image_5.png](f6e680d490e15bf5b97658a175b31f02.png)
#image_4.png
![image_4.png](420246981ac0d474cdf4e33048ff9102.png)
#image_3.png
![image_3.png](90d8f9528771db31a6ca95dd6c756531.png)
#image_2.png
![image_2.png](e991826470cb75f25860b765790bca1c.png)
#image_1.png
![image_1.png](a91236960a755e1e64e29afa390e7717.png)
#c_mario.png
![c_mario.png](1be340623918885a3b19a50b13d50800.png)

Ruby コード修正

Python開発でIDEを用いる場合、以下の３パターンあると思っています。
どれが一番おすすめですか？

- IntelliJ IDEA(Python plug-in)
- PyCharm
- Eclispe(PyDev plug-in)

EclipseとIntelliJは使った事がありますが、IntelliJの方が断然よかったです。
IntelliJとPyCharmはベースは同じだと思っているのですが、何が違うのでしょう？
また、他に良い開発ツールがあれば教えて下さい。

**追記**
以下、IntelliJのPythonプラグインの説明
> The Python plug-in provides smart editing for Python scripts. The feature set of the plugin corresponds to PyCharm IDE Professional Edition.
機能的には、PyCharmのプロフェッショナル版と同等と考えて良さそう。

python開発のおすすめツールを教えて下さい

初めまして。
現在クラウドファンディングサイトを作ろうと思い、ＰＨＰの勉強をしています。（まだ想像もつきませんが・・・。）

プログラミングの勉強方法をネットで検索してみると、「他の人が書いたソースコードをとにかく見ろ！」という話が結構出てくるのですが、htmlやcssならともかく、phpなどのサーバーサイド言語はソースが見れません。

皆さんはいつもどこで他人が書いたソースを手に入れているのでしょうか？
すごく初歩的な事かもしれませんが、良ければ教えてください。

またプログラミングの勉強をしていく中で、お勧めのやり方等あれば、それも書いていただけると非常にうれしいです。