常連

注目の的

[開発環境]
ruby 2.6.3   ,     Rails 5.1.6
git version 2.14.5   ,     heroku/7.35.1 linux-x64 node-v12.13.0

railsチュートリアルの１章の最後の所で、herokuにデプロイするところが解決しません。
自分の作ったappをherokuで開いたら
Application　error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
と出てきました。
なのでdatabace.ymlの
production:
  <<: *default
  adapter: postgresql
  encoding: unicode
  pool: 5
部分を変更した後にherokuで実行しても同じ Application errorが起きたので、
次にheroku run rails db:migrateを実行したら、
Running rails db:migrate on ⬢ アプリ名... up, run.4889 (Free)
rails aborted!
Gem::LoadError: Specified ‘sqlite3’ for database adapter, but the gem is not loaded.
Add `gem ‘sqlite3’` to your Gemfile (and ensure its version is at the minimum required by ActiveRecord).
と
Gem::LoadError: sqlite3 is not part of the bundle. Add it to your Gemfile.
この2文が書いてあったので、sqlite3のバージョンが間違っていたと思い、
railsチュートリアルに書いてあった
group :development, :test do部分の
gem 'sqlite3', '1.3.13' を　　gem 'sqlite3', '~> 1.3.6'に変更し
bundle install --without productionを実行し、
herokuの自分のアプリのURLに飛んでも同じApplication errorが起きます。
　次にheroku login --interactiveを実行し自分の情報を入力した後に、
git push heroku masterを実行したら、Everything up-to-dateと書いてあったので、
再びherokuで自分のアプリを開いたのですがまたもやApplication errorです。
因みに、binフォルダの全てのファイルの中を確かめた結果、#!/usr/bin/env ruby　こう記載されていました。

自分なりに試行錯誤しているつもりなんですが、どうしたらいいか分かりません。
どうかよろしく御願い致します。

rails tutorial第１章　herokuデプロイ

### 前提・実現したいこと

rails初心者です。
ruby:2.5.0 rails:6.0.2.1 Homebrew:2.1.6 rbenv:1.1.2 データベースpostgres (PostgreSQL):12.1
をインストールし、rails newでディレクトリを作成しました。
### 発生している問題・エラーメッセージ

```
[rails s]や[rails g controller]を打ち込んでも下記のエラーになります。
```

### 該当のソースコード

```ここに言語名を入力
raceback (most recent call last):
	1: from bin/rails:3:in `<main>'
bin/rails:3:in `require_relative': cannot load such file -- /Users/私の名前/Desktop/アプリ名/config/boot (LoadError)
```

### 試したこと

何度か[rails new]で作り直しましたが、解決しませんでした。


### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

サーバーが起動できない

かんたんログイン機能をつけようとしています。

トップ画面に以下のリンクをつけ、
```rails5
<%= link_to("かんたんログイン", "/guest_login") %>
```
Routes.rbで以下のようにメソッドに送ります。
```rails5
get "guest_login" => "users#guest_login"
```
そして以下のメソッドでゲストユーザーとしてログインを試みています。
名前：GuestUser
メール：guest@example.com
パスワード：ランダム
```rails5
(users_controller.rb)
  def guest_login
    user = User.find_or_create_by(email: 'guest@example.com')
    user.name = "GuestUser"
    user.password = SecureRandom.urlsafe_base64
    session[:user_id] = user.id
    redirect_to("/posts/index")
    flash[:notice] = "ゲストユーザーとしてログインしました"
  end
```
しかし実際に上記のゲストユーザーがある場合はログインできるのですが、
メールアドレスを変更してしまうとログインができません。

