実装内容

以前に投稿したコメント機能実装の記事では、お伝えできなかったコメント機能で起こりうる問題点とその解決方法をまとめてみました。

解決する問題一覧

改行問題
半英数字の連続文字によるはみ出し問題

改行問題（プレビュー）

before

after

半英数字の連続文字によるはみ出し問題（プレビュー）

before

after

環境

macOS Big Sur 11.2.3
ruby: 2.7.2
rails: 6.1.3
jQuery
テンプレートエンジン: slim
レイアウト: bootstrap4

改行問題の解決法

改行しても反映されず、文字が続いて表示されてしまう問題から解決していきます。

app/views/comments.hide_comments.html.slim

 = comment.comment # before

 = simple_format(comment.comment) # after

Railsのヘルパーメソッドであるsimple_formatを使用することで、コメントを以下の条件で整形し、改行されるようになります。

文字列を<p>で囲む
改行には<br />を付与
連続した改行は、</p><p>を付与

英数字の連続文字によるはみ出し解決法

日本語の場合、単語の途中でも自動で改行されるのですが、英数字の場合、表示範囲を超える連続する長いものは改行されずはみ出してしまいます。

app/assets/stylesheets/application.scss

body {
  // 半角英数折返しの設定
  word-wrap: break-word;
  overflow-wrap: break-word;
}

CSSのword-breakプロパティを使用し、値をbreak-word とすることで、枠内に収まらない英単語の場合は単語の途中でも折り返しますが、枠内に収まる限り、単語の途中では折り返さないようにしてくれます。また、overflow-wrapはword-wrapの古い名称で、サポートされていないブラウザもあるため、併記した方がいいようです。

最後に

以上でコメント機能でよくある問題の解決方法でした！

実はポートフォリオ完成後にレビュー会を行なったのですが、その時指摘してもらい、初めて気づいた感じでした^^;

間違っている箇所や分かりづらい箇所が多々あるかと思います。
その際は、気軽にコメントいただけれると幸いです。

最後までご覧いただき、ありがとうございました!