常連

注目の的

社会貢献

質問力

自己紹介

Storeにjsonから取得したデータを配列として保管してるのですが、mountedでconsoleから見るとobserverになりアクセス出来ません。

Nuxt.jsのstore/works.jsです。
```store
import axios from 'axios'

export const state = () =>({
    jsonURL: "http://localhost:3000/projects.json",
    worksData:[]
})
export const actions = {
    async getWorkData(context){
        let response = await this.$axios.$get(context.state.jsonURL)
        context.commit("setWorkData",response)
    }
}
export const mutations = {
    setWorkData(state,response){
        state.worksData = response
    }
}
```

pages/works/_id.vueです。

```script
export default {
  created() {
    this.$store.dispatch("works/getWorkData");
  },
  mounted(){
    console.log(this.$store.state.works.worksData);
  }
};
```
console.log(this.$store.state.works）時点では配列にデータが入っていることが確認できるのですが、worksDataまでアクセスするとlengthが０になり何も取得できない状態です。

参考画像です。
1枚目が console.log(this.$store.state.works）
2枚目が console.log(this.$store.state.works.worksData）
![](b280e9f376eb828707720be15f94b28c.png)
![](704f3a4ec1eed43d7d9c939ddcc95448.png)

Vue.jsでstoreの配列がObserverになりアクセスできません。

現在google chromeの拡張機能の開発をしており、その中でGoogle Calendar APIを利用し、カレンダーに入っている予定を取得したいと思っています。
[こちら](https://developer.chrome.com/extensions/tut_oauth)のチュートリアルを参考に、下記のようなコードでCalendar APIを叩くことまではできました。

```JavaScript

'use strict';
window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      let init = {
        method: 'GET',
        async: true,
        headers: {
          Authorization: 'Bearer ' + token,
          'Content-Type': 'application/json'
        },
        'contentType': 'json'
      };
      fetch(
          'https://www.googleapis.com/calendar/v3/calendars/primary/events',
          init)
          .then((response) => response.json())
          .then(function(data) {
            console.log(data);
          });
    });
  });
};

```

ただこれだとカレンダーに入っている全ての予定をとってきてしまうため、開始日と終了日を指定してとってきたいと思っています。
[このページ](https://developers.google.com/calendar/v3/reference/events/list)を見るとどうやらtimeMaxとtimeMinというパラメーターを設定すると可能なようでしたので、URLにパラメーターをつけた下記のコードで実行したところ400エラーが返ってきてしまいました。

```JavaScript

'use strict';
window.onload = function() {
  document.querySelector('button').addEventListener('click', function() {
    chrome.identity.getAuthToken({interactive: true}, function(token) {
      let init = {
        method: 'GET',
        async: true,
        headers: {
          Authorization: 'Bearer ' + token,
          'Content-Type': 'application/json'
        },
        'contentType': 'json'
      };
      fetch(
          'https://www.googleapis.com/calendar/v3/calendars/primary/events?timeMin=2018-06-01T09:59:59.000+09:00&timeMax=2018-06-01T23:59:59.000+09:00',
          init)
          .then((response) => response.json())
          .then(function(data) {
            console.log(data);
          });
    });
  });
};

```

どなたか原因をご教授いただけないでしょうか。何卒よろしくお願いいたします。

Chrome拡張機能の開発でGoogle Calendar APIを使いたい

GUIやCUIを使わずにGithub上のリモートリポジトリに共有されたファイルを直接PULLしてきてAtomで編集することって出来るのでしょうか。
Atom上の操作でローカルリポジトリを作成し、ブランチ、編集、コミット、プッシュを全て完結できますか？
現在Github上で公開されたファイルをSourceTreeでGit操作をし、ローカルに作成されたファイルをAtomで開いて編集、という流れです。
もしGUIを使わずに出来るのであれば**AtomとGithubの連携方法についてお伺いしたいです。**
ちなみに「https://www.sejuku.net/blog/73327」で紹介されている方法で試したところ、GithubタブにLoginボタンが表示されず、
『「.git」ファイルが存在しないフォルダをプロジェクトフォルダとしている』というくだりが理解できず挫折しました。
少し漠然とした質問にはなりますがご回答ぜひよろしくお願いします。

自分の認識では、GithubとAtomの連携＝AtomがSourceTreeなどのGUIとしても使えて、そのままエディタとして編集までできる。
というものなのですがそもそも**この認識から間違ってますか？**

GithubとAtomの連携について

とある掲示板で「条件分岐は悪」という発言を見かけたのですが実際どうなんでしょうか？
またその理由も教えてください。

とある掲示板で「条件分岐は悪」という発言を見かけたのですが実際どうなんでしょうか？

下のコードのように出来るだけゲッターとセッターは、設定すべきでしょうか？
私は、コードが縦に長くなるので、あまり書きたいと思っておりません。
しかし、一度書いておくと、後々、楽になるような気もして、迷っている最中です。
回答者様なら、積極的にゲッターとセッターを書きますか？

```javascript
class Monster {
  constructor(){
   this._attack = 10;
   this._life = 10;
   this._height = 100;
  }

  get attack(){ return this._attack; }
  set attack(new_attack) { this._attack = new_attack; }
  get life(){ return this._life; }
  set life(new_life) { this._life = new_life; }
  get height(){ return this._height; }
  set height(new_height) { this._height = new_height; }
}
```

javascript getter setter 設定するべきでしょうか？

＋ボタンをクリックして入力フォームを増やす、
ーボタンを押して入力フォームを減らす機能を実現したいです。
ーボタンを何度押しても、入力フォームは少なくとも1つは表示され、
＋ボタンを何度押しても最大5つまで増やせる。

下記のソースで実現しようと試みています。
しかし、ほかにもっと便利な方法があればそれでもかまいません。
ご教授ください。よろしくお願いいたします。

追記：
現状は「5つまで」は未実装
－ボタンの機能も未実装です。
この2点の記述方法がわかりません。


```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
  
<body>
 
<div>
  <input type="text" maxlength="80">
<button onclick="addInputArea();">+</button>
  <button onclick="deleteInputArea();">-</button>
</div>
 
<div id="inputArea">
</div>
 
</body>
</html>
```

```CSS
input{
  border-radius:4px;
  box-shadow:0;
  border:1px solid #ccc;
}
#inputArea{
    display:inline-block;
}
```

```javascript
function addInputArea()
{
    var div_element = document.createElement("div");
    div_element.innerHTML = '<input type="text" maxlength="80">';
    var parent_object = document.getElementById("inputArea");
    parent_object.appendChild(div_element);
}

function deleteInputArea()
{
  document.createElement("div");
    div_element.innerHTML = '<input type="text" maxlength="80">';
  
    var parent_object = document.getElementById("inputArea");
    parent_object.removeChild(div_element);
}
```

要素を追加、削除できるボタン

### 前提・実現したいこと

Google Apps Scriptで、HTMLフォームで回答した値をスプレッドシートのセルに入力したいです。

HTML、CSS、JavaScriptを少し勉強しただけなので初歩的な質問になってしまい申し訳ありません。

### 発生している問題・エラーメッセージ

```
ReferenceError: 「document」が定義されていません。（行 2、ファイル「コード」）
```

###GAS

```
function doGet(){
  return HtmlService.createTemplateFromFile("index").evaluate();
}
```

### HTML

```
<!DOCTYPE html>
<html lang="ja">
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>コンディション管理</h1>
    <form>
      <table>
        <tr>
          <th>名前</th>
          <td>
            <input type="text" id="playerName">
          </td>
          <td>
            <input type="button" id="btn" value="確認">
          </td>
        </tr>
      </table>
    </form>
    <?
    btn = document.getElementById("btn");
    btn.onclick = function (){
    var playerName =  document.getElementById("playername");
    var SS = SpreadsheetApp.openById("1fYFoYJTZTb5ONdI6_3xqfJjIaQwiEuEDwDvHu_6Dr3Y");
    var sheet = SS.getSheetByName("個人データ");
    var rangeToInput = sheet.getRange(2, 3);
    rangeToInput.setValue(playerName);

}
    ?>
  </body>
</html>

```

### 試したこと

GASはJSと違い、サーバー側でレンダリングされるため、document.getElemenByIdは使えないということは分かったのですが、どうすればいいか分かりませんでした。

### 補足情報（FW/ツールのバージョンなど）

GASで、HTMLフォームで回答した値をスプレッドシートに入力したいです。

### 前提・実現したいこと
以前はミュージックフォルダの音楽を再生するHTMLを作成し、ミュージックフォルダからローカル起動して使用していました。
今回そのHTMLをGASのWebアプリケーションに移植して、HTMLのローカル起動の問題を解消しようと思いました。


### 発生している問題・エラーメッセージ

エラーメッセージはありません。
パス名は正常に取得され表示もされるのですが音楽が再生されません。

### 該当のソースコード
言語　HTML、JavaScript

```ここに言語を入力
関連部分だけですが
<audio id="audio"></audio>　//オーディオタグを設定
<input type="file" webkitdirectory directory multiple onChange="ongfileListDirectory(this.files)" id="ongfilselct" style="display:none;"> //ongfileListDirectory()関数で配列ongrdmnam[]にフォルダ内のファイルパスを取得
<script type="text/javascript">
	var media = document.getElementById("audio"); //AudioObjectを作成
	     ｜
	media.src = ongrdmnam[]; //AudioObjectのsrcに配列のファイルパスを設定
	media.play();  //設定した音楽ファイルを再生
	     ｜
</script>

```


### 試したこと

全くわからずWeb検索でも全くヒットせず困っています。
以前もドキュメントにHTMLファイルを作成したときは同じような現象がありました。
それでHTMLファイルをミュージックフォルダに直接置いて解決した経緯があります。
（セキュリティーの関係のようですが）
今回はそれを解決したかったのですがうまくいきません。
（今回は前回と違いGASの問題と思いますが）
宜しくお願いします。

### 補足情報（FW/ツールのバージョンなど）

仕様ブラウザはChromeの最新バージョンです。

GASのWebアプリケーションでローカルの音楽ファイルを再生

Javascript(jQuery)で文字列で書かれた数式を変換して、計算する方法が知りたいです
最低でも
・四則演算
・括弧
・べき乗
が使えるようにしたいです。
```javascript
let string="1.23*(2*3)+4/2-6*Math.pow(10,2)";
convertToCalcResult(string);
function convertToCalcResult(string){
//何かしらの処理
return answer;//上の例の場合 -590.62 を返す
}
```