常連

注目の的

社会貢献

自己紹介

Homebrewについて質問です。
Homebrewについて自分なりに調べてみると、
Homebrewによるパッケージのインストール先は
/usr/local/Cellar
にインストールされ、
/usr/local/bin
リンクされるという仕組みになっているというように説明されていました。

実際に、例でmysqlを以下のコマンドでインストールしてみると
```
brew install mysql@5.7
```
自分が探した限りでは、
/usr/local/Cellarと
/usr/local/opt
にmysql@5.7存在していました。

この辺りがよくわかりませんでした。
ご教授お願いします。

また、mysqlコマンドを使うさいに
```
/usr/local/opt/mysql@5.7/bin/mysql -uroot

/usr/local/Cellar/mysql@5.7/5.7.23/bin/mysql -uroot
```
の２つのコマンド実行できるのは何故なのでしょうか？

### 補足情報（FW/ツールのバージョンなど）

mac 10.13.6

brew installの保存先について

私、フロントエンドエンジニアをしております。
環境構築中の同僚から「なぜ、Node.jsのインストールが必要なのか？」と質問されました。

また、この質問について、他の同僚からも「正しく答えられる人はいるのだろうか」と疑問を呈されました。
ふと考えてみると、私自身もその理由を深く考えたことはなかったかもしれません。

このような同僚に対して、納得のいく回答を示したいと考えております。

・フロントエンジニアとしての、Node.jsの必要性。

方向性としては、上記をはっきりと説明できれば、納得してもらえるかと思います。
後学のために、他の職業の方々（サーバーサイドエンジニア・アプリケーションエンジニア等）からの見地・見解も頂ければ幸いです。

皆様のご協力のほど、よろしくお願い申し上げます。

Node.jsはなぜインストールする必要があるの？

初心者な質問で申し訳ないのですが、検索してもこの回答にたどり着けなかったので質問させてください。。

CSSのfont-size指定について、『pxでの指定は避けましょう』とされていますが、それはIEの過去のバージョンでブラウザのfon-size設定が効かなくなってしまうからと認識しています。

現在はIE9以下を対応することはほとんどないのでpx指定が定着してきてもおかしくないと思っているのですが、font-sizeをpxで指定することに未だ何か問題があるのでしょうか？

ご教示のほどよろしくお願いします。

モダンブラウザではfont-sizeのpx指定でも相対的に大きくなるのに未だにemやremを使用するのはなぜですか？

自分もまだ未熟な身ではあるものの、役に立てればと回答をしています。

しかし、回答を重ねるにつれ、自分は役に立っているのか？回答に責任が持てるのか？
動かないって言われても！ソース全部書いてって言われても！！
辛い。しんどい。もう嫌だ。すべてを投げ出して質問する側になりたい！！
という負の感情が渦巻いてきています。

この質問は私のやけくそな感情から質問しています。

回答に疲れた場合、みなさんはどう対応していますか？


---
あと、回答とか質問のなかで灰色のボックスで赤色の文字になっている時があるのですが、
あれってどうやって打ってるんでしょう。



質問画面にmarkdownって書いてあった。
`で囲めばできますね。


---
18時40分追記

もう少し回答がほしいので、明日の昼ごろまで回答を募集します。
よろしくお願いします。
---
2015-11-17 12時06分追記

回答ありがとうございました！
無理をする事もないし、少し距離を置いたり休んだりしつつ、自分のできる範囲で「ベストアンサラー」を目指して頑張ります。
（できれば質問の品質向上も目指したいですね）

回答に疲れた場合の対処法

enterメソッドで駅名が一緒に保存される理由がわかりません。。。
よろしくお願いいたします。


```ruby
class Gate
  STATIONS = [:umeda, :juso, :mikuni]
  FARES = [150, 190]

  def initialize(name)
    @name = name
  end

  def enter(ticket)
    ticket.stamp(@name)
  end

  def exit(ticket)
    fare = calc_fare(ticket)
    fare <= ticket.fare
  end

  def calc_fare(ticket)
    from = STATIONS.index(ticket.stamp_at)
    to = STATIONS.index(@name)
    distance = to - from
    FARES[distance - 1]
  end
end