以下のような記事を見るとfind_or_create_byは検索条件に合致するデータが存在した場合はそれを使い、
存在しない場合は新規作成するとあります。
[http://maru877.hatenablog.com/entry/2017/07/07/211422](http://maru877.hatenablog.com/entry/2017/07/07/211422)
[https://qiita.com/taimuzu/items/0a21738d018f475d63ae](https://qiita.com/taimuzu/items/0a21738d018f475d63ae)
上記のコードでは検索しかされず、新規作成をしてくれません。

どこを修正すればかんたんログイン機能になるのか、教えていただけると助かります。
参考までコントローラ全部を貼っておきます。

```rails5
(user_control.rb)
class UsersController < ApplicationController
  before_action :authenticate_user, {only: [:index, :show, :edit, :update]}
  before_action :forbid_login_user, {only: [:new, :create, :login_form, :login]}
  before_action :ensure_correct_user, {only: [:edit, :update]}

  def index
    @users = User.all
  end

  def show
    @user = User.find_by(id: params[:id])
  end

  def new
    @user = User.new
  end

  def create
    @user = User.new(
      name: params[:name],
      email: params[:email],
      image_name: "default_user.jpg",
      password: params[:password]
    )
    if @user.save
      session[:user_id] = @user.id
      flash[:notice] = "ユーザー登録が完了しました"
      redirect_to("/users/#{@user.id}")
    else
      render("users/new")
    end
  end

  def edit
    @user = User.find_by(id: params[:id])
  end

  def update
    @user = User.find_by(id: params[:id])
    @user.name = params[:name]
    @user.email = params[:email]

    if params[:image]
      @user.image_name = "#{@user.id}.jpg"
      image = params[:image]
      File.binwrite("public/user_images/#{@user.image_name}", image.read)
    end

    if @user.save
      flash[:notice] = "ユーザー情報を編集しました"
      redirect_to("/users/#{@user.id}")
    else
      render("users/edit")
    end
  end

  def login_form
  end

  def login
    @user = User.find_by(email: params[:email])
    if @user && @user.authenticate(params[:password])
      session[:user_id] = @user.id
      flash[:notice] = "ログインしました"
      redirect_to("/posts/index")
    else
      @error_message = "メールアドレスまたはパスワードが間違っています"
      @email = params[:email]
      @password = params[:password]
      render("users/login_form")
    end
  end

  def guest_login
    user = User.find_or_create_by(email: 'guest@example.com')
    user.name = "GuestUser"
    user.password = SecureRandom.urlsafe_base64
    session[:user_id] = user.id
    redirect_to("/posts/index")
    flash[:notice] = "ゲストユーザーとしてログインしました"
  end

  def logout
    session[:user_id] = nil
    flash[:notice] = "ログアウトしました"
    redirect_to("/login")
  end

  def likes
    @user = User.find_by(id: params[:id])
    @likes = Like.where(user_id: @user.id)
  end

  def ensure_correct_user
    if @current_user.id != params[:id].to_i
      flash[:notice] = "権限がありません"
      redirect_to("/posts/index")
    end
  end

end

```

Rails かんたんログイン機能について

### 前提・実現したいこと
Railsチュートリアルを現在進めているのですが、本番環境へデプロイ後、ログインページにかかってローカルで確認しようと思うとrails serverが起動せず、即切れてしまいます。本番につなぐ設定をしたのが影響とは思うのですが、何か切り替えるような設定方法は無いのでしょうか。詳しい方、いらっしゃましたらアドバイス頂得ますと有難いです。よろしくお願いします。

### 発生している問題・エラーメッセージ

```
$ rails s
=> Booting Puma
=> Rails 5.1.6 application starting in development
=> Run `rails server -h` for more startup options
ERROR: worker mode not supported on JRuby or Windows
Exiting


$ rails s -p
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/thor-1.0.1/lib/thor/parser/options.rb:228:in `parse_peek': No value provided for option '--port' (Thor::MalformattedArgumentError)
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/thor-1.0.1/lib/thor/parser/options.rb:100:in `parse'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/thor-1.0.1/lib/thor/base.rb:79:in `initialize'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/thor-1.0.1/lib/thor/invocation.rb:26:in `initialize'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/thor-1.0.1/lib/thor/shell.rb:45:in `initialize'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/railties-5.1.6/lib/rails/commands/server/server_command.rb:123:in `initialize'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/thor-1.0.1/lib/thor.rb:388:in `new'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/thor-1.0.1/lib/thor.rb:388:in `dispatch'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/railties-5.1.6/lib/rails/command/base.rb:63:in `perform'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/railties-5.1.6/lib/rails/command.rb:44:in `invoke'
        from C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/railties-5.1.6/lib/rails/commands.rb:16:in `<top (required)>'
        from bin/rails:4:in `require'
        from bin/rails:4:in `<main>'

```

### 該当のソースコード

```ここに言語名を入力
ソースコード
```

### 試したこと
ネットの中に、Puma.rbファイルの　
workers ENV.fetch("WEB_CONCURRENCY") { 2 }　をコメントアウトする・・と
いうのがありましたので、やってみましたがやはり即座にexitして上記エラーと
大量のルーティングエラーが出ました。

$ heroku ps:scale web=0 コマンドでappを停止したのですがやはりpumaのエラーが出て
localhost:3000に繋がりません。

### 補足情報（FW/ツールのバージョンなど　


ここにより詳細な情報を記載してください。

Heroku本番環境へデプロイ後、開発環境でのRailsサーバーが起動しない。

### 前提・実現したいこと
現在Railチュートリアル2章を行っております。
：[Railチュートリアル2章](https://railstutorial.jp/chapters/toy_app?version=5.1#sec-demo_users_resource)

そこで、まずアプリケーションファイルをBitbucketにプッシュし、ここまでは上手くいきました。
しかし、Herokuにプッシュし、scaffoldコマンドでusersデータモデルを生成後、「Hello World!」のプレビューは表示されるにも関わらず、「/users」でプレビューを行ってもエラーが表示されてしまいます。

![イメージ説明](56e45269771f738d960374dc21df2d19.jpeg)

原因はなんなのか、原因の探り方をご教授いただきたいです！

Cloud9を用いています。
Railsチュートリアルの1章では上手くこなせました。しかし、2章のコードを丸写ししても上手くいきません。

Cloud9を用いるのが初めてなのもあり、コマンドの使い方に問題があるのかなと考えております。
（ProgateでRailsの基本的な部分は学んでいるつもりですので）

Railsチュートリアル2章でプレビューがエラー表示される

$ rails db:migrateでマイグレーションを実行したところ、実行できず以下のようなエラーが表示されました。

StandardError: An error has occurred, this and all later migrations canceled:

SQLite3::SQLException: table "users" already exists



実行する予定だったマイグレーションファイルは以下のものです。

```
class DeviseCreateUsers < ActiveRecord::Migration[6.0]
  def change
    create_table :users do |t|

      t.string :name
      t.string :image
      ## Database authenticatable
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      ## Recoverable
      t.string   :reset_password_token
      t.datetime :reset_password_sent_at

      ## Rememberable
      t.datetime :remember_created_at

      ## Trackable
      # t.integer  :sign_in_count, default: 0, null: false
      # t.datetime :current_sign_in_at
      # t.datetime :last_sign_in_at
      # t.string   :current_sign_in_ip
      # t.string   :last_sign_in_ip

      ## Confirmable
      # t.string   :confirmation_token
      # t.datetime :confirmed_at
      # t.datetime :confirmation_sent_at
      # t.string   :unconfirmed_email # Only if using reconfirmable

      ## Lockable
      # t.integer  :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts
      # t.string   :unlock_token # Only if unlock strategy is :email or :both
      # t.datetime :locked_at


      t.timestamps null: false
    end

    add_index :users, :email,                unique: true
    add_index :users, :reset_password_token, unique: true
    # add_index :users, :confirmation_token,   unique: true
    # add_index :users, :unlock_token,         unique: true
  end
end

```



おそらく、原因は以前に誤って別のusersテーブルを作ってしまったことだと思うのですが、そのusersテーブルの削除方法が分かりません。

教えて頂きたいです、よろしくお願いします。

Ruby on Rails テーブルの削除の方法が分からない

### 前提

現在、Railsチュートリアルの3章に進みました。
ここから作成する「sample_app」を指示に従って動作させていたところ、
本来ならミニテストが正常に終了する箇所（[3.3.1](https://railstutorial.jp/chapters/static_pages?version=5.1#sec-our_first_test)）で、エラーが返ってきてしまいました。

### 目標
エラーの原因を特定し、チュートリアル通りに進めたいです。

### 発生している問題・エラーメッセージ

```
c:\Users\hogehoge\environment\sample_app>rails test
Run options: --seed 57104

# Running:

E.

Finished in 6.571701s, 0.3043 runs/s, 0.1522 assertions/s.

  1) Error:
StaticPagesControllerTest#test_should_get_help:
ActionView::Template::Error: Permission denied @ rb_file_s_rename - (c:/Users/hogehoge/environment/sample_app/tmp/cache/assets/sprockets/v4.0.0/Yh/YhHOK_mLaIKRn3B_fo-OHKB5hW3oZ-Xe98nL0slx06E.cache.84074100.7464.690062, c:/Users/hogehoge/environment/sample_app/tmp/cache/assets/sprockets/v4.0.0/Yh/YhHOK_mLaIKRn3B_fo-OHKB5hW3oZ-Xe98nL0slx06E.cache)
    app/views/layouts/application.html.erb:8
    test/controllers/static_pages_controller_test.rb:10:in `block in <class:StaticPagesControllerTest>'

2 runs, 1 assertions, 0 failures, 1 errors, 0 skips

```

### 試したこと

・「sample_app」の作成過程をもう一度（別のアプリを作成する形で）やり直したところ、同じ現象が発生した
・エラーを無視してチュートリアルを進めたものの、自分でテストを作成する段階（[3.3.3](https://railstutorial.jp/chapters/static_pages?version=5.1#sec-green)）でも同じ現象が発生した

### チュートリアル内容との差異
OS: Windows10 Home
環境：Cloud9は未使用。ローカル上に構築
リモートリポジトリ:GitHubを使用
リモートリポジトリ名：originからgithubに変更

Ruby:2.6.5p114
Rails:6.0.2.1

Rubyに関しては安定バージョンを採用しました。
Railsや他gemに関しても、チュートリアル通りにバージョン指定をすると依存gemがインストールできないなどの問題があったため、
Gemfileにはチュートリアルと比較して以下の差異があります。
0. 「git_source(:github) { |repo| "https://github.com/#{repo}.git" }」の記述の追加
1.  Rubyのバージョン指定を追加（2.6.5）
2.  Rails以下gemはすべてバージョン指定なし（自動的に最新バージョンでインストールされる）
3. 「gem 'bootsnap', require: false」「gem 'webpacker'」の記述を追加（グループなし）

### 補足情報

今回のエラーでは、「rails t」のみ正常にテストが通る（"2 assertions"になる）現象も発生しております。
1. 「test」と「t」を実行
⇒「t」のみが通る**場合がある**
2. 「t」が通った数分間何もせず、再度「t」を実行
⇒エラー発生状態に戻ってしまう
3. 「test」は一回も正常結果を返したことがない

当初は「rails t」なら通るのでは？と考えていたのですが、検証したところ通るかどうかは不定であり、条件も不明です。
また「test」と「t」は短縮形かどうかの違いであり、実際の動作に差異はないという認識です。

お分かりになられる方がいらっしゃいましたら、何とぞアドバイスの方をよろしくお願いいたします。

Railsチュートリアルのミニテストでエラーが返ってきてしまう。

### 前提・実現したいこと

railsでユーザー管理機能の実装を行いたい
deviseをインストールしサーバー再起動等行い
Userモデルを作成し、rails db:migrateを行おうとすると以下のエラーが発生し
rails sもできなくなった

OS Mac Mojave
ruby 2.5.1p57
Rails 5.0.7.2

### 発生している問題・エラーメッセージ
/Users/shimoekisei/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/mysql2-0.5.3/lib/mysql2/client.rb:90: [BUG] Segmentation fault at 0x0000000000000000
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-darwin18]

-- Crash Report log information --------------------------------------------
   See Crash Report log file under the one of following:                    
     * ~/Library/Logs/DiagnosticReports                                     
     * /Library/Logs/DiagnosticReports                                      
   for more details.                                                        
Don't forget to include the above Crash Report log file in bug reports.     

```
### エラーメッセージ
```
[NOTE]
You may have encountered a bug in the Ruby interpreter or extension libraries.
Bug reports are welcome.
For details: http://www.ruby-lang.org/bugreport.html

[IMPORTANT]
Don't forget to include the Crash Report log file under
DiagnosticReports directory in bug reports.

Abort trap: 6

### 試したこと

bundle update
PCの再起動

db:migrate Rails sができなくなった

初学者です。入力画面で、相手への評価ポイントを入れて、今までのポイントと合わせて平均を求めるところで、
undefined method `to_i' for <ActionController::Parameters {"point"=>"5"} permitted: true>:ActionController::Parameters Did you mean? to_h to_s
というエラーが出ています。
どう直したらいいのか分かりません。すいませんが、お知恵を貸してください。
```html
<%= form_tag("/posts/#{@post.id}/finishedafter",method: :post) do %>
            <p>タイトル</p>
            <h3><%=@post.title%></h3>
            <p>取引相手</p>
            <h3><%=@post.postedname%></h3>
            <p>評価０～５（最高は５です）</p>
            <div class="select">
              <select  name="point" id="point" required >
                 <option selected value= "" >選択してください</option>
                 <option value= "0" >0</option>
	             <option value= "1" >1</option>
                 <option value= "2" >2</option>
	             <option value= "3" >3</option>
                 <option value= "4" >4</option>
	             <option value= "5" >5</option>
              </select>
            </div>
           <div class="new-btn">
            <label><input class="btn btn-danger btn-lg " type="submit" value="取引を完了する"></label>
           </div>
        <% end %>
```

という形で送り。
```ruby

post.controller

def finishedafter
    newpoint = params.permit(:point)      
    @post = Post.find_by(id:params[:id])　　　＜＝相手の投稿
    @user = User.find_by(id:@post.user_id)　　＜＝相手のデータ

    @user.finishcount += 1　　　　　　　　　　　＜＝平均を求めるための件数
    @user.point.to_f = (@user.point + newpoint.to_i) / @user.finishcount　
　　（相手の評価ポイント　＝　相手のポイント　＋　今回のポイント　/　件数）
    @user.save
    redirect_to("/")
  end
```

```db

create_table "users", force: :cascade do |t|
    t.string "user_name"
    t.string "password_digest"
    t.string "email"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.string "imagename"
    t.integer "point"
    t.boolean "admin", default: false
    t.integer "finishcount"
  end
```

rails  ポイントの平均を出すところでundefined method `to_i' for のエラーがでます

##

ruby on railsでレシピ投稿サイトを作成しております。（初学者です。）
投稿したレシピに対してAjaxでのコメント機能を実装中にエラーが発生し、
解決策が見えないため質問させていただきます。

コメント機能実装には以下のサイトを参考にさせていただきました。
[Ajaxを用いた動的なコメント投稿・削除機能の実装で学ぶRuby on Rails](https://qiita.com/miyazaki_yusuke/items/dd1c053851a042cae893)

### 発生している問題・エラー


コメントをsubmitすると、Ajaxが機能せず、「Template is missing」のエラー画面となり、
JSファイルにアクセスできていないようです。
コメントの削除は正常に機能しています。
![イメージ説明](a6159b4af88b3fdeaae80c21b71a3378.png)

### recipes.controller.rb（一部抜粋）

```ここに言語名を入力
def show
    @recipe = Recipe.find(params[:id])
    @comment = Comment.new
    @comments = @recipe.comments
    @like = Like.new
  end
```### comments.controller.rb

```ここに言語名を入
class CommentsController < ApplicationController
  before_action :authenticate_user!

  def create
    @recipe = Recipe.find(params[:recipe_id])
    @comment = @recipe.comments.build(comment_params)
    @comment.user_id = current_user.id
    if @comment.save
      render :js_comment
    end
  end

  def destroy
    @comment = Comment.find(params[:id])
    if @comment.destroy
      render :js_comment
    end
  end

  private

    def comment_params
      params.require(:comment).permit(:content, :recipe_id, :user_id)
    end

end


```


### show.html.slim

```ここに言語名を入力
.d-flex.align-items-center.mt-4.mb-4
  .ml-auto.boards__linkBox
    = link_to '一覧', recipes_path, class: 'btn btn-outline-dark'
    = link_to '編集', edit_recipe_path(@recipe), class: 'btn btn-outline-dark'

= render @recipe

.comment__list
  .comment__listTitle
    h3
      |コメント
    #comments_area
      = render partial: 'comments/index', locals: { comments: @comments }

    - if user_signed_in?
      .comment_form
        = render partial: 'comments/form', locals: { comment: @comment, recipe: @recipe }

```

### _form.html.slim

```ここに言語名を入力
.comment__formBox
    .comment__formTitle
      p
        | コメントを残す
      = form_with(model: [recipe, comment] ) do |f|
          = f.text_area :content, placeholder: "コメントを入力", class: 'form-control', rows: 4, id: "text_area"
          = f.submit "コメントする！",class: 'btn btn-outline-warning',remote: true

```

### _index.html.slim

```ここに言語名を入力
  - comments.each do |comment|
    .comment_item
      - unless comment.id.nil?
      .comment_user
        = link_to "#{comment.user.name}さん", comment.user
      .comment-body
        = simple_format(comment.content)
      .comment_delete_btn
        - if comment.user == current_user
          = link_to '削除', recipe_comment_path(comment.recipe_id, comment.id), method: :delete, remote: true, class: 'btn btn-outline-secondary'


```

### js_comment.js.erb

```ここに言語名を入力
$("#comments_area").html("<%= j(render 'index', { comments: @comment.recipe.comments }) %>")
$("textarea").val('')
```


### 補足情報（FW/ツールのバージョンなど）
rails 5.2

【rails5】Ajaxでのコメント投稿機能のrenderが上手くいかず、Template is missingとなってしまう。

### 前提・実現したいこと
初心者向けの本に従ってrails mysql2 mampを入れてアプリケーションを新規作成したあとにruby sを実行すると
Usage~が出てしまい上手くいきません

また、アプリケーションを作成した時のファイル？が本の内容やほかのサイトに比べて少ない気がします
### 発生している問題・エラーメッセージ
```
C:\Users\name\rails_practice>rails new testapp -d mysql
   
  create
      create  README.md
      create  Rakefile
      create  .ruby-version
      create  config.ru
      create  .gitignore
      create  Gemfile
         run  git init from "."

C:\Users\name\rails_practice>cd testapp

C:\Users\name\rails_practice\testapp>rails s
Usage:
  rails new APP_PATH [options]

Options:
      [--skip-namespace], [--no-skip-namespace]              # Skip namespace (affects only isolated applications)
  -r, [--ruby=PATH]                                          # Path to the Ruby binary of your choice
                                                             # Default: C:/Ruby26-x64/bin/ruby.exe
  -m, [--template=TEMPLATE]                                  # Path to some application template (can be a filesystem path or URL)
  -d, [--database=DATABASE]                                  # Preconfigure for selected database (options: mysql/postgresql/sqlite3/oracle/frontbase/ibm_db/sqlserver/jdbcmysql/jdbcsqlite3/jdbcpostgresql/jdbc)
                                                             # Default: sqlite3
      [--skip-gemfile], [--no-skip-gemfile]                  # Don't create a Gemfile
  -G, [--skip-git], [--no-skip-git]                          # Skip .gitignore file
      [--skip-keeps], [--no-skip-keeps]                      # Skip source control .keep files
  -M, [--skip-action-mailer], [--no-skip-action-mailer]      # Skip Action Mailer files
      [--skip-action-mailbox], [--no-skip-action-mailbox]    # Skip Action Mailbox gem
      [--skip-action-text], [--no-skip-action-text]          # Skip Action Text gem
  -O, [--skip-active-record], [--no-skip-active-record]      # Skip Active Record files
      [--skip-active-storage], [--no-skip-active-storage]    # Skip Active Storage files
  -P, [--skip-puma], [--no-skip-puma]                        # Skip Puma related files
  -C, [--skip-action-cable], [--no-skip-action-cable]        # Skip Action Cable files
  -S, [--skip-sprockets], [--no-skip-sprockets]              # Skip Sprockets files
      [--skip-spring], [--no-skip-spring]                    # Don't install Spring application preloader
      [--skip-listen], [--no-skip-listen]                    # Don't generate configuration that depends on the listen gem
  -J, [--skip-javascript], [--no-skip-javascript]            # Skip JavaScript files
      [--skip-turbolinks], [--no-skip-turbolinks]            # Skip turbolinks gem
  -T, [--skip-test], [--no-skip-test]                        # Skip test files
      [--skip-system-test], [--no-skip-system-test]          # Skip system test files
      [--skip-bootsnap], [--no-skip-bootsnap]                # Skip bootsnap gem
      [--dev], [--no-dev]                                    # Setup the application with Gemfile pointing to your Rails checkout
      [--edge], [--no-edge]                                  # Setup the application with Gemfile pointing to Rails repository
      [--rc=RC]                                              # Path to file containing extra configuration options for rails command
      [--no-rc], [--no-no-rc]                                # Skip loading of extra configuration options from .railsrc file
      [--api], [--no-api]                                    # Preconfigure smaller stack for API only apps
  -B, [--skip-bundle], [--no-skip-bundle]                    # Don't run bundle install
  --webpacker, [--webpack=WEBPACK]                           # Preconfigure Webpack with a particular framework (options: react, vue, angular, elm, stimulus)
      [--skip-webpack-install], [--no-skip-webpack-install]  # Don't run Webpack install

Runtime options:
  -f, [--force]                    # Overwrite files that already exist
  -p, [--pretend], [--no-pretend]  # Run but do not make any changes
  -q, [--quiet], [--no-quiet]      # Suppress status output
  -s, [--skip], [--no-skip]        # Skip files that already exist

Rails options:
  -h, [--help], [--no-help]        # Show this help message and quit
  -v, [--version], [--no-version]  # Show Rails version number and quit

Description:
    The 'rails new' command creates a new Rails application with a default
    directory structure and configuration at the path you specify.

    You can specify extra command-line arguments to be used every time
    'rails new' runs in the .railsrc configuration file in your home directory.

    Note that the arguments specified in the .railsrc file don't affect the
    defaults values shown above in this help message.

Example:
    rails new ~/Code/Ruby/weblog

    This generates a skeletal Rails installation in ~/Code/Ruby/weblog.



```
###該当のソースコード
```
rails new testapp -d mysql

rails s

```

### 試したこと

bundle install
gemインストールをもう一度

### 補足情報（FW/ツールのバージョンなど）

完全な初心者です。

rails     rails sでUsageが出てくる

### 前提・実現したいこと

日付の処理を行っていたら、
出力してみて、日付のみとUTCが付くものが出てきて、この違いは何なのか気になりました。
ご教示お願いします。

### 試したこと
第2土曜日を取得してみて、そこから、次の週の月曜日を取得するのに、
2通りのやり方で試したところ、出力結果が変わったので、この違いは何なのか、どうして、この違いが生じてしまうのかが気になりました。

```ruby
# 第2土曜
puts sat2
# 第2土曜の後の月曜日
puts sat2.next_week(:monday)
puts sat2.since(2.days)
```

出力結果。
```
2019-12-14
2019-12-16
2019-12-16 00:00:00 UTC
```

質問1。
```
puts sat2  #2019-12-14
puts sat2.next_week(:monday)  #2019-12-14
```
時間帯が出力されなかった上記2つは、ロケールや時間を持っていない日付という認識で合っていますか？
(UTCや日本時間の+09:00を持っていない、時間を持っていない日にちのみの日付という認識で合っていますか？)
それとも、タイムゾーンが設定されている場合は、どうすれば上記の日付でタイムゾーンを確認することができますか？

質問2。
```
puts sat2.next_week(:monday)  #2019-12-14
puts sat2.since(2.days)　　　　#2019-12-16 00:00:00 UTC
```
上記の結果より、上記の日付は同じ第3月曜日を指しているものの、時間帯の情報が異なる為、異なる日付ですか？
と思ったのですが、下記を試したら、trueになったので、よくわからなくなってしまいました。
```
a = sat2.next_week(:monday)
b = sat2.since(2.days)
puts a==b  #true
```

質問3。
基本的には、日本時間で扱いたいのですが、
```
sat2.since(2.days)
```
だとUTCとなってしまうので、第2土曜日から2日後の月曜日を日本時間で取得するにはどうすればよいでしょうか？
それとも第2土曜日を取得する時点でUTCになってしまっているのでしょうか？
第2土曜日は下記のような式で取得しています。
```
Date.new(now.year, now.month, day)
```

### 追記質問④
```
puts Time.parse("2020/04/12 23:57:00");
```
上記だと日本時間で出力されます。
UTCで得られるものと、日本時間で得られるもの、どういう切り分けでこの差異は出てくるのでしょうか？
```
2020-04-12 23:57:00 +0900
```

UTCが付くものと付かないものの差異。

rails tutorialの第２章でUserモデルとMicropostモデルを関連付けした後にrails consoleで以下のようにコマンドを実行すると何故か投稿が存在しないことになってしまいます。Userの新規登録、新規投稿は実施済みです。

```
irb(main):001:0> first_user = User.first
  User Load (0.2ms)  SELECT  "users".* FROM "users" ORDER BY "users"."id" ASC LIMIT ?  [["LIMIT", 1]]
=> #<User id: 5, name: "ge4e", email: "fafgf", created_at: "2019-12-23 13:50:00", updated_at: "2019-12-23 13:50:00">
irb(main):002:0> first_user.microposts
  Micropost Load (0.2ms)  SELECT  "microposts".* FROM "microposts" WHERE "microposts"."user_id" = ? LIMIT ?  [["user_id", 5],
["LIMIT", 11]]
=> #<ActiveRecord::Associations::CollectionProxy []>
irb(main):003:0> micropost = first_user.microposts.first
  Micropost Load (0.1ms)  SELECT  "microposts".* FROM "microposts" WHERE "microposts"."user_id" = ? ORDER BY "microposts"."id"
 ASC LIMIT ?  [["user_id", 5], ["LIMIT", 1]]
=> nil

irb(main):004:0> micropost.user
Traceback (most recent call last):
        1: from (irb):4
NoMethodError (undefined method `user' for nil:NilClass)
irb(main):005:0> exit
```

また、ブラウザで新規投稿画面でUserの項目の数字<5のときに投稿すると User must exist というエラーが出て　５以上の数字に変えて投稿すると成功します。

ですのでUserのところの数字を５以上にして投稿後上記のコマンドを実行すると上手くいきました。
このようになる原因がわかりません。教えてください。

rails tutorial 2章　データモデルの関連付けに関する質問

前提・実現したいこと
画像とテキストで入力した音声を同期させたい（”あ”の文字を打ったら画像が”あ”の文字になり、VOCALOIDのようなものを作りたい）

発生している問題・エラーメッセージ
画像と音声を出すことはできたが、その二つを同期させるやり方がどのようなコードを使うのかがわからない
ここに言語を入力
```
html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>Talking Face </title>
	<link rel="stylesheet" href="talking-face2.css">
	<script src="./js/face-animation2.js"></script>
	<script src="./js/text-to-speech.js"></script>
</head>

<body>

<canvas id="canvas" width="800" height="750"></canvas>

	<textarea id="text" rows="4" cols="40">
	あいうえお
	</textarea>

<br>
<input type="button" value="目を動かす" onclick="eyeStart();">
<input type="button" value="口を動かす" onclick="mouthStart();">
<input type="text" id="mouthstatus" value="閉" size="4" style="text-align:center;">

<div id="navigation">
		<button id="speak-btn">再生</button>
		<button id="cancel-btn">停止</button>
		<button id="pause-btn">一時停止</button>
		<button id="resume-btn">再開</button>
	</div>
	
<audio id="speech1" src="./data/20_さとうささら_やりますねぇ.wav" controls>

</body>
</html>

``````ここに言語を入力
ここに言語を入力
```
JavaScript// 発音記号列
var PronNum = -1; //開始前は-1にしておく
var PronSeq = [ { name: "c", time: 2000 },
				{ name: "a", time: 10000 },
                                { name: "e", time: 4000 },
				{ name: "i", time: 4000 },
				{ name: "o", time: 4000 },
				{ name: "u", time: 4000 },  
				{ name: "c", time: 4000 } ];

// canvas変数
var cvs;
var ctx;

// 顔データの保存領域
var img_f   = new Image();
var img_eL1 = new Image();
var img_eL2 = new Image();
var img_eL3 = new Image();
var img_eR1 = new Image();
var img_eR2 = new Image();
var img_eR3 = new Image();
var img_mc  = new Image();
var img_ma1 = new Image();
var img_ma2 = new Image();
var img_ma3 = new Image();
var img_ma4 = new Image();
var img_mi1 = new Image();
var img_mi2 = new Image();
var img_mu1 = new Image();
var img_mu2 = new Image();
var img_me1 = new Image();
var img_me2 = new Image();
var img_mo1 = new Image();
var img_mo2 = new Image();

// 顔データを取り出す連想配列
var imgdata;

// 表示する顔データ
var img_f  = new Image(); //顔
var img_eL = new Image(); //左目
var img_eR = new Image(); //右目
var img_m  = new Image(); //口

// タイマー変数
var tickTimeID;
var eyeTimeID, mouthTimeID, PronTimeID;
var eyeNum=mouthNum=1;

//ロード時に実行しておく関数
window.onload = function(){
	cvs = document.getElementById("canvas");
	ctx = cvs.getContext("2d");
	
	img_f.src   = "./img/face_t.png";
	img_eL1.src = "./img/eye_L1_t.png";
	img_eL2.src = "./img/eye_L2_t.png";
	img_eL3.src = "./img/eye_L3_t.png";
	img_eR1.src = "./img/eye_R1_t.png";
	img_eR2.src = "./img/eye_R2_t.png";
	img_eR3.src = "./img/eye_R3_t.png";
	img_mc.src  = "./img/mouth_c_t.png";
	img_ma1.src = "./img/mouth_a1_t.png";
        img_ma2.src = "./img/mouth_a2_t.png";
        img_ma3.src = "./img/mouth_a3_t.png";
        img_ma4.src = "./img/mouth_a4_t.png";
	img_mi1.src = "./img/mouth_i1_t.png";
	img_mi2.src = "./img/mouth_i2_t.png";
	img_mu1.src = "./img/mouth_u1_t.png";
	img_mu2.src = "./img/mouth_u1_t.png";
	img_me1.src = "./img/mouth_e1_t.png";
	img_me2.src = "./img/mouth_e2_t.png";
	img_mo1.src = "./img/mouth_o1_t.png";
	img_mo2.src = "./img/mouth_o2_t.png";

	imgdata = { "f":   img_f,
				"eL1": img_eL1,
				"eL2": img_eL2,
				"eL3": img_eL3,
				"eR1": img_eR1,
				"eR2": img_eR2,
				"eR3": img_eR3,
				"mc1": img_mc,
				"mc2": img_mc,
				"ma1": img_ma1,
                                "ma2": img_ma2,
                                "ma3": img_ma3,
                                "ma4": img_ma4,
				"mi1": img_mi1,
				"mi2": img_mi2,
				"mu1": img_mu1,
				"mu2": img_mu2,
				"me1": img_me1,
				"me2": img_me2,
				"mo1": img_mo1,
				"mo2": img_mo2};

	//初期顔を表示
	img_f.src = imgdata["f"].src;
	img_eL.src = imgdata["eL"+1].src;
	img_eR.src = imgdata["eR"+1].src;
	img_m.src = imgdata["mc1"].src;
	img_f.onload = function(){
		ctx.drawImage(img_f,0,0,800,750);
		ctx.drawImage(img_eL,0,0,800,750);
		ctx.drawImage(img_eR,0,0,800,750);
		ctx.drawImage(img_m,0,0,800,750);
	};
	
	// 顔を描き換えるタイマー関数tick()を起動しておく
	tickTimeID = setInterval("tick()", 50);

} /* onload() */

// 一定時間ごとに顔を描き換える関数
function tick() {
	ctx.drawImage(img_f,0,0,800,750);
	ctx.drawImage(img_eL,0,0,800,750);
	ctx.drawImage(img_eR,0,0,800,750);
	ctx.drawImage(img_m,0,0,800,750);
} /* tick() */

// 目の画像を切り替える関数
function eyeMove(){
	img_eL.src = imgdata["eL"+eyeNum].src;
	img_eR.src = imgdata["eR"+eyeNum].src;
	if((++eyeNum)==4) eyeNum=1;
} /* eyeMove() */

// 口の画像を切り替える関数
function mouthMove(){
	img_m.src = imgdata["m"+PronSeq[PronNum].name+mouthNum].src;
	if((++mouthNum)==5) mouthNum=1;
} /* mouthMove() */

// 発音を切り替える関数
function setPron(){

	// 発音をセット
	if (PronNum==-1) { // 初回のセット
		PronNum=0;
	} else {
		if ((++PronNum)==PronSeq.length) PronNum=0;
	}

	// 現在音声出力中の母音を表示
	switch(PronSeq[PronNum].name){
		case "c":
			document.getElementById("mouthstatus").value = "閉";
			break;
		case "a":
			document.getElementById("mouthstatus").value = "ア";
			break;
		case "i":
			document.getElementById("mouthstatus").value = "イ";
			break;
		case "u":
			document.getElementById("mouthstatus").value = "ウ";
			break;
		case "e":
			document.getElementById("mouthstatus").value = "エ";
			break;
		case "o":
			document.getElementById("mouthstatus").value = "オ";
			break;
	}
	
	// 次の母音に切り替える時間をセットする
	PronTimeID = setTimeout("setPron()", PronSeq[PronNum].time);
	
	
} /* setPron() */

// 目の切り替え開始
function eyeStart() {

	// 目の画像を切り替えるタイマー関数
	eyeTimeID = setInterval("eyeMove()", 800);

} /* eyeStart() */

// 口の切り替えを開始
function mouthStart() {

	// 発音をセットする
	setPron();

	// 口の画像を切り替えるタイマー関数
	mouthTimeID = setInterval("mouthMove()", 500);

} /* mouthStart() */


`````````ここに言語を入力
ここに言語を入力
```
JavaScript
window.addEventListener("load",function(){

	const text      = document.querySelector('#text')
	const speakBtn  = document.querySelector('#speak-btn')
	const cancelBtn = document.querySelector('#cancel-btn')
	const pauseBtn  = document.querySelector('#pause-btn')
	const resumeBtn = document.querySelector('#resume-btn')

	speakBtn.addEventListener('click', function() {
	  const uttr = new SpeechSynthesisUtterance(text.value);
		uttr.rate = 1;
		uttr.pitch = 3;
		uttr.volume =1;
	  speechSynthesis.speak(uttr);
	  uttr.onend = function (event) {
	    stop();
	    console.log('喋った時間：' + event.elapsedTime + 'ms');
	  }
	  stat();

	})

	cancelBtn.addEventListener('click', function() {
	  speechSynthesis.cancel();
	  stop();

	})

	pauseBtn.addEventListener('click', function() {
	  speechSynthesis.pause();
	  pause();

	})

	resumeBtn.addEventListener('click', function() {
	  speechSynthesis.resume()
	  stat();

	})

},true);
`````````ここに言語を入力
ここに言語を入力
```
CSS
body{
   background-color: #ffffff;
   color: #000000;
   font-size: 2em;
   font-family: fantasy;
}

#canvas{ /* original size: 1280x720 */
   width: 800px;
   height:450px; 
   border: inset 10px #00aa00;
   background-color: #ffffe0;
}

```

画像と音声の同期をさせたい

rails 5.2.4で開発しております。
ローカルでpostgresqlで開発しており、herokuでデプロイしようとheroku run rails db:migrateをしてそこでエラーが出てしまいました。
エラーを読むと、過去にデータベースのテーブルの削除をmigrationで行わず、GUI(datagrip)で直接削除してしまったからみたいです。
マイグレーションファイルの内容の整合性がとれていないのだと思います。

そこで、既存のテーブルからマイグレーションファイルを作成し直したいのですが、そのようなことは可能でしょうか？

既存のテーブルからマイグレーションファイルを作成できるでしょうか？

ウェブサイトで画像を多めに表示したいのですが画像の量を増やしすぎるとページの表示速度がどうしても遅くなってしまいます。
JavaScriptなどではじめにページを表示させるときは画質を低くに表示して一度ページをすべて読みこんでから画像を高画質にしたいのですがなにかいい方法はありますか。
詳しい方教えていただけると幸いです。

画像読み込みを高速化したい

プログラミング初学者です。
あるサイトに「migrationファイルはいわばデータベースを作成した歴史です。よって実行されてup状態になっているmigrationファイルは絶対に削除したり、編集したりしてはいけない」と書いてありました。
ここで質問です。
そのmigrationファイルの情報をもとにデータベースをいったん作成したらもうそのファイルは用済みなのではないのですか？そのファイルが作成したデータベースに今後どのような影響を与えるのでしょうか？
例えばtestテーブルを作成するmigrationファイルを削除してしまったとき、そのあとtestテーブルにカラムを追加するmigrationファイルがあったとしても、データベースにデータが残っているので何ら問題はないのではないかと考えてしまいます。（実際はエラーが出ます。。。）

【migrationファイルを削除してはいけない理由】

### 前提・実現したいこと

[このページ](https://www.getopensocial.com/blog/product-center/installing-open-social-composer)を参考に、Composerを使ってOpenSocialをインストールしようとしています。

[こちら](https://github.com/goalgorilla/social_template)からダウンロードしたものを使って

インストール中のdrushコマンド実行し、以下のエラーメッセージが発生しました。

```ここに言語を入力
# composer create-project goalgorilla/social_template:dev-master drupal --no-interaction
# drush site-install social --db-url=mysql://root:root@localhost:3306/social
```

### 発生している問題・エラーメッセージ

```
[root@v133-18-31-5 drupal3]# drush -y site-install social --db-url=mysql://root:                                                                                        root@localhost:3306/social

 // You are about to DROP all tables in your 'social' database. Do you want to
 // continue?: yes.

 [notice] Starting Drupal installation. This takes a while.


In SqlContentEntityStorage.php line 1611:

  Exception thrown while performing a schema update. SQLSTATE[42000]: Syntax
  error or access violation: 1064 You have an error in your SQL syntax; check
   the manual that corresponds to your MySQL server version for the right syn
  tax to use near 'groups (
  `id` INT unsigned NOT NULL auto_increment,
  `type` VARCHAR(32) CHARACTE' at line 1: CREATE TABLE {groups} (
  `id` INT unsigned NOT NULL auto_increment,
  `type` VARCHAR(32) CHARACTER SET ascii COLLATE ascii_general_ci NOT NULL CO
  MMENT 'The ID of the target entity.',
  `uuid` VARCHAR(128) CHARACTER SET ascii COLLATE ascii_general_ci NOT NULL,
  `langcode` VARCHAR(12) CHARACTER SET ascii COLLATE ascii_general_ci NOT NUL
  L,
  PRIMARY KEY (`id`),
  UNIQUE KEY `group_field__uuid__value` (`uuid`),
  INDEX `group_field__type__target_id` (`type`)
  ) ENGINE = InnoDB DEFAULT CHARACTER SET utf8mb4 COMMENT 'The base table for
   group entities.'; Array
  (
  )


In Connection.php line 692:

  SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error i
  n your SQL syntax; check the manual that corresponds to your MySQL server v
  ersion for the right syntax to use near 'groups (
  `id` INT unsigned NOT NULL auto_increment,
  `type` VARCHAR(32) CHARACTE' at line 1: CREATE TABLE {groups} (
  `id` INT unsigned NOT NULL auto_increment,
  `type` VARCHAR(32) CHARACTER SET ascii COLLATE ascii_general_ci NOT NULL CO
  MMENT 'The ID of the target entity.',
  `uuid` VARCHAR(128) CHARACTER SET ascii COLLATE ascii_general_ci NOT NULL,
  `langcode` VARCHAR(12) CHARACTER SET ascii COLLATE ascii_general_ci NOT NUL
  L,
  PRIMARY KEY (`id`),
  UNIQUE KEY `group_field__uuid__value` (`uuid`),
  INDEX `group_field__type__target_id` (`type`)
  ) ENGINE = InnoDB DEFAULT CHARACTER SET utf8mb4 COMMENT 'The base table for
   group entities.'; Array
  (
  )


In Statement.php line 59:

  SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error i
  n your SQL syntax; check the manual that corresponds to your MySQL server v
  ersion for the right syntax to use near 'groups (
  `id` INT unsigned NOT NULL auto_increment,
  `type` VARCHAR(32) CHARACTE' at line 1


site:install [--db-url DB-URL] [--db-prefix DB-PREFIX] [--db-su DB-SU] [--db-su-pw DB-SU-PW] [--account-name [ACCOUNT-NAME]] [--account-mail [ACCOUNT-MAIL]] [--site-mail [SITE-MAIL]] [--account-pass ACCOUNT-PASS] [--locale [LOCALE]] [--site-name [SITE-NAME]] [--site-pass SITE-PASS] [--sites-subdir SITES-SUBDIR] [--config-dir CONFIG-DIR] [--existing-config] [-h|--help] [-q|--quiet] [-v|vv|vvv|--verbose] [-V|--version] [--ansi] [--no-ansi] [-n|--no-interaction] [-d|--debug] [-y|--yes] [--no] [--remote-host REMOTE-HOST] [--remote-user REMOTE-USER] [-r|--root ROOT] [-l|--uri URI] [--simulate] [--pipe] [-D|--define DEFINE] [--druplicon] [--notify [NOTIFY]] [--xh-link XH-LINK] [--] <command> [<profile>]...

```

### 試したこと

[こちら](https://www.drupal.org/project/social/issues/3097481)を参考にエラー解消を試みようと、MySQL5系にダウングレードしようとして方法が見つかりません。

### 補足情報（FW/ツールのバージョンなど）

CentOS7
MySQL8

【CentOS】【Drupal】【OpenSocial】Syntax errorでインストールが失敗する

CSS「margin 0 auto」の指定をしても、
画像が中央に行かず若干左に寄ります。

※以下コードの一番下「satei」の部分になります。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mantion Pro</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <header>
    <div class="header-in">
      <img src="images/logo.png" alt="logo">
    </div>
  </header>



<div class="main">
  <img src="images/main.jpg" alt="">
  <p class="first">マンション売却のプロが運営<br>安心の不動産査定サイト</p>
  <h2>あなたのマンション<br><span>いくらで売れる？？</span></h2>
  <p class="tokucho1 txtm">練馬区で30年！<br>豊富な実績による信頼感</p>
  <p class="tokucho2 txtm">2018年の実績は<br>なんと300戸以上！</p>
  <p class="tokucho3 txtm">電話営業なし！<br>安心の接客対応</p>
</div>



<div class="satei">
  <img src="images/satei.svg" alt="">
</div>

</body>
</html>
```

```css
@charset "UTF-8";
body {
  font-family: 'Meiryo' 'メイリオ' 'aleolight' 'noto sans Japanese' 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic'  
  }
html {
  font-size: 10px; /* 基準として全てのテキストの大きさを10pxにする */
}


/*    /////// header ////////   */
header {
  height: 110px;
}

.header-in {
  padding: 20px 0 0 170px ;
}


/* main */
.main {
  position: relative;
}

.main img{
  width: 100%;
  height: 100%;
  background-size: cover;
  filter: opacity(75%);
}

.main .first {
  font-size: 3rem;
  line-height: 4.5rem;
  font-weight: 600;
  position: absolute;
  top: 25%;
  left: 13%;
	text-shadow:#fff 1px 1px 10px, #fff -1px 1px 10px,#fff 1px -1px 10px,#fff -1px -1px 10px;
}

.main h2 {
  color: rgb(18, 54, 153);
  font-size: 6rem;
  line-height: 10.5rem;
  font-weight: 600;
  position: absolute;
  top: 44%;
  left: 13%;
	text-shadow:#fff 1px 1px 10px, #fff -1px 1px 10px,#fff 1px -1px 10px,#fff -1px -1px 10px;
}

.main h2 span {
  color: rgb(214, 69, 76);
}

.tokucho1 ,.tokucho2 ,.tokucho3 {
  background-color: #fff;
  width: 300px;
  text-align: center;
  position: absolute;
  left: 60%;
  opacity: 89%;
}


.tokucho1 {
  top: 25%;
}

.tokucho2 {
  top: 41%;
}

.tokucho3 {
  top: 57%;
}

.txtm {
  font-size: 2.2rem;
  color: rgb(245, 125, 27);
  font-weight: 600;
  line-height: 3.5rem;
  padding: 1.2rem;
  border-radius: 15px;
}

.dammy {
  width: 100%;
  height: 800px;
}


/* satei */
.satei {
  width: 100%;
  height: 500px;
  position: relative;
}

.satei img {
  position: absolute;
  top: -250px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

/*---Media Queries --*/
@media screen and (max-width: 992px) { 
}

@media screen and (max-width: 896px) { 
}

@media screen and (max-width: 575px) { 
}

```

画面では以下のように表示されます。
![イメージ説明](d4921050666abdd73b5ae13563f07517.jpeg)

検証ツール
![イメージ説明](a6f840c77d1001222f3b09ad805860d6.jpeg)
![イメージ説明](7f1c911a34eb385dde6018bec9e5da1b.jpeg)

宜しくお願い致します。

CSS「margin 0 auto」の指定をすると左に寄る

### 前提・実現したいこと

AtomをつかってJavascriptの勉強をしているのですが
addEventListenerが入力候補でてこなくてむしゃくしゃしています
VScodeならaと入力しただけで候補にでてくるのになんでなんですか
atom-ternjs
autocomplete-js-import
javascript-snippets
autocomplete javascript
以上のパッケージをいれてもだめでした
どうすればいいか教えてください
おねがいします


### 発生している問題・エラーメッセージ

```

```

### 該当のソースコード

```ここに言語名を入力
ソースコード
```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。