常連

注目の的

質問力

### 前提・実現したいこと
laravelアプリケーションからs3に画像をアップロード指定のですが
エラーが出てしまいます
デバックしてみてみるとStorage::disk()が動いていないようなのですが原因が分かりません
どなたか教えてください。

### 発生している問題・エラーメッセージ

```
Class 'App\Http\Controllers\Storage' not found
```

### 該当のソースコード

```ここに言語名を入力
$file=$request->upfile;
$path=Storage::disk('s3')->putFile('/', $file, 'public');
```

### 試したこと

use Storage;やApp\Http\Cotrollers\Storageなどしてみましたが
そもそもそんなクラスがなく動きませんでした
.envのキー設定や
AWS側でのバケット作成から各種設定などはしています
コマンドにて
composer require league/flysystem-aws-s3-v3
も実行しております

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

laravelでs3を使った画像アップロードについて

タイトル通り、「position: fixed」を指定した要素の直下のmarginの挙動が理解できずに困っています。
「position: fixed」を指定する前は①の画像のように全く問題は無かったのですが、それを指定した途端に画像②のようにレイアウトが崩れてしまいました。
デベロッパーツールで確認してみた所、③の画像のようにh1で指定したmarginが意図した挙動ではなく、何故か背景ごと移動してしまっているような感じです。
自分ではイマイチ解決策が見いだせず、質問させていただきました。
①の画像のレイアウトを保ったまま「position: fixed」にするにはどうすれば良いでしょうか？

皆様、ご教授よろしくお願いいたします。

-画像①-
![イメージ説明](efb026df3042c1256097296be4a2b94c.png)

-画像②-
![イメージ説明](0a8e4f1d076a88b3202adc3e12511ef1.png)

-画像③-
![イメージ説明](a0d1535b08d7c7e88ef84af05a46653e.png)

長くなってしまって申し訳ありませんが、該当箇所のコードは一応全て貼らせていただきます。