```

```ruby
class Ticket
  attr_reader :fare, :stamp_at

  def initialize(fare)
    @fare = fare
  end

  def stamp(name)
    @stamp_at = name
  end
end

```

```ruby
require 'minitest/autorun'
require './lib/gate'
require './lib/ticket'

class GateTest < Minitest::Test
  def test_gate
    require 'byebug'; byebug
    umeda = Gate.new(:umeda)
    juso = Gate.new(:juso)
    ticket = Ticket.new(150)
    umeda.enter(ticket)
    assert juso.exit(ticket)
  end

  def test_umeda_to_mikuni
    umeda = Gate.new(:umeda)
    mikuni = Gate.new(:mikuni)

    ticket = Ticket.new(150)
    umeda.enter(ticket)
    refute mikuni.exit(ticket)
  end
end

```

ruby プロを目指す人のためのruby入門

今現在勉強中なのですが、
JavaScriptとECMAScriptの違いが分かりません。
ECMAScriptはJavaScriptとの仕様だと説明があるのですがいまいちしっくりきません。

只、JavaScriptの歴史から調べている内に以下の種類があることがわかりました。

0. 標準化される前のJavaScript
0. JavaScriptの仕様を標準化（共通化?）したES1
0. ES2〜4
0. ES5
0. ES6（ES2015）
0. 主要ブラウザがサポートしているECMAScript（JavaScript）


これを踏まえて質問したいのが、
- 主要ブラウザが解釈しているのはECMAScriptで、その呼称がJavaScriptということは、厳密に言えばECMAScriptを解釈している、簡単に言えばJavaScriptを解釈しているということでしょうか
- 一般的に言われているJavaScriptとは１〜６のどれを指しているのでしょうか
- JavaScriptとECMAScriptは同義でしょうか


個人的には「JavaScriptとECMAScriptの違い」という以前に比較対象ではないとも思っております。
要点やヒント等ご教授いただければと思います。

> 参考資料
> ECMAScript - ウィキペディア
> [https://ja.wikipedia.org/w/index.php?title=ECMAScript#%E6%96%B9%E8%A8%80%E3%81%8A%E3%82%88%E3%81%B3%E3%81%9D%E3%81%AE%E5%91%BC%E7%A7%B0](https://ja.wikipedia.org/w/index.php?title=ECMAScript#%E6%96%B9%E8%A8%80%E3%81%8A%E3%82%88%E3%81%B3%E3%81%9D%E3%81%AE%E5%91%BC%E7%A7%B0)

> 参考質問
> https://teratail.com/questions/61827

JavaScriptとECMAScriptの違い

現在プログラミングを始めて半年ほどです。
ruby on rails とgithubを用いてアプリ開発をしているのですが、最終行に改行を入れるように指摘されました。

作法だと思って入れていたのですが、ふとなぜ改行か必要なのかと気になりました。
ですが、調べても出てこず。。。。
わかる方がいらっしゃいまいたらご教授お願いします。

なぜ最終行に改行を入れるのですか？

```js
$(function(){
  	var sortkey=location.search+location.hash;
  	$('.is-desc[href="'+sortkey+'"]').css({"background-Color":"#ffffff"});
  	$('.is-asc[href="'+sortkey+'"]').css({"background-Color":"#ffffff"});
  	$('a.is-desc:after[href="'+sortkey+'"]').css({"border-color":"#ffffff transparent transparent transparent"});
  	$('a.is-asc:after[href="'+sortkey+'"]').css({"border-color":"transparent transparent #ffffff transparent"});
	});
```
```html
<table>
<tr class="is-sorter" id="aaa">
<th>
<a href="?r1=1#aaa" class="is-desc">A 降順</a>
<a href="?r1=0#aaa" class="is-asc">A 昇順</a>
</th>
<th>
<a href="?r2=1#aaa" class="is-desc">B 降順</a>
<a href="?r2=0#aaa" class="is-asc">B 昇順</a>
</th>
<th>
<a href="?r3=1#aaa" class="is-desc">C 降順</a>
<a href="?r3=0#aaa" class="is-asc">C 昇順</a>
</th>
<th>
<a href="?r4=1#aaa" class="is-desc">D 降順</a>
<a href="?r4=0#aaa" class="is-asc">D 昇順</a>
</th>
</table>
```
```css
.is-sorter th a {
	position: relative;
	display: inline-block;
	height: 23px;
	width: 23px;
	margin: 0 1px;
	border-radius: 3px;
	background: #5e5d5d;
	text-align: left;
	text-indent: -9999px;
	overflow: hidden;
	vertical-align: middle;
  border: solid 1px #5e5d5d;
}

