最近のコーディングなどアドバイスをお願いします

コーディングのアドバイスをお願いします

プログラムを趣味として勉強しなおしてみようと思い書いてみました。
テーブル要素の th 要素をクリックしたら並び替える単純なプログラムです。
コメントを入れるほど複雑なコードではないので説明も省いています。
余計なライブラリも使いたくありません。
（追記：必要ありません）
最新の書き方など教えてください。
（追記：今流行りの書き方でもかまいません。）
お暇な時にでもお願いします。

該当のソースコード

<html>
<body>
  <table>
    <tr><th>no <th>name <th>price
    <tr><td>1  <td>ABC  <td>1,000
    <tr><td>3  <td>DEF  <td>3,000
    <tr><td>2  <td>GHI  <td>12,000
  </table>

  <table>
    <thead>
      <tr><th>no <th>name <th>price
    <tbody>
      <tr><td>1  <td>ABC  <td>1000
      <tr><td>3  <td>DEF  <td>3000
      <tr><td>2  <td>GHI  <td>12000
    <tbody>
      <tr><td>8  <td>a  <td>1500
      <tr><td>6  <td>g  <td>1300
      <tr><td>9  <td>f  <td>9999
  </table>
    
<script>

const
  covNum = (s) => isNaN (s) ? s: +s,//数値化
  funcA = ([a],[b])=> a < b,//並び替え
  funcB = ([a],[b])=> a > b;//並び替え


class TableSorter {

  constructor (tables, direction) {
    this.tables    = tables;
    this.direction = direction;
    this.disabled  = false;
  }


  sort (rowIndex = 0, direction = true, target = null) {
    let
      tables = target ? [target]: this.tables,
      cbFunc = this.direction ^ direction ? funcA: funcB;

    for (let table of tables) {
      for (let tbody of table.tBodies) {
        let
          td = [...tbody.rows].map (tr => tr.cells[rowIndex]),
          ary = td.map (e => [covNum (e.textContent), e]);
        ary
          .sort (cbFunc)
          .forEach (a => tbody.appendChild (a[1].parentNode));
      }
    }
  }


  handleEvent (event) {
    if (this.disabled)
      return;

    let
      {target, shiftKey} = event,
      table = target.closest ('table');

    if (table) {
      if (this.tables.includes (table)) {
        let th = target.closest ('th');
        if (th)
          this.sort (th.cellIndex, shiftKey, table);
      }
    }
  }


  static create (selecter = 'table', direction = true) {
    let tables = [...document.querySelectorAll (selecter)];
    if (1 > tables.length)
      throw new Error ();
    
    let obj = new TableSorter (tables, direction);
    document.addEventListener ('click', obj, false);

    return obj;
  }
}

TableSorter.create ();
</script>

kyoya0819

2020/04/02 18:07

> 余計なライブラリも使いたくありません。どこまで許容可能でしょうか？

退会済みユーザー

2020/04/02 18:14

どこまでも？「素」で動くものです。

kyoya0819

2020/04/02 18:19 編集

> どこまでも？「素」で動くものです。ご返信ありがとうございます。こちらの返信は、回答する上で非常に重要になるものですが、残念ながらこの欄はデフォルトでは非表示のため、質問本文に編集にて追記していただけると幸いです。 > 最新の書き方など教えてください。最近の流行の書き方という認識でよろしいでしょうか？また、その場合はこの質問をされた意図の範囲内でよいのですが、どの様な観点での流行かもご返信いただけると幸いです。

hoshi-takanori

2020/04/02 22:16 編集

最新の書き方 ≒ ライブラリを入れてトランスパイル、なんですよね…。特に、HTML で書かれた DOM の構造を変更するのは有害なので、ソートなどをやりたい場合はテーブルは空にしておいて、JavaScript 側でデータを用意して、それに基づいて createElement して table に突っ込むのがいいと思います。

m.ts10806

2020/04/02 22:36

現在特に問題発生してないなら自分で突き詰めた方が良いですね。コードレビューしてもらうサイトではないし「最新の書き方」の基準がわからない。暇で仕方なくても答えにくい。ロジックの問題(効率的か否か、処理速度の考慮など)は「最新の」ではないですしね。もっと現在のコードにおける問題点や課題を明記されては。

退会済みユーザー

2020/04/02 22:51

＞コードレビューしてもらうサイトではないそうなのならば、あきらめます。ライブラリ使い魔が幅をきかす世の中なのですね。

