計算のWEBアプリがうまくいかない

質問

計算のWEBアプリを作ったのですが、inputの中身が空だった時に、
計算結果が出てきません。
ifが必ず偽になってしまうのはなぜでしょうか？

https://codepen.io/anon/pen/YNRGrq

またちょっとずれますが、ローカルストレージにより、ネイティブアプリからWEBアプリに今後、
流れが移ってくると聞いたのですが、今後仕事が大いに増えるWEBアプリとは、
PHP,ruby、nodejsなどサーバサイドのプログラミング言語を使った、
サービスのことでしょうか？
具体的にどんなものだと思いますか？

js、htmlなどでできるフロントのものもWEBアプリといえて、今後仕事が大いに増えることが期待できるのでしょうか？

回答No.2

bya00417 · ベストアンサー

＞　かっこが必要な理由を、初心者にもわかるように解説していただけるとありがたいです。

『!shoppingGetPrice === ''』という条件式を順に見ていきます。
まず最初に『!shoppingGetPrice』と言う処理が行われ、shoppingGetPrice の中身の『否定』論理演算が行われます。
shoppingGetPrice が空っぽなら『真』という真理値型の値が出来上がります。
'' は文字列型のカラを表しています。
比較演算子の『===』は両辺の『値』と『型』が等しい事を比較しますので、真理値型の真と文字列型の '' は型が異なるうえ真と''の比較ので『偽』と判断されます。

shoppingGetPrice に数値が何か入っていた場合『!shoppingGetPrice』は『偽』という真理値型の値が出来上がります。
真理値型の偽と文字列型の '' は、値の比較としては偽と''の比較なので真になりますが型が異なるので最終的には『偽』と判断されます。

比較演算子が『==』なら型の比較を行わないので意図した通りの判定が行われますが、『===』と型と値の両方を比較する比較演算子を使用していたため、型違いという点で偽と判定されていました。

『!(shoppingGetPrice === '')』とカッコを付けた場合、括弧内の処理が優先されるので『shoppingGetPrice === ''』という比較が先に行われ、変数の中身がカラなら真、何か値が入っていれば偽と判定され、その比較結果の「否定」論理演算の結果、変数の中身がカラなら偽、何か値が入っていれば真と言う判定になります。

但し、カッコを使う書き方は処理の意図を分かりにくくしますので、一般的には『shoppingGetPrice !== ''』と書きます。
『!==』は値と型の比較を行う『Not Equal』比較演算子ですから、今回のような判定に適した比較演算子です。

お礼

難しいですね。
===だと空であるかだけでなく、データ型が文字列型であるので、
shoppingGetPriceの中身が空出なく、かつshoppingGetPriceのデータ型が文字列型でないとイコールにならないということのようですね。

よってshoppingGetPriceの中身に数値が入っていても、空でないは満たすが、データ型が数値型になってしまうので、’’の文字列型と、
イコールにならずに偽になってしまっていたのですね。

よって==にすればデータ型まで判断しないので真になったはずなのですね。

＞＞＞
『!(shoppingGetPrice === '')』とカッコを付けた場合、括弧内の処理が優先されるので『shoppingGetPrice === ''』という比較が先に行われ、
変数の中身がカラなら真、何か値が入っていれば偽と判定され、その比較結果の「否定」論理演算の結果、変数の中身がカラなら偽、何か値が入っていれば真と言う判定になります。
但し、カッコを使う書き方は処理の意図を分かりにくくしますので、一般的には『shoppingGetPrice !== ''』と書きます。
『!==』は値と型の比較を行う『Not Equal』比較演算子ですから、今回のような判定に適した比較演算子です。

()を付けることでデータ型を無視した条件式に変えられるということですかね。
ただこれはイレギュラー対応でわかりにくいので使うべきではないのですね。

==とすれば済む話なのでこれが一番良いのですね。
===を使うように言われたのでできるだけ使っているのですが、
今回はむしろ使うべきではなかったということのようですが、
どのように区別したらいいのでしょうか？

回答No.1

bya00417

＞　ifが必ず偽になってしまうのはなぜでしょうか？
あなたの書いたプログラムがそう成っているからです。

