常連


await関数でPromiseがresolveされてreturnの内容がtodoに入るはずですが、Promiseが渡ってきます
どこでエラーが起きているのでしょうか？

### 実現したいこと

consoe.log(todo)にthen内のreturn内容を設定する

### 発生している問題・エラーメッセージ

consoe.log(todo)の結果がPromise

### 該当のソースコード

import axios from "axios";

const getTodo = async () => {
  await axios
    .get("https://jsonplaceholder.typicode.com/todos/1")
    .then((res) => {
      return res.data.title;
    })
    .catch((err) => {
      console.log("error");
    });
};

const todo = getTodo();
console.log(todo);




async/awaitを用いたデータ取得ができない

お世話になります。
現在いくつか制限がある中で、Vuetifyを使用する必要があり、自分で色々調べていたのですが、プログラム初心者なこともあって挫折してしまったので投稿させていただきます。

まず生徒にプログラミングを教えており、Vue.jsとVuetifyを使用してアプリを作ろうと考えています。
条件として、授業をしているときにインターネットが使えず、また生徒のPCにはnode.jsやnpmなども使えません。生徒が当日PCを持ってくるので、USB経由でデータを渡してそのデータを使用して授業をするスタイルです。

授業前の準備をしている段階ではインターネットを使うことができるので、Vue.jsのライブラリをjsdelivrから持ってきて<script src="vue.min.js"></script>で読み込むことでVue.jsが使えることが分かったのですが、Vuetifyはどうやらそんな単純にはできないようで、途方にくれております。

質問としましては、まずVuetifyは以上にあげたような条件で、そもそも使うことができるのか？、またもし使うことができるのであれば、どのような手順でインストールすれば良いか教えていただけますと幸いです。

もしVuetifyが使えないのであればTailwind.cssの採用も考えております。

どなたかご存知であれば、ご教示いただけますと助かります。



Vuetifyをネット環境なし（nodeを使わず）で使用したい

今認証付きウェブページを作っています。
認証後、ウェブページにたどり着いた状態で、一定時間操作がなければ(例えば１時間)、自動でログアウトさせるような仕組みを検討しています。
ただ、その仕組みがわからず、どう実装すればよいかわかりません。
javascriptのsetTimeoutを使って時間を計測する方法は見かけたのですが、これが一般的なやり方なのでしょうか。
認証しているためトークンがありますが、なにかこのトークンを用いて自動ログアウトを実装できないものでしょうか。
(トークンに関して、あまり理解できておりません。)

セッションタイムアウト、自動ログアウトの仕組みが知りたい

こちらの画像の様にテキストエリアに文章をレンダリングしている部分をカスタマイズしたいです。
具体的にはテキストデータの中の該当のコマンドを検知して、そのコマンドの部分をChipのようなものに置き換えて表示させたいです。
そのようなやり方をはどうすれば良いのでしょうか？

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-15/dac219c2-d078-49e6-80a4-6bc806326ae8.png)

テキストエリアにChipの様なものを表示させたい

Reactを用いて開発をしております。勉強不足で恐縮ですが以下内容で質問させてください。

①前提・実現したいこと

ラジオボタンで選んだ項目によって表示される画像が変化するようにコンポーネントを組みたいです。

②発生している問題・エラーメッセージ

ラジオボタンの選択は問題なく実装できているようなのですが、肝心の画像表示がされません。（画像が格納されていることとパスが正しいことは確認済みです）

③該当のソースコード

・create-react-appで作成したものになります。
・画像は以下のようなフォルダ構成でphoto1.jpg、photo2.jpgとして配置しております。
（以下のコードはOption.jsxに記載してあるコードとなります）
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-04/1b726ab2-cacb-414b-8d1b-72e1e2ede77e.png)

```Javascript(React)
import React, { useState,useEffect } from 'react';

export const Option = (props) => {
  const [val, setVal] = useState('');
  const handleChange = e => setVal(e.target.value);

  return (
    <AppBar>
        <label>
          <input
            type="radio"
            value="../images/photo1.jpg"
            onChange={handleChange}
            checked={val === '../images/photo1.jpg'}
          />
          A
        </label>
        <label>
          <input
            type="radio"
            value="../images/photo2.jpg"
            onChange={handleChange}
            checked={val === '../images/photo2.jpg'}
          />
          B
        </label>
        <img src={val} alt="composedphoto"/>
    </AppBar>
  );
}

```

④自分で調べたことや試したこと

stateでラジオボタンのvalueを上書きし、それをもとにimgタグのsrcを変化させれば良いと考え、上記コードを試しましたが、うまく動作しません。（検証で調べてみるとsrcには正しくパスが表示されているのですが、画像を読み込めません）

⑤使っているツールのバージョンなど補足情報

reactはver.17を使用しています。

どこかに抜け漏れがあると思うのですが、ご教示いただけますとありがたいです。よろしくお願いいたします。


ラジオボタンで選んだ項目によって表示される画像が変化するような実装をしたい

### 前提

Laravel初心者です。よろしくお願いします。
マッチングサイトを作っていますが、プロフィールの登録画面を実装中に頓挫しています。
フォームからデータを入力してsubmitすると、送信されずにログアウトしてしまいます。
DBには何も入っていません。エラーも何も出てこないので、とっかかりが無く困っています。

使用環境
MacOS Big Sur ver 11.2.1
PHP ver 7.3.8
Laravel ver 5.8.35
MAMP ver 4.5
Bootstrap

### 実現したいこと

データを送信してDBに格納したい。

### 発生している問題・エラーメッセージ

```
エラーメッセージ無し。ただ黙ってログアウト
```