m.ts10806

2020/04/02 23:54

業務で効率と生産性を挙げるために、ライブラリを使うのは当然の流れかと思います。「ライブラリを使う人は技術力がない」のではなく、通常のエンジニアは車輪の再開発を嫌うだけです。同じことを何度も言うのって嫌ですよね。それと同じ。「使い魔が幅をきかす世の中」と嘆くのであれば、誰もが既存のライブラリを投げ出してまで使いたくなるようなものを作れば良いのでは？それか、「ライブラリ絶対禁止」のコストも生産性も度外視のプロジェクトを立ち上げて人を募ってみてはどうでしょう。質問の目的が分かりません。

hoshi-takanori

2020/04/02 23:55

m.ts10806 さん、「コードレビューしてもらうサイトではない」ってどこかに書いてあります？質問者が自分で書いたソースコードを提示している以上、丸投げには当たらないと思います（聞きたい点を整理してほしい、というのは分かりますが）し、「コードレビュー」タグが存在するので、特に禁止はされてないのではないかと思いますが。（私が過去の議論を知らないだけだったらごめんなさい。） r_r さん、ブラウザの上で JavaScript コードを動かす時点で、ブラウザや JavaScript ランタイムというある種のライブラリみたいなものに大いに依存していると思いますし、「巨人の肩に乗る」という言葉があるように、それが悪いことだとは思いません。もちろん、一定の制約（どんな制約であれ）のもとでコードを書くという趣味もありだとは思いますが、ある程度の規模や有用性を備えた Web アプリを作りたいのであれば、ライブラリの利用を否定するのはあまり生産的とは思えません。

gentaro

2020/04/03 02:11

https://teratail.com/help/avoid-asking ・「具体的に何か困っている理由があり、解決したい問題がある場合は、その理由や何に対して解を得たいのかを明確に記入してください。」・「何かを作りたいのでコードを書いてほしい、学校の課題を解いてほしい等の質問は、具体的にプログラミングで困っている質問ではないと考え、推奨していません。問題や質問は実際に調査や作業に取り組み、具体的なところで生まれると考えるためです。まずは実際に作業に取り組み、つまづいたところで投稿をしてみてください。」少なくとも「最近の書き方を教えて」というのは「具体的にプログラミングで困っている質問」には当たらないと思いますがね。ご自身で学べばいいだけで。あと「コードレビュー」のタグってレビューそのものについてを議論するためのものだと思いますが。というか、他のタグもすべて「質問内容」に対して付けるものじゃないですか？

Zuishin

2020/04/03 02:11

使い魔が予測変換によるものなのか、それとも意図して書かれたものか、気になります。

Zuishin

2020/04/03 02:19

あとは covNum や funcA funcB が TableSorter の外にあるのが気になります。

退会済みユーザー

2020/04/03 03:52

＞業務で効率と生産性を挙げるため＞誰もが既存のライブラリを投げ出してまで使いたくなるようなも＞ごもっともです。しかし私はプロではありません。ライブラリさへ作れるか微妙な力量でしょう。「学びたい」と思う気持ちが萎えます。車輪？車を持っていてもマラソンする人もいる。無駄ですか？きっとそれも向いている方向が違うのでしょう。＞自身で学べばいい我流はいつまでたっても我流。人様が書いたコードを見て感動したことはありませんか。＞使い魔意図して使いました。＞質問があいまい質問があいまいな方向を向いていても意図を汲んで Lhankor_Mhy 様のように回答があったりします。コードを示さない。丸投げだ。規約違反だ。もう少しお気楽に。＞TableSorter の外にあるのが気になります { ...提示したコード this.TableSorter = TableSorter; } もしくは、 (function (win) { ...提示したコード win.TableSorter = TableSorter; })(this); にでもします。上の方法は、safari じゃ無理だったような。

gentaro

2020/04/03 08:58

> コードを示さない。丸投げだ。規約違反だ。もう少しお気楽に。居直り強盗みたいな理屈ですね。

hoshi-takanori

2020/04/03 19:58

