常連

### 前提・実現したいこと
以下を使用した環境構築について、アドバイスをお願いしたいです。

|種類|名前|
|:--|:--|
|Webサーバー|Apache|
|サーバーサイド言語|PHP|
|PHPフレームワーク|Slim|
|フロントエンド|Vue.js（VueCLI）|

### 相談内容

Vue.jsで、vueファイルを使用する際は、一般的に、VueCLIで環境を構築するものだと認識しております（もちろん一から環境を構築出来るということも存じています）。

ただ、どのような紹介記事においても、VueCLIの導入に際して、サーバーサイド言語と組み合わせて使用するようなパターンについての言及を、見たことがありません。

今回、PHPをサーバーサイド言語として利用した場合に、どのようにVueCLIと組み合わせて利用するのかを具体的に知りたいと思い、相談させていただきました。

例えば、PHP・Slimフレームワークの組み合わせでのディレクトリ構成を考えた場合、以下のようになるかと考えております。

__※以下の、Projectというのは、NetBeansやEclipseにおけるルートの単位（1ビルド単位）です。__

```
Project
 |
 + src （PHPソース）
 + public （公開ディレクトリ）
    + index.php
    + assets
      |
      + js
      + css
      + img
```

確認したいこと
---

- 上記ディレクトリに、VueCLIを組み合わせて使う際は、どのようなディレクトリ構成がベターなのでしょうか？

- そもそも、Projectはクライアント（Vue.js）とサーバーサイド（PHP）で別個になったりしますか？

- よくあるサンプルでは、node.jsのWebサーバーを起動して、8080にアクセスして、そちらでページを表示する流れになっていますが、開発時の動作確認にはApache＋PHPを使いたいのです。そのような場合、ホットリロード（vmファイルを編集したらすぐに反映確認できる）を組み合わせてスピーディーに動作確認するようなことはできたりするのでしょうか？

---
フロントエンドは、今までに Knockout.js や AngularJS、Vue.JS（vueファイルの使用がない）、を経験しておりますが、Vue.jsの、vueファイルをビルドする領域に突入してから、途端に高難易度になってしまったように感じます。

回答者様のご意見の他に、もし、サーバーサイドとVueCLIの組み合わせについて言及している書籍やサイトなどの情報もご存知であれば、教えていただきたいです。

よろしくお願いいたします。

PHP・Vue.js（VueCLI）における環境構築方法

###前提・実現したいこと
slimで <div style="width:20px;" class="mdl-textfield.mdl-js-textfield">と書きたいです


###試したこと
```haml
%div.mdl-textfield.mdl-js-textfield{ :style => "width:20px;" }
```
のように書けるそうなので、
```slim
div.mdl-textfield.mdl-js-textfield{ :style => "width: 20px;" }
```
としてみましたがダメでした

###slimで <div style="width:20px;">と書きたいです

### slimで、pタグ内のaタグの書き方

  slimで、pタグ内のaタグの書き方が分かりません。。
 どのように書くのでしょうか？

* html
```
  <p>ABCは<a href="http://example.com">こちら</a></p>
```

* erb
```
  <p>ABCは<%= link_to "こちら", "http://example.com" %></p>
```
    
* slim ↓は違いますよね?? どう書けばよいのでしょうか?
```
  p ABCは = link_to "こちら", "http://example.com"
```

slimで、pタグ内のaタグの書き方

データベースの内容をテーブルにeach doを使用し、上手く表示させたいです
viewsはslimで書いています
以下viewsになります
```rails
| books
      table.table.table-bordered.table-hover
        thead
          tr
            th ID
            th 作者
            th タイトル
        - @books.each do |book|
          tbody
            tr
              td
                = book.id
        - @pages.each do |page|
              td
                = page.name
              td
                = link_to '編集', admin_book_path(id: @books)
```

controller(Bookの後のPageはpaginationを使用しています)
```rails 
    def index
      @books = Book.page(params[:page]).per(15)
      @pages = Page.includes(params[:name]).all
    end
```

このように書いた際、viewsで二度each doを使用しているので上手くテーブルに表示されません
この場合、どのように書くと上手くいくでしょうか？

each doを使用しテーブルにデータベースの内容を表示させる

# 原因わかる方いらっしゃいますか。
![イメージ説明](21f0c6de5b0c81441891d3cbd80a9603.png)


# 前提

前提
| 前提 | 内容     |
| :------------- | :------------- |
| １       |   既にある新規ホスト(host)登録フォームに「法人か？それ以外か？」のラジオを追加したい。     |
| ２       |   カラム名はtypeにした。     |
| ３       |   下記のコードを使ってラジオボタンを実装     |
| ４       |   しかし送信すると `wrong constant name company`または`wrong constant name other`と出力されて、エラーになる。    |

# コード

> 
> フォームのslim
> 


```
.form-group.row
	.col-lg-4
		= f.label :kind,class:'col-form-label'
	.col-lg-8
		= f.radio_button(:kind, "company",id:'company')
		= f.label :company   ,class:'radio' ,id:'company',for:'company'
		= f.radio_button(:kind, "other",id:'other')
		= f.label :other ,class:'radio' ,id:'other' ,for:'other'

```

>
> controller
> 

```

def new
	@host = Host.new
end

def create
	@host = Host.new(host_params)
	if @host.save
		@host.send_activation_email
		flash[:info] = "ホスト本登録メールを送信しました。ご確認ください。"
		redirect_to [:host,:root]
	else
		render 'new'
	end
end

private
def host_params
	params.require(:host).permit(:name,:type,:email,:tel,:password,:password_confirmation)
end

```

...よろしくお願いします。

【Rails5】wrong constant name *** に苦しんでます。