### 該当のソースコード
登録画面のForm部分です。
```PHP
<form method="POST" action="{{ route('profiles.store') }}">
        @csrf
        <div class="form-group">
            <label for="favorite">
                名前
            </label>
            <input
                id="favorite"
                name="favorite"
                class="form-control {{ $errors->has('favorite')? 'is-invalid' : '' }}"
                value="{{ old('favorite') }}"
                type="text"
            >
            @if ($errors->has('favorite'))
                <div class="invalid-feedback">
                    {{ $errors->first('favorite') }}
                </div>
            @endif
        </div>

        <div class="mt-5">
            <a class="btn btn-secondary" href="{!! url('/') !!}">
                キャンセル
            </a>

            <button type="submit" class="btn btn-primary">
                投稿する
            </button>
        </div>
    </form>

```



ルーティングの該当部分です。
```PHP
Route::get('profiles/show', 'ProfilesController@show')->name('profiles.show');

Route::post('profiles/store', 'ProfilesController@store')->name('profiles.store');

```

コントローラーの該当部分です。マイページのリンクから show()に飛ばし、プロフィールが無ければ登録画面を表示という流れにしています。
```PHP
 public function store(Request $request)
    {  
        $params = $request->validate([
            'user_id' => 'required|exists:users,id',
            'favorite' => 'max:400',
        ]);

        $user = User::findOrFail($params['user_id']);

        $user->profiles()->create($params);

        return redirect()->route('profiles.show');  
    }

    public function show()
    {
        $user_id = Auth::id();
        $profile = Profile::where('user_id',$user_id)->first();
        if ($profile) {
            return view('profiles.show',['profile' => $profile]); 
        }else{
            return view('profiles.new');
        } 
    }


```

### 試したこと

- コントローラーの store() の先頭にdd($request )挿入　→  何も反応無し、ログアウト。

- ルーティングのpostの所でfunc( )挿入、文章が表示されるようにする　→  何も反応無し、ログアウト。

- Chromeの検証ツールでアクセスログを見てみる　→  profiles/show  から　/logout  していると判明。理由は不明。


---
謎なのは掲示板機能も付けているのですが、そこではFormは正常に動作しています。記述の仕方は一緒です。
つたない文章ですみません。他にも書いた方が良い情報がありましたら教えてください。
ご多忙中のところ恐縮ですが、何卒よろしくお願いします。
### 

---

追記：　検証ツールのスクリーンショットを記載します。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-03-30/79c06abc-ee89-4682-9aed-a2d476891257.png)

LaravelでFormから送信できない。

interfaceに引数付きメソッドを定義してclassに実装したところ，引数の補完が効かない事象に遭遇しました．
~~調べたところ，TypeScriptの「Substitutability（Google翻訳：代替可能性）」が働いているのかもしれないという考えがでました．~~
引数やその型を強制させることはできないのでしょうか？

```ts
// Type.ts

export interface Type {
    method(arg: number): void
}
```

```ts
// Class.ts

import type { Type } from './Type'

class Class implements Type {
    method(arg) { // パラメーター 'arg' の型は暗黙的に 'any' になります。ts(7006)
        
    }
}
```

classにinterfaceを実装するとき，メソッドの引数が強制されない



### 前提・実現したいこと

railsを用いてあるアプリケーションを作っており、ヘッダーにログイン状態か否かで表示が変わるボタンを設置しようとしている（アプリケーションはEC2でデプロイ）。
if文による条件分岐を用いて、HTMLの表示を変えているが、ログイン状態と非ログイン状態のときで意図しない表示の違いが発生してしまう。

**ログイン時**
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-03-02/f21e8292-acb8-43bd-9083-b235553f33e5.jpeg)
**非ログイン時**
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-03-02/92048e7b-9567-429e-8b74-6a06fd6885bb.jpeg)

このように、非ログイン時では、なぜかボタンが縦置きになってしまう。
非ログイン時の方が確実にwidthが小さいため、幅のせいで改行されてしまっている感じではないように思える。
また、検証ツールを用いた場合であれば、スマホサイズの画面表示にしてもこのようにボタンが縦置きになることはなく、本番環境かつスマホ画面の場合だけこのような表示崩れが発生する。

フロントの知識が曖昧で、何か根本的な間違いを犯しているかもしれません。何かお分かりでしたら、どうぞよろしくお願いいたします。

### 該当のソースコード

**viewファイル**
```ruby
<div class="nav">
  <div class="nav__left">
    <%= link_to image_tag("logo.png", class: :logo), root_path %>
  </div>
  <% if user_signed_in? %> 
    <div class="nav__right">
      <%= link_to "マイページ", user_path(current_user.id), class: :nav__btn %> 
      <%= link_to "お題を設定", new_theme_path, class: :nav__btn %> 
    </div>
  <% else %>
    <div class="nav__right">
      <%= link_to "ログイン", new_user_session_path, class: :nav__btn %>
      <%= link_to "新規登録", new_user_registration_path, class: :nav__btn %>
    </div>
  <% end %>
</div>
```
**css**
```css
.nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.nav__right {
  padding-right: 10px;
}
.nav__btn{
  display: inline-block;
  padding: 0.4em 1.6em;
  font-size: 1.6em;
  color: #EDF0AF;
  text-decoration: none;
  user-select: none;
  border: 1.5px #EDF0AF solid;
  border-radius: 3px;
  transition: 0.4s ease;
  background: #A574B0;
  vertical-align: center;
}
.nav__btn:hover{
  color: #EDF0AF;
  background: #d2b7d8;
}
```
