常連

回答者

拍手喝采

自己紹介

node.jsのおかげもあり、JavaScriptの人気が再加熱したと聞いたことがありますが、なぜJavaScriptなんでしょうか？
僕は言語を評価できるレベルではありませんが、JavaScriptの実装はクソだよく言われています。なのに、なぜここ最近JavaScriptで書けるという言語が増えてるんでしょう？
今思いつくだけでも、AppleScriptの代わりにjsが使えるようになったし、GoogleAppsScriptもそうだし、node.jsもそうだし。
JavaScriptでないといけない理由があるのでしょうか？
それとも用途によっては一番優れた言語だということでしょうか？

なぜJavascript的な文法の言語が増える？

DOM操作は遅い、というのをよく聞きます。
例えば appendChild や innerHTML などは、DOM操作してるとは思うのですが、
下記のような、要素を変数に保存するだけ、属性値を取得するだけ、などもDOM操作にあたるのかを知りたいです。


```javascript
// 要素を変数に保存する（id指定）
var hoge = document.getElementById('hoge')
```
```javascript
// 要素を変数に保存する（クラス指定）
var bar = document.getElementsByClassName('bar');
```
```javascript
// 属性値を取得する
var atr = hoge.getAttribute('piyo');
```

（下記はHTML自体に手を加えるため、DOM操作にあたるのではと考えました）

```javascript
// 属性値を指定する
hoge.setAttribute('piyo', 'piyopiyo');

// クラスを追加
hoge.classList.add('hogehoge');

// クラスを削除する
hoge.classList.remove('hogehoge');

// スタイルを追加する
hoge.style.top = 100;
```

DOM操作とは何を指すのか

株価データをmysqlにinsertするシステムを組んでおります。
全銘柄の株価を1分おきに取得します。
銘柄数は3600、株式市場の時間は1日300分
3600×300=1,080,000レコードとなります。

カラムは以下の通りです。
id int(10) AUTO_INCREMENT
code smalint(5)//銘柄コード
price double//株価
dekidaka int(10)//出来高
created_at date//取得時刻

selectする際の速度を最重視するため、
ストレージエンジンはMyISAMを採用し、ORMは使用しない予定です。
普段テーブル設計をする際はupdated_atカラムを含ませているのですが、
レコード数が膨大になって容量を食う上、updateも行わないため除いています。
・insertは遅くても問題ない
・updateは基本的に行わない(過去の株価は不変)

selectの際、codeもしくはcreated_atを元にpriceを取得したいのですが、
インデックスを付けるのはcodeとcreated_atだけではなく、priceにもつけた方が良いのでしょうか？
○円以上○円未満というbetweenによってpriceを取得します。

その他ご教示頂きたいのは以下の通りです。

・レコードが数億に対し、codeの種類が3600というのはカーディナリティが低いといえるのか
・パーティショニングした方がよいのかテーブルを年毎に分けた方が良いのか
・パーティションはレコード数がどのくらい増えるごとに作成する必要があるのか
・インデックスは部分インデックスにした方がよいのか

宜しくお願いいたします。

※追記
回答者の方からidカラムは不要ではないかとの回答を頂きました。
容量削減のためidカラムを削除する方向へもっていきたいのですが、一意の値のカラムを無くした場合デメリットがありましたらご教示頂けますと幸いです。

1日に100万レコード増える場合のテーブル設計

SQLの勉強をしています。
その中で「OR」「AND」を組み合わせたものがあるのですが、
どのような条件であるかが解読できません…。

```SQL
WHERE A_FLG='0' AND HUMAN_CD = 100
    OR (A_FLG='1' AND B_FLG='0')
```

解釈1
A_FLGが0 かつ HUMAN_CDが 100 である場合か
A_FLGが1 かつ B_FLGが0 である場合

解釈2
A_FLGが0 かつ HUMAN_CDが100 か A_FLGが1 かつ B_FLGが0 である場合

上記2つの解釈が思い浮かんだのですが、正解はどちらになりますでしょうか。(もしくは両方共違うのでしょうか…)

この形式について調べようとすると

```SQL
～AND (A OR B)
```
の型ばかりヒットしてしまいます…

ご存知の方がいらっしゃいましたらご教授頂けますと幸いです。