gentaro さん > 問題や質問は実際に調査や作業に取り組み、具体的なところで生まれると考えるためです。 > まずは実際に作業に取り組み、つまづいたところで投稿をしてみてください。」自分でコードを一行も書かずに、この問題を代わりにやってほしいと言うのと、実際に自分でコードを書いた上で、どこか改善できるところはありませんかと聞くのとは、まったく違うと思います。自分の知識の範囲でコードを書いて、それが一応動いているならば、自分のコードに問題があることに気づくことは難しい場合もあると思いますので、他人にそれを指摘してもらう機会は重要じゃないでしょうか。 r_r さんちょっと言葉の行き違いがあったかもしれません。ライブラリを使わずに書くことは否定しません。それが重要な場面もありますし、決して無駄ではないと思います。ただ、「最新」あるいは「今流行りの書き方」と言われると、ライブラリの利用を前提として考えてしまうことが多い、というだけです。むしろ、学習の過程において、安易にライブラリに頼らず、標準機能だけで実装しようとしたり、あえて車輪の再発明を試みることは、むしろ大切なことでもあります。ちなみに、document.querySelectorAll という API を使ってらっしゃいますが、これは jQuery という有名なライブラリの機能をブラウザが取り込んだものだと認識しています。このように便利なライブラリの機能が標準に取り込まれることはよくあることなので、ライブラリの存在を全否定されるとちょっと悲しかったりもします。

退会済みユーザー

2020/04/06 06:50

周知のとおり、プログラムを書くことにより勉強することと、ライブラリーを使いこなせるようになるのとでは目的が違います。重々承知です。有難うございました。

行動規範の内容に同意します

回答2件

ベストアンサー

興味深く拝見しました。
アドバイスというわけではないですが、感想を書かせていただきます。

私も最新の書き方がわかるわけではないのですが、特段「古臭い」と感じる部分はありませんでした。
アマグラマとしては十分にモダンなのではないでしょうか。

気にかかった、というか、私ならこうする、と感じたのは2点です。

比較関数は、念のため、仕様通りにします。

js
1  funcA = ([a],[b])=> a === b ? 0 : a < b ? 1 : -1,//並び替え
2  funcB = ([a],[b])=> a === b ? 0 : a > b ? 1 : -1;//並び替え

呼び出しの書式が冗長なので、コンストラクタを隠ぺいするなら、初期化関数をそのまま返します。
（あるいは、TableSorter.createをexportする）

js
1const TableSorter = ( class TableSorter{
2
3//...
4
5} ).create
6
7TableSorter ();

あとは、補足欄でも指摘がありましたが「DOMの値を取得しごにょごにょしてDOMを更新する」というよりも「データモデルの変更をDOMに反映する」というのが最近の流れなんだろうなあ、とは思います。

投稿2020/04/03 02:04

Lhankor_Mhy

総合スコア36981

退会済みユーザー

2020/04/03 03:52

回答ありがとうございます。ソートに使う関数は、０も返さなきゃいけませんでしたね。＞呼び出しの書式が冗長なので TableSorter の本質は本質として残すべきだと考えています。簡単に利用したいときは .create を使って・・・と間口を２つ取るべきだとも考えています。そういっても handleEvent が本質に含まれてしまっていますけど・・・その事に葛藤があります（オブジェクト指向的な意味で）。

Lhankor_Mhy

2020/04/03 04:13

わかります。そういう意図もあるかな、と思ったので「コンストラクタを隠ぺいするなら」と条件を付けました。そして、ご葛藤の通り、現在の書き方ではコンストラクタを単独で使う機会はないでしょうね。

行動規範の内容に同意します

アドバイス（助言）というようなものではなく、感想になります。
（ご質問のコードは、最新の文法で書かれています）

最近のコーディングなど

コーディングという語はプログラミング行為を示すだけでなく、商品名（作業工程名）を示すこともあります（こういう背景もあって、曖昧に感じました）。

「など」と示されているので、感じたことを示します。

「最近の」という言葉からは「黎明期」を思い出しました。
当時は、「コピペでそのまま使える」というキャッチでコードスニペットが書籍になったりしていました（HTMLの文書断片+CSSやJavaScriptのユーザ関数サンプル）。
現在は、GitHubの大成などが示しているように、「ソーシャルコーディング（チーム開発）」が基本にあり、ソースは無料。でも学習コスト抑制のために開発者から直接的なアドバイスを受けたい場合は有償とする事例を多く見かけます。

ソーシャルコーディングは開発を大きく変えました。ツールやライブラリを提供し合って、より効率的な開発を促す時代（文化）に変えたように思います。

業務で開発されている方は、誰もがチーム開発のための制約を受けます。