常連

回答者

ベストアンサー

拍手喝采

自己紹介

`npm`で配布されているパッケージのサイズを知る方法をご存知の方がいらっしゃいましたら教えていただきたいです。

`npm`のページには`Unpacked size`という項目がありますが、どうも実際にパッケージをインストールして、`webpack-budle-analyzer`などでサイズを可視化した時の値と乖離がある様に見えます。

似た様な機能を持つ複数のライブラリを比較するときに、そのライブラリのサイズを判断材料の一つとして使いたかったため上記の様な質問をさせていただきました。
もしご存知の方がいらっしゃいましたらご教授いただけますと幸いです。

よろしくお願いいたします。

npmパッケージのサイズを知る方法

#概要
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 のページ遷移間でオブジェクトを受け渡す方法

Vue.js+Nuxt.jsで勉強を兼ね簡単な一覧画面、詳細画面の切り替えを作成しております。

- 一覧画面は画像を含むグリッド表示
- ページネーション操作は行わない（無限スクロールを想定）
- 画面遷移はルーティング機構を使用したい

**問題**

一覧から詳細画面の画面遷移は特に問題ないのですが、
詳細画面から一覧画面に戻る際に下記の課題で躓いております。

- 一覧画面のDOMが大きい場合、レンダリングに時間が掛かっておりスムーズに切り替わらない
- スクロール位置が保持されない為、ページトップから表示されてしまう

**質問**

そこで、ルーティングの際に、CSSで表示制御出来ないかと考えております。

具体的には一覧画面のDOMを保持したままvisibilityプロパティで表示・非表示を切り替えられないかと考えておりますが、
Vue.jsのルーティング機構でその様な事は可能でしょか？

そもそもSPAではこの様なケースではどの様に実装しているのか気になります。
一般的な仮想DOMの差分を再レンダリングしスムーズな画面遷移を行う方法があればご教授頂ければ幸いです。

Vue.js SPAで重いDOMの画面遷移

apiの情報をv-forで展開しインデックス番号も表示させることはできました。
ここで得たインデックス番号を利用してjsonパラメータに１つの番号を指定し、
再度apiへ投げたいと思ってます。スクリプト内で配列に対し、
インデックスを指定する方法が分からず困っています。よろしくお願いします。
sendの中にapiから取得した番号が複数入ってきます。

```vue
<template>
    <li v-for = " (list, index) in lists" :key ="list.show">
      <div id='indexnum'>{{index}}</div>
<button type='submit' @click = "send" >送信</button></div></li>
</template>

<script>
  data: function () {
    return {
      lists: null,
      show: false,
      send: []
    }

  send () {
     var = params = {
     sendnum: send[] ← v-forで生成された各ボタンのインデックスを指定したい
   }
  }
... post,then~
</script>
```

v-forで取得したindexを使用して配列の番号を指定したい

youtubeのvideo DOM情報を取得したいですが、nullとなりました。
おそらくSPAページなのでDOM生成されるのに時間がかかるようです。

その場合、DOMContentLoadedを使えば、DOM完成まで待ってくれてる認識でしたが、なぜかeventすら取得できてないようです。

コード：
```
window.addEventListener("DOMContentLoaded", function(event) {
  //ここまでたどりつかない
  const test = document.getElementsByClassName("html5-main-video");
  const test2 = document.getElementsByTagName("video");
  alert("test:", test);
  alert("test:", test2);
});
```

```
window.onload = function() {
  const test = document.getElementsByClassName("html5-main-video");
  const test2 = document.getElementsByTagName("video");
  alert("test:", test); //null
  alert("test:", test2); //null
};
```

```
window.onload = function() {
  var title = document.getElementsByTagName("title").item(0);
  console.log("title:", title.text);  //これは取れる
};
```


URL:

https://www.youtube.com/watch?v=tmCXRP4-dMQ


なにか誤りがありましたらご教示いただけますでしょうか

SPAページのDOM操作方法について

質問失礼します！

flexboxとBootstrapの最大の違いは何なのでしょうか？

自分で調べてみたところ明白な使い分けがイメージできません...。

よろしくお願いしますm(_ _)m

flexboxとBootstrap