.is-sorter th a:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
}

.is-sorter th a.is-desc:after {
	margin: -4px 0 0 -7.5px;
	border-width: 7px 8px 0 8px;
	border-color: #ffffff transparent transparent transparent;
}

.is-sorter th a.is-asc:after {
	margin: -4px 0 0 -7.5px;
	border-width: 0 8px 7px 8px;
	border-color: transparent transparent #ffffff transparent;
}
```
現在はこのようなコードになっていて
aタグに擬似クラスを使って四角の中に三角をボーダーで作りボタンのように見せています。
この際そのボタンがクリックされたら色をボタンの背景と三角ん色を反転させたいのですが、
jsの書き方がよくわからず苦戦しています。
擬似クラスなどは使えないのでしょうか。
始めたばかりでよくわかっておらず申し訳ございませんが、
ご教示のほどよろしくお願いいたします。

JavaScriptで":after","before"などの擬似要素のCSS変更は可能ですか？

### 前提・実現したいこと

「ゼロから作るディープラーニング」を読み終えた学生です。
せっかくディープラーニングをかじり始めたため、自分に役に立つことをディープラーニングを利用してやってみようと考えました。
そこで、KerasもしくはChainerを使用して、下記のmake.girls.moeサイトで自動生成された女の子たち
![自動生成された女の子たち](93aaa149392f1e54b5b5435c8cc58c7c.png)
を自分のタイプか、タイプでないかを分類し、自分の最高の嫁を探そうと考えました。


### 発生している問題

自分の好みか好みでないかを判断するために、まずは自分が好きなタイプのデータセットを作成しなければいけません。
そこで、データはおよそ12000個あるため約1000個のデータに
1・・嫌い　2・・少し嫌い　3・・普通 4・・少し好き　5・・好き
の5分類を自分でつけて、学習を行い残りのデータを分類しようと考えました。

しかし、ゼロから作るディープラーニングではMNISTを使用し、データセットの作成が記述されておらず関数を使用してデータセットをダウンロードする方式だったので、データ・セットを作るやり方が記述されておりませんでした。
また、インターネットで調べてみても、データセットをすでに作り終わっており、分類し始めるところからでした。

データセットをどうやって作っているのかアドバイスいただければ幸いです。


### 補足情報（FW/ツールのバージョンなど）

環境
・iMac
・Jupyter Notebook
・make.girls.moe（画像を生成させていただいたサイト）

データセットの作り方がわからない

###前提・実現したいこと
JavaScriptのライブラリで折れ線グラフを描画しているのですが、グラフの凡例がクライアントの要求を満たせず
自作(自分で描画)してグラフの下部に表示する事になりました。

ネットで調べながら記述してみたのですが、私はHTML・CSSの知識が初心者レベルであり、既にデザイナの手を離れてしまっているシステムの改修であるため自分でデザイン部分を記述する必要があり、自信がありません。

書き方に正解がないのは分かっているのですが、これでいいのか識者に判断して頂きたいです。

実際には全てJavaScriptで動的に生成します。

完成イメージ的には以下のような感じです。
線の数は可変で、色に意味があるので色も動的に変えたいです。
![イメージ説明](3953a0fbaf623a42c25a855a0306f4f9.png)

###やってみたこと
以下にソースを貼りますが、「●」と「‐」を重なるように配置して凡例っぽく見せようとやってみました。
線の数が可変で色も種類によって変わるので文字で再現しようと思いました。

###該当のソースコード
- HTML
```
    <div class="legend-items">
        <ul>
            <li>
                <div class="legend-item">
                    <p class="point-item1">●</p>
                    <p class="line-item1">―――</p>
                    <span class="item-desc1">1個</span>
                </div>
            </li>
            <li>
                <div class="legend-item">
                    <p class="point-item2">●</p>
                    <p class="line-item2">―――</p>
                    <span class="item-desc2">2個</span>
                </div>
            </li>
            <li>
                <div class="legend-item">
                    <p class="point-item3">●</p>
                    <p class="line-item3">―――</p>
                    <span class="item-desc3">3個</span>
                </div>
            </li>
            <li>
                <div class="legend-item">
                    <p class="point-item4">●</p>
                    <p class="line-item4">―――</p>
                    <span class="item-desc4">4個</span>
                </div>
            </li>
        </ul>
        </div>