![イメージ説明](9610e6663b40b2e3e6bd692328ed1d55.png)### 前提・実現したいこと

Ruby on Railsでタスク管理アプリケーションを作成している途中でタイトルのエラーが出ました。
エラーが直せません　I18n::InvalidLocaleData in Tasks#new


### 発生している問題・エラーメッセージ

```
ActionView::Template::Error (can not load translations from /Users/・・・/taskleaf/config/locales/ja.yml: #<Psych::SyntaxError: (<unknown>): mapping values are not allowed in this context at line 5 column 3>):
     7: 
     8: = form_with model: @task, local: true do |f|
     9:   .form-group
    10:     = f.label :name
    11:     = f.text_field :name, class: 'form-control', id: 'task_name'
    12:   .form-group
    13:     = f.label :description
  
app/views/tasks/new.html.slim:10
app/views/tasks/new.html.slim:8
```

---以下、ja.ymlを全て削除したときのエラー
```
ActionView::Template::Error (can not load translations from /Users/・・・/taskleaf/config/locales/ja.yml: #<Psych::SyntaxError: (<unknown>): mapping values are not allowed in this context at line 5 column 3>):
     7: 
     8: = form_with model: @task, local: true do |f|
     9:   .form-group
    10:     = f.label :name
    11:     = f.text_field :name, class: 'form-control', id: 'task_name'
    12:   .form-group
    13:     = f.label :description
  
app/views/tasks/new.html.slim:10
app/views/tasks/new.html.slim:8


```
---以上。


### 該当のソースコード
```new.html.silm
h1 タスクの新規登録


.nav.justify-content-end
  = link_to '一覧', tasks_path, class: 'nav-link'


= form_with model: @task, local: true do |f|
  .form-group
    = f.label :name
    = f.text_field :name, class: 'form-control', id: 'task_name'
  .form-group
    = f.label :description
    = f.text_area :description, rows: 5, class: 'form-control', id: 'task_description'
  = f.submit nil, class: 'btn btn-primary'
```

```ja.yml
--2020-04-19 17:32:17--  https://raw.githubusercontent.com/svenfuchs/rails-i18n/master/rails/locale/ja.yml
raw.githubusercontent.com (raw.githubusercontent.com) をDNSに問いあわせています... 151.101.88.133
raw.githubusercontent.com (raw.githubusercontent.com)|151.101.88.133|:443 に接続しています... 接続しました。
HTTP による接続要求を送信しました、応答を待っています... 200 OK
長さ: 5117 (5.0K) [text/plain]
"ja.yml" に保存中

     0K ....                                                  100% 24.3M=0s

2020-04-19 17:32:17 (24.3 MB/s) - `ja.yml' へ保存完了 [5117/5117]

ja:
  activerecord:
    errors:
      messages:
        record_invalid: "バリデーションに失敗しました: %{errors}"
        restrict_dependent_destroy:
          has_one: "%{record}が存在しているので削除できません"
          has_many: "%{record}が存在しているので削除できません"
      models:
        task: タスク
      attributes:
        task:
          id: ID
          name: 名称
          description: 詳しい説明
          created_at: 登録日時
          updated_at: 更新日時
      helpers:
        select:
          prompt: 選択して下さい
        submit:
          create: 登録する
          submit: 保存する
          update: 更新する
```

### 試したこと

インデントなど徹底的に意識しましたが、今度は別のエラー？が出ました。

### 補足情報（FW/ツールのバージョンなど）
Rails 6.0.2.2

I18n::InvalidLocaleDataのエラーの解消法

#環境
Ruby on Rails 5
slim-rails

#状況
現在erbで書かれたviewをslimに変換しようとしています。
しかしrenderの記述が違うのか上手く行きません。

ソースコードは以下の通りです


app/controllers/timeline_controller.rb

```
class TimelineController < ApplicationController
  def show
    @posts = Post.all
  end
end
```

app/views/post/_post.html.erb

```
<div class="timeline">
  <p><%= posts.content %></p>
</div>
```

app/views/timeline/show.html.erb

```
<h1>timeline</h1>

<div id="timeline">
  <%= render @posts %>
</div>
```


上記の記述をslimを使い以下のように直しました

app/views/post/_post.html.slim
```
.timeline
  p=posts.content
```

app/views/timeline/show.html.slim

```
h1 =@timeline

#timeline
   render 'post', @posts
```

このように記述すると

`'post', @posts`

という結果がでます

これを踏まえwikiを改めて確認すると
==renderという記述があり、それに記述し直し実行してみると

```
NoMethodError in Timeline#show
/app/views/timeline/show.html.slim where line #4 raised:

undefined method `keys' for #<Post::ActiveRecord_Relation:0x007faf0c5cf270>
```

というエラーになります。

slimの記述が得意な方ご教授お願いします。

slimでのrenderの記述について

こちらの記事(https://qiita.com/nishina555/items/8ed180333fbc8f78e91e）を参考に
railsでslimを使おうとしたらこのようなエラーが出ました。
![イメージ説明](7793aebca8dbeda4c104be092a9c74e1.png)


```Gemfile
gem "slim-rails"
gem "html2slim"
```
で`bundle install`を実行。

 `bundle exec erb2slim app/views app/views`
を実行してslimファイルに変換し、
`bundle exec erb2slim app/views app/views -d`
でslimファイルのみにしました。


```root
root to: "users#index"
```
```controller
def index
end
```
問題はViewです。

`app/controller/users/index.html.erb`
は今まで通りしっかり出力されるのですが、
`app/controller/users/index.html.slim`
のみ出力されません。

何が原因なのでしょうか？


**環境**
rails Rails 5.2.1
sqlite3
html2slim 0.2.0
slim-rails (3.1.3)