SQL OR AND の組み合わせ

NodeJSサーバで、webpackで制作したReactJSをSSRしたいです。
複数のloaderを使用してコンパイルをしているため、webpackのコンパイル環境を生かしたままサーバへあげたいです。設定を実行すると、DllPlugin.jsからエラーが発生し、解決方法が分からず躓いています。ご教授頂けますと幸いです。

```javascript
// server.js
import React from 'react'
import ReactDom from 'react-dom'
import express from 'express'
import webpackConfiguration from '../webpack.config'
import webpackDevMiddleware from 'webpack-dev-middleware'
import webpack from 'webpack'
import {renderToString} from 'react-dom/server'
import {createIsomorphicWebpack} from 'isomorphic-webpack'

const app = express()

const compiler = webpack(webpackConfiguration)
createIsomorphicWebpack(webpackConfiguration)

const webpackDevMiddlewareInstance = app.use(webpackDevMiddleware(compiler))

const renderFullPage = (body) => {
  return `<!doctype html>
    <html lang="ja">
      <head>
      </head>
      <body>
          <div id="root"></div>
          ${body}
          <script src="/assets/js/bundle.js"></script>
      </body>
    </html>`
}

app
  .get('*', function (req, res) {
    const appBody = renderToString(require(`../src/index.js`).default)
    res.setHeader('content-type', 'text/html')
    res
      .status(200)
      .send(renderFullPage(appBody))
  })

app.listen(3000)
```

```javascript
 // webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    path: path.resolve(__dirname, 'public/assets/js/'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ["es2015", "react"]
        }
      }, {
        test: /\.(css|scss)$/,
        loaders: [
          'style-loader', 'css-loader?modules&localIdentName=[path]___[name]__[local]___[hash:base64:5]!sas' +
              's-loader?modules',
          'autoprefixer-loader'
        ]
      }, {
        test: /\.(jpg|png|svg)$/,
        loaders: 'url-loader'
      }
    ]
  }
}
```


```shell
$ babel-node server.js 
/Users/XXX/node_modules/webpack/lib/DllPlugin.js:22
  throw new Error("DllPlugin: supply an Array as entry");
Error: DllPlugin: supply an Array as entry
```

isomorphic-webpackでSSRをしたいが「Error: DllPlugin: supply an Array as entry」

タイトルの通りなのですが、CakePHP３で、Containに条件を含めて
複数のテーブルの中から条件にあったものだけを取得したいです。

```php
 7class TableA extends Table{
 8
 9    public function initialize(array $config){
10
11        $this->hasMany('relation', [
12                                     'className' => 'Relations',
13                                     'foreignKey' => 'id',
14                                     ]);
15    }
16}
```

```php
public function getRelationController{

           //(省略)

 268        $table = TableRegistry::get('tableA');
 269        $relation = TableRegistry::get('relation');
 270
 271        $query = $table->find()
 272            ->where([
 273                     'location BETWEEN :min_lon AND :max_lon',
 275                     ])//条件１
 276            ->bind(':min_lon',$x2)
 277            ->bind(':max_lon',$x1)
 280            ->order(['tableA_id'=>'DESC'])
 281            ->contain(['relation'=> function ($q) use ($user_id) {
 282                        return $q
 283                        ->where(['relation.user_id' => $user_id]);//条件２
 284                    }])
 285            ->limit(10)->offset($offset);

              //(省略)
```


こうした場合最初の`where`でかけた条件に引っ掛かったものが取り出されてしまいます。
本来は、
【”tabelA”テーブルに対する条件１を満たし、かつ"relation"テーブルに対する条件２を満たす】
といったものだけを１０件ずつ取得したいです。

なにかありましたら随時補足させていただきますので、よろしくお願い致します。

CakePHP3でのContainに条件を含める

###前提・実現したいこと
JavaScriptの変数宣言について var と let の使い分けについて

質問 51551：JavaScriptでradioボタンで選択して背景色を変える(for loop を使って)
https://teratail.com/questions/51551
に関連して、変数の宣言の仕方 let について調べました。

参考資料： 
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/let#内部関数でのクリーンなコード

var や let の他にも、const という宣言の方法もあることがわかりました。