```

- CSS
```
.legend-items {
    width: 420px;
    border: black solid 1px;
}
.legend-items ul {
    font-size: 0;
    padding: 0;
}
.legend-items li {
    display: table-cell;
    font-size: 12px;
}  

.legend-item {
    position: relative;
    display: flex;
    width: 100px;
    }
.point-item1 {
    padding-left: 32px;
    color: #f49623;
}
.line-item1 {
    position: absolute;
    top: 0px;
    left: 20px;
    color: #f49623;
}

.item-desc1 {
    position: absolute;
    top: 12.5px;
    left: 70px;
    color: #f49623;
}

.point-item2 {
    padding-left: 32px;
    color: #b4b329;
}
.line-item2 {
    position: absolute;
    top: 0px;
    left: 20px;
    color: #b4b329;
}

.item-desc2 {
    position: absolute;
    top: 12.5px;
    left: 70px;
    color: #b4b329;
}

.point-item3 {
    padding-left: 32px;
    color: #79cb44;
}
.line-item3 {
    position: absolute;
    top: 0px;
    left: 20px;
    color: #79cb44;
}

.item-desc3 {
    position: absolute;
    top: 12.5px;
    left: 70px;
    color: #79cb44;
}

.point-item4 {
    padding-left: 32px;
    color: #ae0000;
}
.line-item4 {
    position: absolute;
    top: 0px;
    left: 20px;
    color: #ae0000;
}

.item-desc4 {
    position: absolute;
    top: 12.5px;
    left: 70px;
    color: #ae0000;
}
```

###試したこと
他にはtableタグを使った方法を[このサイト](http://tagnoheya.com/tag/overlap.html)を参考にして
やってみましたが、ソースが煩雑な気がして上記に落ち着きました。

###補足情報(言語/FW/ツール等のバージョンなど)
対応ブラウザはIE11、Chrome(最新)だけでOKです。

HTML/CSSだけでグラフの凡例作成

###前提・実現したいこと
GAS初心者です。
html側とGAS側での値の引渡しについて知りたいです。

Google Apps Scriptで作成したindex.htmlにセレクトボックスを作成しました。
県名を選択したときに、その値をGAS側の「SHEET_NAME」という変数に入れて使いたいのですが、どのようにして値を取得して代入するのかが分かりません。
（できればコードをどのように書くのか知りたいです）
そもそも、html⇒GAS、GAS⇒htmlの値の引渡しというものは可能なのでしょうか。

アドバイス頂ければ幸いです。

###index.html
```
<form name="kenform">
 <select name="ken" onChange="kakunin()">
   <option value="県名1">県名1</option>
    <option value="県名2">県名2</option>
    <option value="県名3">県名3</option>
 </select>
 </form>