＞　if(!shoppingGetPrice === '' && !shoppingGetItem === '') {
「!shoppingGetPrice が '' と等しい」かつ「!shoppingGetItem が '' と等しい」時に真になる条件式ですから、shoppingGetPrice（shoppingGetItem） の 否定 と '' を比較していて、しかも === ですから厳密な型判定まで行っていますので、真理値と文字列は型判定の時点で「偽」と判定されるのでどこまで行っても「真」にはなりません。
多分、あなたの意図した条件を各場合は
　if(shoppingGetPrice !== '' && shoppingGetItem !== '') {
もしくは
　if(!(shoppingGetPrice === '') && !(shoppingGetItem === '')) {
と書くべきでしょう。

＞　ネイティブアプリからWEBアプリに今後、
＞　流れが移ってくると聞いたのですが、今後仕事が大いに増えるWEBアプリとは、
＞　PHP,ruby、nodejsなどサーバサイドのプログラミング言語を使った、サービスのことでしょうか？
＞　具体的にどんなものだと思いますか？

基本的には HTML, JacaScript, CSS といったWebのクライアントサイド技術を使って作られ、サービス側で処理が必要な認証や決済、データ配信と行った部分が REST API を使ってサーバサイドで処理するという流れでしょうね。
クライアントサイドをネイティブで作るのもいいけど、アプリが乱立しているので数を増やすのもよくないだろうし、ブラウザで利用できる形式を取っていれば基本的にプラットフォームが増えても対応が簡単だし、最近のフレームワークは HTML, JacaScript, CSS で作成すれば各プラットフォーム向けのネイティブアプリにコンパイルしてくれるので、ソースの一元管理ができて楽チンですからね。

お礼

・if(!shoppingGetPrice === '' && !shoppingGetItem === '')
は両方のinputの中に記載をするはずの数値が空だった場合は、
空なのでエラーとしたかったのですが、
上記では両方が空でなかったら真、空なら偽とはならないということですね。

shoppingGetPriceの中身が偽で空だったらとなってしまっているのですか？

下記のようにすれば空だった時偽とできるのですか？
// shoppingCalc
const shoppingGetPrice = document.getElementById('shoppingPrice').value;
const shoppingGetItem = document.getElementById('shoppingItem').value;
let shoppingCalc = shoppingGetPrice + shoppingGetItem;

document.getElementById('shoppingBtn').onclick = function() {
if(!(shoppingGetPrice === '') && !(shoppingGetItem === '')) {
document.getElementById('shoppingResult').innerHTML = shoppingCalc;
} else {
document.getElementById('shoppingResult').innerHTML = 'notext';
};
};

としてみましたがやはり数値をinputに入れても偽になってしまいます。

＞＞＞
基本的には HTML, JacaScript, CSS といったWebのクライアントサイド技術を使って作られ、サービス側で処理が必要な認証や決済、データ配信と行った部分が REST API を使ってサーバサイドで処理するという流れでしょうね。

アプリ制作も、WEBのようにUIの部分はHTML, JacaScript, CSS といったWebのクライアントサイド技術を使って作られ、
認証などのWEBでもサーバサイド出ないとできないことは、PHP、nodejsなどのウェブと同じ言語で、行うようになっていく流れ
がかなりの可能性であるということですね。

まさにWEBの技術そのものですね。もしかしてハイブリットアプリ制作のことを言っているのでしょうか？
するとWEBのフロント、サーバサイドのプログラマーの仕事はアプリ制作まで食い込んでいくので、今後かなり増えるのでしょうか？
逆にjavaやswiftのネイティブアプリ作成は、WEB系のプログラマーに仕事を奪われていく可能性が高いのでしょうか？
仕事が増えるのはサーバサイドのプログラマーだけかと思いましたが、結局UIはフロントが作るので、
フロント側のエンジニアの仕事も一緒に増えていくのですね。

補足

確かにできたのですが、最後に下記理由を教えていただければ幸いです。そうしたらBAにして終了します。

・if(!shoppingGetPrice === '' && !shoppingGetItem === '')
は両方のinputの中に記載をするはずの数値が空だった場合は、
空なのでエラーとしたかったのですが、
上記では両方が空でなかったら真、空なら偽とはならないということですね。

shoppingGetPriceの中身が偽で空だったらとなってしまっているのですか？

かっこが必要な理由を、初心者にもわかるように解説していただけるとありがたいです。