今のところ、let はすごく便利だった！という印象と、↑のような説明が、なんとなくわかるような気がするといったところなのですが、以前にvar で書いたものの中には、let や const では動かないものもあります。便利なことを知った分怖くなったところもあり、どのように使い分けたらよいのかを理解することができたらよいなと思っています。

###発生している問題・エラーメッセージ

```
エラーメッセージ
```

###該当のソースコード
```JavaScript
1.let でしか動かない

<form id="myForm">
  <input type="radio" name ="color" value="green">green
  <input type="radio" name ="color" value="red">red
</form> 

<script>
var c = document.getElementsByName('color');  
for(let i=0; i<c.length; i++){
    c[i].onclick= function(){document.body.style.background = c[i].value;
                 }
    }
  </script>

2.var でしか動かない

<p id="demo">default</p>
  
<script>
  var flws = ["Rose", "Tulip", "Pansy"];
  for (var i = 0, text = ""; i < flws.length; i++) {
      text += flws[i] + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
</script>

```

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
関連質問：質問： JavaScriptでradioボタンで選択して背景色を変える(for loop を使って) 
https://teratail.com/questions/51551

JavaScriptの変数宣言について　var と　let の使い分け

オブジェクト指向の学習を進めています。

オブジェクト指向は疎結合を目指すもの、ということなので過去に書いたプログラムをクラスは可能な限り不変に、機能を小さく、テストをしやすいように修正しています。
しかしクラス間の疎結合という考えは何となくわかってきましたが、クラス内ではどこまで疎結合にするべきかわかりません。

オブジェクトの生成に必要なデータをコンストラクタで受け取り、
必要に応じてエラーチェックなどの処理をしてフィールドに格納する。
その際に、内部で呼び出されるメソッドに必要な情報は、引数で渡すべきなのでしょうか、フィールドを参照するべきなのでしょうか。

引数で渡すやり方が疎結合っぽい気がします。
でもフィールドにある値を毎回引数にして渡すのは無駄な手間と変数が増えるだけで対した利点がないようにも思えます。

フィールドを参照すると、順序を間違えるとコンストラクタで初期化されてない値を参照してエラーになりそうです。
でもクラス内でどう動くか、クラス内でどう実装されているかは外部が知る必要はないので、オブジェクトを生成した時点で完全な状態になればそれでいい気もします。


たとえばこんな感じで、IDを使ってDBから会員情報を読み込むクラスがあったらどうするべきですかね。


```ここに言語を入力
public class MemberInformation｛
  private final int ID;
  private final String name;
  private final String lank;

  //案１ フィールドは使わず引数で？
  public MemberInformation (int ID){
    this.ID = ID;
    String tempName = loadName(ID);
    this.name = tempName;
    this.lank = calculateLank(ID,tempName);
  }

  private String loadName(int ID){
    //IDでDBを検索する処理
    return loadedName;
  }

  private String calculateLank(int ID,String name){
    //ID nameでランクを計算
    return loadedName;
  }
}

```



```ここに言語を入力
  public class MemberInformation｛
    private final int ID;
    private final String name;


  //案２ 引数はなしでフィールドから？
  public MemberInformation (int ID){
    this.ID = ID;
    this.name = getNameMethod();
    this.lank = calculateLank();
  }

  private String loadName(){
    //this.IDで検索する処理
    return loadedName;
  }

  private String calculateLank(){
    //this.ID this.nameでランクを計算
    return loadedName;
  }
}
```

クラス内のprivateメソッドは疎結合を目指さなくていいのか？

皆さん初めまして。

現在、ポートフォリオを作成中につき色々なサイトを閲覧して勉強しています。

そこで皆さんが、
Webサイト制作で参考にしていたり使用しているサイトなど教えていただけないでしょうか？（もちろん英語可です）

参考までに自分ですと、