```

###コード.gs
```
function doGet(e) {
  var tpl = HtmlService.createTemplateFromFile('index');
  return tpl.evaluate();

function test() {
 var SPREAD_ID = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
 var SHEET_NAME =      ←index.htmlで選択した値をここに使いたい
 ss = SpreadsheetApp.openById(SPREAD_ID);
 sheet = ss.getSheetByName(SHEET_NAME);

 ～
```

htmlとgoogle apps script間の値の引渡しについて

terminalで**ctrl + a**を入力すると、**行頭に移動する(Home)**ことを期待しています。
ところが、**行頭には移動せず**、**^A**と入力されてしまいます。

同様に、**ctrl + e**でも**行末に移動する(End)**ことを期待しているのですが、
**^E**と入力されてしまいます。

terminalを始め、iterm,phpstormのterminalでも同じような症状です。

環境はmac os sierraです。

入力ソースはgoogle 日本語入力です。

使っているシェルはzshです。
zpreztoというzshのフレームワーク使ってます。

control + aが^Aになってしまう

webページのデザインのために、divタグにwidth,height,background-imageなどを設定して「見た目」を調整しています。
このdivはデザインを目的にしており、コンテンツ的内容は一切ありません。

だいぶ前に「空要素はよくない」と覚えた記憶があり、それからはfont-size:1pxにして &nbps; を含めるようにしていました。font-size:1pxにしているのは &nbsp; によって高さなどが影響を受けないようにするためです。

最近いくつかのサイトを見ているときに &nbsp; を含めない<div class="bg1"></div>という空要素に出くわして、これでも良いのか？と思った次第です。

実際 font-size:1px の指定するということは、場合により否定するコードも書く必要があり、煩わしく感じています。&nbsp;を書かなければ、font-size:1px指定もいりません。

ベストプラクティスは変化すると思いますが、現在（2016年11月）において、デザインのための空要素というのは、ありでしょうか？なしでしょうか？

デザインのための空要素divタグは有りか、無しか

クラッシュオブクランとかゲームオブウォー等のゲームアプリで、時間経過による施設のレベルアップとかありますけど、そういう感じのタイマー実装(時間経過による処理)をしたいと考えているのですけど
大量ユーザのタイマーのサーバ実装ってどのようにするのが現実的なのでしょうか？
具体的な実装でなくても考え方やそのようなアーキテクチャをご存じの方がいれば教えていただけないでしょうか？

大量なタイマーの実装(アーキテクチャ)

```
font-family: a,b
```

と書くと、a というフォントがあればaが適用されて、aがなければbが適用されますが、この適用された方に応じてフォントサイズを変更する良い方法ってありますでしょうか？

aとbで同じフォントサイズを指定しても実際の大きさが異なるため、aが適用されたら13px、bが適用されたら15pxのようにして実際に見える大きさを合わせたいです。

今のところ、JavaScriptでフォントaが存在するかを調べて、あるならaが適用されてるはずなのでfont-sizeを書き換えるという方法くらいしか思いついていないです。

もっと良い方法（できればCSSだけでできる方法）がありましたら教えていただきたいです。

css で適用されたフォントに応じてフォントサイズを変える

開発では新人君のコードレビューをおこなっています。
今回指摘した点において新卒エンジニア君と大議論に発展し、まだ答えがみつかっていません。。
私の指摘事項だけでは納得出来ないようで修正することを強要することも戸惑っています。
みなさまの声を聞かせていただければと思います。。


### 会話内容

ぼく「作成するモジュールは別のプロジェクトでも使用するので汎用的につくるっておいてねー」

新人「作りました、レビューお願いします。」

```rb
module HogeManager
  # fetch data of specified day
  def fetch_data(date)
    data = HogeManager::PointBack.fetch_data_by_date(date)
  end

  # fetch the data of today
  def fetch_data_today
    HogeManager.fetch_data (Date.today)
  end
end
```

ぼく「上記のコードの中で`fetch_data_today`メソッドは不要じゃない？」

```rb
module HogeManager
  # fetch data of specified day
  def fetch_data(date = Date.today)
    data = HogeManager::PointBack.fetch_by_date(date)
  end
end
```

ぼく「こうのように引数指定がない場合は実行時日時のデータを取得。引数が渡された場合はその日付で処理するで済むのよね」
  「わざわざ別メソッドとして定義して引数だけかえて元のメソッドを変えるのはあまり意味が無いので修正するべきだとおもうよー」

新人「先輩の指摘内容は理解できます」
  「ただ`fetch_data`だけで呼び出した場合、いつの期間のデータなのか分からないじゃないですか？」
  「使う側からしてみたらいつの期間のデータを取得しやすいと思ったのであえて実装しました」

ぼく「コメントに書いとくだけで良いんじゃない？そんな大きいモジュールじゃないし、このレベルだったら誰でも分かるでしょ」
新人君「それだと１回ソース見ないと分からないじゃないですか、そういう手間をかけないように誰でもでも分かるようにメソッドを用意したのです」

ぼく「rdocにまとめられるし、gemにするんだったらREADMEに書いときゃいいじゃん」

以下堂々めぐり。