🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

1回答

414閲覧

グループに登録したユーザーの一覧を表示するプログラム

_chii

総合スコア50

Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2019/09/19 13:35

今回の実装はhamlを用いています。
登録されたユーザーは"@group.users"で受け取っています。
left-header__membersの中にグループに登録したユーザーの名前が一覧で表示されるように実装を行うプログラムになります。
現在理解ができる範囲の中で実装を行いました。
登録されるユーザーは複数になるためにeachを使いましたが正確な実装方法がこの先わからずご教授頂けないでしょうか。

もしグループに登録されているユーザーがTanaka, Sato, Suzukiの3人の場合はブラウザ上に下記の画像のように表示がされるようになっております。

もし情報に不備などがありましたら教えてください。

#現在の実装コード

.left-header__members Member: %ul. @group.users.each %li= user.name

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

何か困っていることがあるのでしょうか?
特に動作に問題がないかのような印象を受けました。

もしそうではなく、何か実現できなくて困っているようであれば、その旨を記載しないと、どなたからも回答が来ないのではないかと思います。


あくまで、実装コードをより一般的に修正する方法だけ説明すると、 ul を使うのであれば次のようにするのが一般的でしょう

haml

1.left-header__members 2 Member: 3 %ul 4 - @group.users.each do |user| 5 %li= user.name

こうすることで、liタグがulタグの中に納まるので、本来のul, liの動きが活かされると思います。

要注意ポイント

  • hamlでは、インデントの数に特に注意しましょう
  • hamlでrubyのメソッドを使用し、しかし画面上には表示しない時は、'-' と半角スペースを行の先頭に付けましょう

参考になる記事

Hamlの書き方


おまけ

画像で貼っていただいた見た目を維持するのであれば、次のようになるかと思います。

haml

1.left-header__members 2 Member: 3 - @group.users.each_with_index do |user, i| 4 - unless i.zero? 5 , 6 = user.name

','の後ろに半角スペースを入れられるか正直自信がないので、それは他の方の回答を待ちたいと思います...
helperとかを使えばできると思いますが、まだそのレベルには達していないように感じたので、記載しません。

投稿2019/09/21 02:44

siruku6

総合スコア1382

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

_chii

2019/11/26 03:17

この度は有難うございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問