```HTML
<header>
  <div class="header-navi">
    <img src="img/mylogo.png">
    <nav>
      <ul>
        <li><router-link to="/top">TOP</router-link></li>
        <li><router-link to="/about">ABOUT</router-link></li>
        <li><router-link to="/skills">SKILLS</router-link></li>
        <li><router-link to="/works">WORKS</router-link></li>
      </ul>
    </nav>
  </div>
  <h1>Taku's</h1>
  <h2>portfolio site</h2>
  <p>Welcome to my site!</p>
  <div class="down">
    <a href="#landing" class="button-sizing"><i class="fas fa-angle-down"></i></a>
  </div>
</header>
```
あとCSSにはこのサイトのreset cssを一番最初に読み込んでいます。[http://html5doctor.com/html-5-reset-stylesheet/](http://html5doctor.com/html-5-reset-stylesheet/)
```CSS
.center-wrapp {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.button-sizing {
  display: block;
  width: 100%;
  height: 100%;
}

header {
  width: 100%;
  height: 100vh;
  font-family: 'Orbitron', sans-serif;
  color: #ffffff;
  text-shadow: 1px 2px 3px #1d1d1d;
  background: linear-gradient(135deg, rgba(10, 19, 255, 0.6), rgba(0, 195, 230, 0.6)),url("../img/header-image3.jpg");
  background-size: cover;

}

.header-navi {
/*
  position: fixed;
  z-index: 999999;
  top: 0;
*/
  width: 100%;
  height: 60px;
  background-color: rgb(255, 255, 255, 0.9);
  display: flex;
  justify-content: center;
}

header img {
  border-radius: 50%;
  margin-right: 200px;
  width: 60px;
  height: 60px;
}

nav ul {
  margin: 0 auto;
  display: flex;
}

nav li {
  width: 200px;
  line-height: 60px;
  font-size: 20px;
  font-weight: bold;
  text-shadow: none;
/*  border-bottom: 2px solid #ffffff;*/
}

nav li:hover {
  background-color: rgb(255, 255, 255, 1);
  transition: 0.8s;
}

nav a {
  display: block;
  width: 100%;
  height: 100%;
  color: black;
}

header h1 {
  margin: 200px auto 80px;
  font-size: 85px;
  letter-spacing: 0.2em;
}

header h2 {
  margin: 50px auto 30px;
  font-size: 40px;
  letter-spacing: 0.3em;
}

header p {
  font-size: 20px;
  margin: 200px auto 30px;
  cursor: pointer;
}

.down {
  margin: 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid white;
}

.down:hover {
  background-color: white;
  color: rgb(9, 63, 209, 0.9);
  transform: scale(0.9);
  transition: 0.8s;
}

.down i{
  height:40px;
  width: 40px;
  color: white;
  font-size: 30px;
  line-height: 40px;
  text-shadow: none;
}

.down i:hover {
  color: rgb(9, 63, 209);
}
```

「position: fixed」を指定した要素の直下のmarginの挙動について

いつもお世話になっております。不明な点があったのでご質問させてください。jsonからデータを取り込んで比較して処理を加えたいと思ったのですが、if文を使用したときに小さい数値がtrueになりました。

```javascript
var score40 = '40';

if('5' > score40)//true

if('1' > score40)//false
```

なぜこのような結果になるのかご存知の方がいらっしゃいましたらご教授いただけますと幸いです。

【javascript】if文で小さい数値がtrueになる原因を教えて欲しいです。

### 実現したいこと

一つの続きを読むを押すと他の要素の続きを読む部分も開いてしまうのを独立して個別で表示されるようにしたい。


```html
<p class="btn_read btn_read01">続きを読む</p>
<p>コンテンツoff</p>
<p class="read_on">コンテンツon</p>
<p class="btn_close btn_close01">閉じる</p>

<p class="btn_read btn_read02">続きを読む</p>
<p>コンテンツoff</p>
<p class="read_on">コンテンツon</p>
<p class="btn_close btn_close02">閉じる</p>

<p class="btn_read btn_read03">続きを読む</p>
<p>コンテンツoff</p>
<p class="read_on">コンテンツon</p>
<p class="btn_close btn_close03">閉じる</p>
```

```css
	.read_on{
		display: none;
	}
	.btn_close{
		display: none;
	}
```

```javascript
	$(function(){
		$("p.btn_read").on("click", function(){
			$(this).next().slideToggle();
			$('.read_on').slideDown();
			$('p.btn_read').css('display','none');
			$('p.btn_close').css('display','block');
		})
		$("p.btn_close").on("click", function(){
			$('p.btn_read').css('display','block').next().slideToggle();
			$('p.btn_close').css('display','none');
			$('.read_on').slideUp();
		})
	})

```

javascript アコーディオンでの開閉について

```
hoge = 
   [
      {id: 1, name: '太郎', age: 22},
      {id: 2, name: '二郎', age: 22},
      {id: 3, name: '三郎', age: 22},
      {id: 4, name: '四郎', age: 22},
      {id: 5, name: '五郎', age: 22},
      {id: 6, name: '六郎', age: 22},
   ]
```

この配列のage要素のみ全て23に置き換える方法はありますか？

JavaScriptの配列で特定の要素のみ値を一括で変更したい

いつもお世話になっております。javascriptに関して質問をさせてください。

```javascript
user:[
 {id:1,userName:'太郎',birth:'1990/02/01',like:'カレーライス'},
 {id:2,userName:'花子',birth:'1990/03/01',like:'パスタ'},
 {id:3,userName:'武',birth:'1980/04/01',like:'牛丼'},
]
```

上記の配列から任意のオブジェクトを取り出し別の変数に格納して以下のような形にしたいです。

```javascript
//各idとnameだけ別のオブジェクトに入れたい

data:[
 {id:1,userName:'太郎'},
 {id:2,userName:'花子'},
 {id:3,userName:'武'},
]
```

mapを使用したりなどしたのですが、複数のkeyと値を取得する方法がわかりません。もしわかる方がいらっしゃいましたらご教授頂けますと幸いです。