素材系
[freedigitalphotos.net](http://www.freedigitalphotos.net/)
[kage-design.com](http://kage-design.com/)

Gallery
[muuuuu.org](http://muuuuu.org/)
[samprary.com](http://samprary.com/)

BLOG
[株式会社Lig](http://liginc.co.jp/)
[バンクーバのうぇぶ屋](http://webya.opdsgn.com/)

制作
[960.gs](http://960.gs/)
[liveweave.com](http://liveweave.com/)

よろしくお願いします。

Web制作　おすすめサイト

現在Webサイトのフロントエンドのパフォーマンス改善を行っています。

たまに使うGTmetrixというツールがあるのですが、そこに「**Remove query strings from static resources**」という評価項目があります。

> Most proxies, most notably Squid up through version 3.0, do not cache resources with a "?" in their URL even if a Cache-control: public header is present in the response. To enable proxy caching for these resources, remove query strings from references to static resources, and instead encode the parameters into the file names themselves.
[https://gtmetrix.com/remove-query-strings-from-static-resources.html](https://gtmetrix.com/remove-query-strings-from-static-resources.html)

上の引用によると、クエリストリングがあるとプロキシがキャッシュしてくれないことがあるから、ブラウザキャッシュを防ぐならファイル名を変えてね、とのことです。

```
<link rel="stylesheet" type="text/css" src="/style.css?date=20151007">
```

確かにWebpackなどを使えばでJSのファイル名をビルドのたびに変えるということをすれば、実現できます。

しかしこのクエリストリングをつけることがそこまで悪いことだとは思いません。この評価項目は無視しようかと悩んでいます。

上のクエリストリングをcssの呼び出し等のあとにつけるのはよく行われていることだとは思いますが、GTmetrixには消せと言われ、しかも現在優先度が高くでているため、やや混乱しています。

体験したことがあまりないのでわからないのですが、Webのプロキシは現在も一般的に使われていて、Webのユーザーはそこでキャッシュされないために迷惑を被っているのでしょうか。**JSやCSSなどの静的リソースにクエリストリングをつけてブラウザキャッシュを回避するのは本当にパフォーマンスに悪影響を及ぼしているのでしょうか？**

またファイル名を変更のたびに変えるにしても、JSの場合はWebpackという解決策が思いつくのですが、CSSや画像ではどういうツールを使えばファイル名を毎回変更する運用が可能なのでしょうか。

JSやCSSなどの静的リソースにクエリストリングをつけてキャッシュを回避するのはよくないでしょうか？

JSファイルはBodyタグの最後に読み込んだ方が何かとメリットがあるというのはよく聞きますが、
bodyタグ最後とheadタグのどっちでjQueryCDN読み込んでいるのか調べると普通にheadタグ内で読み込んでるサイトの方が多いように感じます。

そこで質問なのですが、逆にBodyタグ最後でJSファイルを読み込むことによるデメリットってあるんでしょうか？

jQueryやJSライブラリ等をbodyタグで読み込むことによるデメリットってあるんでしょうか？

今、私のサイトではキャッシュ対策として以下のような方法でjsの更新を行っています。
```lang-html
<script type='test/javascript' src='/js/exsample.js?var=20150330'></script>
```
jsファイルに更新があった場合は、上記getパラメータの値を更新日に書き換えています。
上記のルールを守れば、jsファイルに更新があった際は更新前のキャッシュが残る事は無いと思っているのですが、残ってしまう場合もあるのでしょうか？

何かご教授頂ければと思います。
よろしくお願い致します。

GETパラメータをつけてもjsのキャッシュが消えない？

JSは外部ファイル化した方が早いと聞いて、下記のようにみん外部ファイル化したのですが、読み込み数が増えると、逆に遅くならないでしょうか？

現場でも下記のようにHTMLファイル内で外部ファイル化していますか？

また、
おそらくHTMLファイルにJS本文が記載されていないとHTMLファイルの読み込み自体が早くなるメリットがあるのだと思いますが、body終了直前にあれば、HTMLタグ自体はすでに読み込まれていると思います。 
下記のようにするメリットはいったい何なのでしょうか？


   
    <script type="text/javascript" src="js/hover.js"></script>
     
    
    <script type="text/javascript" src="js/jquery.gptop-1.0.js"></script>
    <script type="text/javascript" src="js/jquery.easing.compatibility.js"></script>
    <script type="text/javascript">
		( function() {
		  $( '#goto_top').gpTop();
		}());
    </script>
    
        
	<script type="text/javascript" src="js/opacity-rollover2.1.js"></script>
    <script type="text/javascript">
    	$("h1 img").wink(); 
	</script>