長い文字を「...」で省略する方法(Ruby・Rails・JavaScript)

f:id:ryoutaku_jo:20190528064515p:plain

【結論】

・文字を省略したい場合、Railsであれば、truncateメソッドを利用する方法がある

Rubyであれば、範囲オブジェクトで文字の範囲を指定して、表示をさせる事

JavaScriptの場合は、slice() メソッドで文字の省略が可能

【目次】

【本題】

文字数を省略させたいケース

無制限に文字が表示されてしまうと、レイアウトが崩れてしまうので、表示させる文字数を制限したい事が多々あります。

そういった場合に、利用出来る手法をいくつか紹介します。

Railsの場合(truncateメソッド)

Railsの場合、truncateというメソッドで、表示させる文字サイズを指定する事が可能です。

#()内に表示したい文字数を指定
str = "abcdefg"
str.truncate(6)
=> "abc..."
#()内に表示したい文字数を指定
str = "abcdefg"
truncate(str, length: 6)
=> "abc..."

truncate - リファレンス - - Railsドキュメント

Rubyの場合(範囲オブジェクト)

Rubyの場合、範囲オブジェクトで文字数を指定する事が可能です。

#[]内に表示したい文字数を指定
str = "abcdefg"
str[3]
=> "abc"

JavaScriptの場合(slice メソッド)

JavaScriptの場合、sliceというメソッドで、表示させる文字サイズを指定する事が可能です。

#()内に表示したい文字の範囲を指定
str = "abcdefg"
str.slice(0,2)
=> "abc"

String.prototype.slice() - JavaScript | MDN

参考情報

Rails - 長い文字列を省略して表示する - Qiita

【JavaScript】長い文章の文末を省略して末尾に「…」を表示させる方法 – 株式会社シーポイントラボ | 浜松のシステム開発会社

《今日の学習進捗(3年以内に10000時間に向けて)》

フロントの埋め込みにおいて、どこまで使い勝手の良さを追求すべきなのか考えるきっかけが多くあった。

例えば、エラーが発生した際に、エラーメッセージを表示させるだけではなく、 フォームを強調するCSSJavaScriptを実装すべきか?とか、長いファイル名のデータがアップロードされた際に、 レイアウトが崩れる限界を時間を掛けて徹底的に検証してまで、最大限の文字数を表示させるべきか?などである。

これらは、実現させればユーザビリティの向上に繋がるが、サービスを運用する上では必須ではなく、 発生する頻度も低いので、掛けた工数に対して、得られる成果は少ないと考えられる。

今回はリリースが間近に迫っている事もあり、実装を見送っているが、 工数に余裕がある時でも、最小の労力で成果を出せる様に意識していきたい。

学習開始からの期間 :172日
今日までの合計時間:1668h
一日あたりの平均学習時間:9.7h
今日までに到達すべき目標時間:1571h
目標との解離:97h
「10,000時間」まで、

残り・・・「8332時間!」