teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

コードを修正

2019/07/12 17:52

投稿

KuwabataK
KuwabataK

スコア306

answer CHANGED
@@ -25,6 +25,7 @@
25
25
 
26
26
  ```js
27
27
 
28
+
28
29
  //Twitterのように投稿から投稿からハッシュタグが含まれるものをリンクに変えるコードのhtml、JSのみ
29
30
  //一つの投稿に #がついている文字列は、スペースが空くかそれ以降何もないとハッシュタグとみなされる
30
31
  //ハッシュタグとみなされた投稿は#から終わりまで、リンク(<a>#文字列</a>)で囲まれる
@@ -36,16 +37,16 @@
36
37
  * @return {string} タグ部分がurl化された文字列
37
38
  */
38
39
  function addAnchrInTag(str){
39
- return str.split(' #').map( (str,i) =>{
40
+ return str.split(' #').map( (s,i) =>{
40
- if (i === 0 && str.indexOf('#') === -1){
41
+ if (i === 0 && s.indexOf('#') === -1){
41
42
  // split後の先頭の文字はurl化しない
42
- return str
43
+ return s
43
- } else if (i === 0 && str.indexOf('#') === 0){
44
+ } else if (i === 0 && s.indexOf('#') === 0){
44
45
  // 文章の頭のタグはそのままurl化
45
- return addAnchr(str)
46
+ return addAnchr(s)
46
47
  }
47
48
  // 文章の途中にあるタグは#が取り除かれているので、#をつけ直してurl化
48
- return addAnchr('#' + str)
49
+ return addAnchr('#' + s)
49
50
  }).join(' ')
50
51
  }
51
52
 

2

説明を追加

2019/07/12 17:52

投稿

KuwabataK
KuwabataK

スコア306

answer CHANGED
@@ -6,6 +6,9 @@
6
6
  基本の解析ロジックは一緒ですが、[map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map)と[join](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/join)を利用して、メソッドチェインのような形で文字列を順番にパースしています。関数型っぽい書き方ですね。もしかするともっと簡潔な書き方があるかもしれません。
7
7
  最近のJavaScriptではこのような書き方はよく見られるので、JavaScriptでやるならこういう書き方のほうが良いかなと思います。(もちろん掲示されているコードが間違っているわけではないので、好みの問題だとは思います)
8
8
 
9
+ 特に、今回のように文字列を解析して変換する処理においては、`split(特定の記号で文字列を分割して配列にする)` → `map(配列要素一個一個に対して、同じ処理を適用)` → `join(配列を再び文字列に結合する)`
10
+ の流れはかなり便利なので、覚えておくと役に立つと思います。
11
+ (サンプルコードでは`str.split().map().join()`のメソッドチェーンが使われているのがわかるかなと思います)
9
12
 
10
13
  ちなみにサンプルコードでは、タグであるという認識を[#]の有無ではなく「 #」の有無で判定しています。これにより、頭に空白がない#がタグ化されなくなり、#タグの中にスペースなしの#があっても普通の文字として認識されるようになります。
11
14
 

1

文章の改善

2019/07/12 17:46

投稿

KuwabataK
KuwabataK

スコア306

answer CHANGED
@@ -1,3 +1,5 @@
1
+ どの部分に無理矢理感を感じられているのかわかりませんが、文字列のパース部分だと解釈して、回答させていただきます。意図に反した回答でしたら申し訳ありません。
2
+
1
3
  もともと文字列のパースは、何らかのライブラリを使わない限りは愚直にやるしかないと思うので、提示されているロジックで解析処理を行う形でよいのではないかと思います。
2
4
 
3
5
  その上で私が書くとしたら、以下のようなコードになるかなと思います。