[vuex getterのドキュメント](https://vuex.vuejs.org/ja/guide/getters.html#%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9)

こちらで、引数なしの時はキャッシュされてありの時はされない。

とありますが、よく意味が分かりません。

例えば、引数なしの何らかのgetterをcomputedプロパティに登録してて、その値をviewにバインドしてた場合、そのgetterからの返り値が変更されたらviewはそれに従った更新がされる。
これは分かるんですけどキャッシュされるとはこのことでしょうか。

そして引数ありのゲッターってただのメソッドみたいな動き方をしますよね。
これがキャッシュされないということなのでしょうか。

なんか引数なしのgetterは常に監視されてるようなイメージというか。
キャッシュされるとはこのことなのでしょうか。

キャッシュということについて

VuetifyのBottom Navを使用しボトムナビを作成したのですが、アクティブになっているメニューのフォントが少し大きくなってしまうのをならないようにしたいです。

https://vuetifyjs.com/ja/components/bottom-navigation

ディベロッパーツールでCSSを見てみたところ以下の設定があり、```font-size: 12px;```のチェックマークを外したらサイズが変わらなくなったので、ソースに```.v-item-group.v-bottom-nav .v-btn .v-btn__content {font-size: 12px;}```を記載したのですが変更されません。
!importantをつけても効かないし、キャッシュをクリアしても効いていないのですがなぜでしょうか？？
原因がわかる方がおられましたらご教授いただければ助かります。よろしうお願いいたします。


```ここに言語を入力
.v-item-group.v-bottom-nav .v-btn .v-btn__content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    font-size: 12px;
    white-space: nowrap;
    will-change: font-size;
}
```

VuetifyのCSSを変更できない

typescriptでテキストに出力された文字を取得するプログラムを書いているのですが、
実行できずに困っています。参考にしたのがjavascriptのプログラムなので、
どこか間違っている可能性があるのですが、教えて頂ければ幸いです。
宜しくお願い致します。

<参考にしたサイト>
・テキストが選択・ドラッグされたときに、選択された文章を取得する方法https://qiita.com/uuuno/items/5a215d9bfeabec8adbc3

・Visual Studio Codeの拡張機能をTypeScriptで作る方法
https://clickan.click/vsc-ext/

```Typescript
import * as $ from "jquery";
$('body').on('mouseup', function(e){  //mouseupでイベント発火
    var selectedStr;
    if(window.getSelection){  //selectionオブジェクト取得
      selectedStr = window.getSelection().toString();  //文章取得
      if(selectedStr !== '' && selectedStr !== '\n'){  //文章チェック
        console.log(selectedStr);
      }
    }
  });
```
実行結果
![イメージ説明](c421650b5c4c1fc08a3de61f5b92a4b7.png)

原因としては、package.jsonでpublisherの名前がないからかなと思っているので、
一応、package.jsonのコードを載せておきます。

```package.json

{
    "name": "highlight",
    "displayName": "highlight",
    "description": "",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.34.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "*"
    ],
    "main": "./out/sample",
    "contributes": {
		"commands": [
			{
				"command": "extension.helloWorld",
				"title": "Hello World"
			}
		]
    },
    "scripts": {
        "vscode:prepublish": "npm run compile",
        "compile": "tsc -p ./",
        "watch": "tsc -watch -p ./",
        "postinstall": "node ./node_modules/vscode/bin/install",
        "test": "npm run compile && node ./node_modules/vscode/bin/test",
        "tsc": "tsc"
    },
    "devDependencies": {
        "@types/mocha": "^2.2.42",
        "@types/node": "^8.10.48",
        "jquery": "^3.4.1",
        "js-yaml": "^3.13.1",
        "tar": "^4.4.8",
        "tslint": "^5.8.0",
        "typescript": "^2.9.2",
        "vscode": "^1.1.34"
    },
    "dependencies": {
        "@types/jquery": "^3.3.29",
        "missing": "0.0.1",
        "module.js": "^2.2.4",
        "requirejs": "^2.3.6",
        "tsd": "^0.7.3",
        "yarn": "^1.16.0"
    }
}
```

エディタに記載された文字を取得できない

### 前提・実現したいこと

python3.7でコードを書いています。
Join関数の引数（リスト名）に関数を使用したいです。

### 発生している問題・エラーメッセージ

下記の表現だと成功
test1 = ['ab', 'c', 'de', 'e', 'fgh']
result = ''.join(test1)
print(result)

実行結果
abcdeefgh


下記の方法だとうまくいかない
x="test1"
test1 = ['ab', 'c', 'de', 'e', 'fgh']
result = ''.join(x)
print(result)

実行結果
test1



宜しくお願い致します。

Python，Joinのリスト名を関数を使用する方法

vueファイルで記述エラーがあったのですが、
エラー検知してくれません。
このようなミスは検知されないものか、私のvscodeの設定に問題があるのか知りたいです。

エラー検知できる設定も教えていただけると助かります。

![イメージ説明](89f683921bcf05cb8c137bc80d78a4ec.png)

sample.vue
```
<script>
export default {
    props: {
        test: Array,
    },
    data: function() {
        return {
            ages: {},
            testA = [], //ここがエラー箇所
        };
    },
    computed: {

    },
};
</script>
```

VscodeのVue(JavaScript)のエラー検知について

**CSS最適化ツール**
http://e-optimize.jp/services/csstidy/css_optimiser.php

上記のオンラインサービスと同等のことができる**nodeモジュール**を探しています。
以下をローカル環境で実行したいと考えています。
- 同じセレクタをまとめる
- ショートハンドcssの最適化
- 同じプロパティを持つセレクタを,区切りで繋げる

或いは類似の方法をご存知の方はいらっしゃいませんでしょうか？

CSSを最適化するツール

以下のようなコードを書きました。計算量がO(N)になっていると考えていて、PyPyなら十分通ると考えているのですが、ほとんどの結果がTLEになってしまいます。　計算時間を短縮し、ACする方法はあるのでしょうか。

```python3
def dig(tag,end):
    h=tag[0]
    w=tag[1]
    delta=[(1,0),(-1,0),(0,1),(0,-1)]
    next=set()
    for d in delta:
        if not h+d[0]<0 and not h+d[0]>=H and not w+d[1]<0 and not w+d[1]>=W and tag not in end:
            next.add((h+d[0],w+d[1]))
    return next

H, W = map(int, input().split())
black_mass=set()

for h in range(H):
    line=input()
    for w in range(W):
        if line[w] == '#':
            black_mass.add((h,w))

count=-1
end=set()
targets=black_mass
next_que=set()
while True:
    count+=1
    next_que=set()
    for tag in targets:
        next_que= next_que | dig(tag,end)
        end.add(tag)
    # print('next que',next_que)
    # print('end:',end)
    targets=next_que
    if len(end) == H*W:
        print(count)
        exit(0)

```

AtCoder Grand Contest 033 A - Darker and Darker のPython3での計算量について

vue.jsで動的にcomponentの位置を変更できるコードを作りたいと思ってます。


例えば、

/A
ページにアクセスすると

```
[banner,article,article2,nav]
```

/Bページにアクセスすると

```
[article,article2,banner]
```

のようなdynamicな順序でcomponentを表示したいです。

尚、ページによって使わないcomponentが発生するので
必要なときだけ使うようにdynamic importを考えてます。

ここまでの考えで実装したのが以下のコードです。

```
<template>
 <component :is="whichStep"></component>
</template>

<script>
export default {
  components: {
    'Article': () => import('../components/Article'),
    'Article2': () => import('../components/Article2'),
    'Banner': () => import('../components/Banner'),
    'Nav': () => import('../components/Nav')
  },
  computed: {
    whichStep () {
      switch (key_number) {
        case 0:
          return 'Article'
        case 1:
          return 'Article2'
        case 2:
          return 'Banner'
        case 3:
          return 'Nav'
        default:
          return 'Error'
      }
}
</script>
```


これからは

```
const key_number_list = [2,0,1,3]
//[banner,article,article2,nav]

const key_number_list = [0,1,2]
//[article,article2,banner]
```

のような変数を作って(こちらはページによってjsonとかで受け取る予定)

```
<component :is="whichStep"></component>
```

この部分をkey_number_list配列のlengthほど生成して各値に該当するcomponentをreturnするような
方法を考えてますが、どう実装すればわからずこちらに質問します。

そもそもvue.jsでcomponentの位置を動的に変更させるにこの実装方法は正しいのかも伺いしたいです。

vue.jsでcomponentの位置を動的に変更する方法

現在、GithubPagesを利用してポートフォリオサイトのようなものを公開しようとしています。

今回、ポートフォリオサイト作成でBootstrap4を使用するにあたって、CSSではなく、Sassで書こうと考えています。



.html、.js、.scss、コンパイル後の.css、の全てを同じフォルダ(masterブランチをCloneしてきて、そのフォルダ)に入れていますが、
この場合、gitにはどのファイルまでをpushするのが最善なのでしょうか。

何故この質問が生まれたのかというと、私としては
**①scssも、変換後のcssも全てgitへpushする。**
**②scssのみpushして、変換後のcssはgitにあげない。**
の２パターンがあると考えているからです。

Sassとgithubについて調べているとき、
[「.sassや.scssや.coffeeのファイルを置いておくと自動でコンパイルしてくれる。」](https://qiita.com/sasaplus1/items/6d5f2198e95856e3f701)
という情報を発見しました。


ということは、.scssファイルのみpushして、コンパイル後の.cssはgit上に上げなくてもよいのではないかと思いました。

**①のパターンでは、pushするサイズが大きくなってしまうし、gitで自動コンパイルしてくれるのにコンパイル後のファイルまでpushするのはスマートではない？**
**②のパターンでは、コンパイラをインストールしていない環境にクローンした際はコンパイラのインストールから始めなければいけない。また、pushする際に.cssファイルのみ除ける手間がある。**
などのデメリットがあるのかなと考えています。

この場合の最善策は一体どのようなパターンなのでしょうか。
ご教示よろしくお願いいたします。

Sassで書いてGithub Pagesに公開する

以下のような関数を挿入したいのですが，

```js
function exe(box){
  const XlsxPopulate = require('xlsx-populate')
   XlsxPopulate.fromFileAsync("./r-rec.xls").then((book) => {
            const sheet1 = book.sheet("Sheet1")
            sheet1.cell("A4").value(100)
            sheet1.cell("A5").value(200)
            sheet1.cell("A6").value(300)
            book.toFileAsync("./r-rec.xls")
        })
     let a = box.num ;
   console.log("exeから :" + a) ;
    }
```
の部分で，
node:15772) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'children' of null
    at Object.findChild (/Users/motegiyuta/node_modules/xlsx-populate/lib/xmlq.js:44:28)
    at StyleSheet._init (/Users/motegiyuta/node_modules/xlsx-populate/lib/StyleSheet.js:203:34)
    at new StyleSheet (/Users/motegiyuta/node_modules/xlsx-populate/lib/StyleSheet.js:59:14)

    at externals.Promise.resolve.then.then.then.then.then.nodes (/Users/motegiyuta/node_modules/xlsx-populate/lib/Wor
kbook.js:612:36)
    at <anonymous>
(node:15772) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing
inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (re
jection id: 1)
(node:15772) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise reject
ions that are not handled will terminate the Node.js process with a non-zero exit code.
のようなエラーが出てしまいます．

プロミスは使っていないのですが，よろしくお願いいたします

xlsファイルへの書き出し時のエラー

デベロッパーツールでClick eventなどを定義している場所を調べる方法を知りたいです。
また、今現在動作しているeventだけを表示したりするのはどうしたらいいでしょうか

Event Listenersから検索できるのはわかったのですが、開くと情報が多くて、結局知りたい
イベントのコードがどこにあるかわかりません。

主に[こちら](https://qiita.com/zaru/items/b7732ebad9b732518359)を参考にしたのですが、
少し情報が古いようで、解決には至りませんでした。また他にもサイトや動画を調べたのですが、
やはりどれも情報が古いものが目立ちました。

![イメージ説明](9048fc7804439a969762e65f8380da85.gif)
> [上のサイトのlink](https://www.airbnb.jp/gift)

ChromeのデベロッパーツールでClickなどのイベントのコードを見る方法

ChromeのDevtoolsでsnippetの実行をした際に値が戻ってくる条件を詳しく知りたいです。
どういう理由でconsoleに値が表示されているのでしょうか？


---
"aiueo"を返す
```snippet.js
"aiueo"
```
---

undefinedを返す
```snippets.js
console.log("aiueo");
```
---
undefinedを返す
```snippets.js
for(var i=0;i<5;i++){
 console.log(i);
}

```
---
5を返す
```snippets.js
var i=0;
while(i<5){
 console.log(i);
 i+=1;
}

```


---
5を返す
```snippets.js
var i=0;
while(i<5){
 console.log(i);
 ++i;
}

```

---
4を返す
```snippets.js
var i=0;
while(i<5){
 console.log(i);
 i++;
}

```

ChromeのDevtoolsでsnippet実行時の戻り値について

pythonの入門書を一冊やった程度のプログラミング初学者です。
enumerate()関数を理解するためいろいろとコードを組んで実験していました。
enumerate()は引数にシーケンスを入れると、その順番に0から番号をつけ、tupleとしてかえすという解釈です。
そして以下のコードを書きました。

```
branches = [11, 'aa', 'fa']


print(list(enumerate(branches)))
print(type(enumerate(branches)))
print(enumerate(branches))

for a, b in enumerate(branches):
    print(a, b)

```

```
[(0, 11), (1, 'aa'), (2, 'fa')]
<class 'enumerate'>
<enumerate object at 0x102376318>
0 11
1 aa
2 fa
```

問題はprint(enumerate(branches))で自分の中ではtupleが返されると思っていたので、<enumerate object at 0x102376318>が理解できませんでした。
(0, 11), (1, 'aa'), (2, 'fa')
のようにenumerate()で作成されたtupleの要素ごとに返されると思っていました。
ここで、tupleとして返すの返すがどういった形で返しているのか疑問になってしまいました。

###<enumerate object at 0x102376318>となぜ表示されるのかを考察
そこで色々調べてみると結局enumerate()はイテレータで値を一つづつ取り出せるオブジェクトであることにたどり着きました。
listやrangeはイテレータが生成可能な関数らしいです。
<enumerate object at 0x102376318>の真相を知るべく、その3者を用いて以下のようなコードを作りました。

```
branches = [11, 'aa', 'fa']

# enumerateで実験
i = iter(enumerate(branches))

print(next(i))

o = enumerate(branches)

print(next(o))

print(enumerate(branches))
# rangeで実験

i = iter(range(1,11))

print(next(i))

print(range(1,11))

print(i)


# listで実験
s = iter(branches)

print(next(s))

print(branches)

print(s)
```

```
# enumerateの結果
(0, 11)
(0, 11)
<enumerate object at 0x106b19438>
# rangeの結果
1
range(1, 11)
<range_iterator object at 0x106afe9c0>
# listの結果
11
[11, 'aa', 'fa']
<list_iterator object at 0x106ad52b0>
```

気づいたことはenumerate()はイテレータを生成するための関数iter()を使用しなくてもイテレータとして存在しているということです。なぜなら、o = enumerate(branches)でprint(next(o))を用いて値を取り出せているからです。

また、enumerate object at 0x106b19438のような出力結果はイテレータがprint()の引数であると起こるようです。なぜなら、iter()でlistとrangeを囲んでイテレータに変換しprintすると、print(enumerate(branches))と似たような形式で出力されています。


上記の結果からまとめると、最初のコードでprint(enumerate(branches))で自分が考えた結果(tupleが列挙されるという結果)にならなかったのは、enumerate()はtupleを返すという関数であるが、それはデータ型ではなく、すでに**イテレータとして返している**ので、<enumerate object at 0x102376318>という結果になった。結果として、print(enumerate(branches))はprint()の引数がイテレータとなってしまったので、、<enumerate object at 0x102376318>と表示された。
逆にlistはイテレータを生成することのできるデータ型なので、print(list)とすれば、データが出力される。

以上のような解釈なりましたが、どこかおかしい部分があれば指摘していただけるととても勉強になります。

最後に、print(range(1, 11))とすると、自分の考えでは、1から10の値が出力されると思ったのですが、ただ文字列かのように、range(1, 11)と出力されています。今回の質問の主題とはすこし離れてしまいますが、この点も疑問なので、ご教授いただけると幸いです。

mac 10.14.1

enumerate object at 0x102376318と表示されることから、enumerate()のtupleがどういう形式で戻り値となっているかを解釈したが、正しいか判断してほしい。

例えば、以下のような連続で行われる2つのajax処理があったとします。

1).DBからアイテムデータを消す(削除用APIを叩く)
2).1の処理がthenの場合、消した後のアイテムデータをDBより再取得し、mutationsを呼びstateにアイテムデータをセット(取得用のAPIを叩き、その後mutationsを呼ぶ)

1の処理はmutationsを呼ばないという意味でstateに関係ありませんが
2の処理はmutationsを呼ぶためstateに関係あります。

このような場合
1の処理は各コンポーネントに書いて
2の処理はストア内のactionsに書くのが一般的でしょうか。

または、最終的にstateに関連する部分なので
全部actions内に書くのが一般的でしょうか。
（公式にはアクションを繋げて書くやり方も書いてありますが）

例として他にあげるなら、新規ユーザ登録用のAPIとかも気になります。
(これは登録用コンポーネントに書いても良い気がしますが)

actions内に処理が少ないようであれば全部actionsに書くなど
規模などにもよる部分もあるかと思いますが、気になったので質問させて頂きました。

よろしくお願いします。