LoginSignup
2
1
@tecoyan

コメントの削除のあれこれ

Last updated at Posted at 2024-03-14

■はじめに

プラグインを作成していて、いざ公開しようとするときに、審査を受けますがその場合、ソースコードのコメントをどうしようかと悩みます。あまりみっともないコメントなので、そのまま公開することには躊躇します。そこで、いっそのこと、すべて削除してしまおうと思いました。その辺のあれこれについてjavascriptのコメントについて対処したメモ程度ですが記述したいと思います。ここでのサンプルのコメントとコードは一部を抜粋したものです。コードの内容については深く詮索しないでください。全く整理されたものではなく、無駄の多いコードです。正規表現によるコメントの削除だけにご注目願います。

■いざ、削除しようとして

何か、簡単に削除できる方法はないものかとあれこれ探してみました。使用しているエディターはApache Netbeans IDE 20です。このエディターにある「置換」を使ってみようと思いました。正規表現を使う選択と使わない選択のチェックがありますので、やはり正規表現で行わないと無理かもしれないと考えました。コメントと言ってもいろいろなパターンがあり、それらにすべて一括で対処するには正規表現でないと難しいのでは判断しました。

■コメントのパターンとして

作成したプラグインには以下のようなパターンがあります。

(1) 1行コメント

    /* コメント        */

(2) 改行を含むコメント

    /* 
    改行
      コメント
      */

(3) 1行コメント

    //コメント

(4) コードの後ろにコメント

    let aaa; //
    } //

■見つけた正規表現

以下のサイトで見つけたものです。
https://stackoverflow.com/questions/5989315/regex-for-match-replacing-javascript-comments-both-multiline-and-inline/15123777#15123777
正規表現

コメントを削除する正規表現
\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$

たったこれだけの正規表現ですが、一部を除き(後述)、しっかりと削除できています。

■一部で不具合がありました。

エラーパターン
}//
[//

これらはエラーになりますので、事前に削除しておきます。コードを眺めて見つけます。そんなに数は多くはありません。これらの対処を含めた正規表現があると思いますが、今はそのことは考慮していません。

実行前のサンプルコード
//index_iframe_sub.php サブのiframe htmlファイル
//親はfavorite.tecoyan.net/slim/のindex_iframe.php
//jsファイル名      index_iframe_sub.js
//内容:
//明確な分離方式を取ります。プレーヤーとリストは実行空間を分離します。リストはiframeにindex_
//iframe_sub.phpを指定します。お互いに直接それぞれの要素へはアクセス出ません。
//ぞぞれの役目に専念します。
//iframeのクェリー処理を行うスクリプトでyoutubeサーチとdbサーチを行う。
//このフレーム内で実行するスクリプト
//たとえば、サムネイルをクリックして、そのvidデータを親のプレーヤーへ渡す場合
//親へpostMessageを送る 
//このスクリプトからは、このiframe内のすべてのセレクターを参照できる。
//G_Qは不要
//*****************************************************************
'use strict';
//以下は、Listクラスに属さないグローバル変数として定義
console.log("iframe_sub.jsがスタートします。");
let EXTENSION_ID;        //拡張機能のID 
let nplayer;                    //playerオブジェクト
let observer;                  //監視オブジェクト 
let y_btn;                      //ボタン
let listobj;                     //Listインスタンス1   
let testobj;                    //Listインスタンス2
let article;
let fade_mess;
//
/************************************************************************
*
*  
**************************************************************************/
/*Listクラスの定義*/
//内容 : 4種類の再生リストを再生するクラス
class List {
    data;
    id;
    //プロパテイ
    rireki_vid = [];                   //
    html;                                //
    genre_data = [];                 //
    genre;                              //
    response;                         //
    plist = [];                         //
    list_data = [];                    //
    list_mode = "ランダム";      //リストモード　ランダムorリストor "youtube_sch"
    title;                                //

    title_mode = "オン";           //タイトルモード　オンorオフ
    Event;                             //
    vid;                                 //
    url;                                 //
    db_id;                              //youtube_listテーブルのid
    enter_sw = 0;                    //
    vid_sv;                             //
    title_sv;                           //
    thumbnail;
    thumbnail_sv;                   //
    elems;                             //
    idx_idx;                           //
    elements;                        //
    vid_list;                           //youtubeサーチ、youtube_list
    vid_list_;                          //アメバブログのリンクリスト
    b_title;                            //
    //*******************************************************
    //以下はメソッド、リスナー定義
    //ここへ移行予定
    //functionは不要
    //*******************************************************
    /*Listクラスメソッド*/
    //**************************************************************************
    //Listクラスのメソッド
    //プラグインのチェックメソッド(Listクラス)
    //いずれのインスタンスでも実行か
    //thisを使えば、競合は避けられる。
    //**************************************************************************
    youtube_plugin(e) {
        //プラグインがインストールされているかをチェック

        //このEXTENSION_IDは、パッケージ化されていないローカルの拡張機能
        //公開向けには、ここを変更
        //ここでは$("#ex_id").html()を参照できない。iframeのため。
        //子側にもつ
        if($("#ex_id").html()===undefined){
                    //なし

        }else{
                    //あり
             EXTENSION_ID = $("#ex_id")[0].innerText;
             $("#search_plugin").css({"top": "0px", "display": "block"});
        }
        
        //バージョンを取得
        try {
            chrome.runtime.sendMessage(EXTENSION_ID, {'type': 'version'}, response => {
                //
                alert("このブラウザーにはyoutubeサーチプラグインがインストールされています。\n\n\
プラグイン名 :  " + response['name']+"\n\n\
バージョン　"+response['version']+"\n\n\
ステータス　"+response['type']);
            });
            return true;
        } catch (e) {
            //プラグインがインストールされていないケース
            $(".search_plugin").css("display", "none");
            //thisはいずれかのインスタンス
            this.data = $.ajax({
                url: 'https://common.tecoyan.net/plugin/slim/popup_alert.php',
                type: 'GET',
                dataType: 'html',
                cache: false,
                //data: this.params,
                async: false
            }).responseText;
            $("#rule_panel").html(this.data);           //このthisはいずれかのインスタンス
            $("#rule_panel").css({"padding": "1%", "overflow-y": "scroll", "zoom": "1.5",
                "font-weight": "bold", "line-height": "1.5", "display": "block",
                "position": "fixed", "top": "20px", "left": "127px", "height": "200px", "width": "600px"});
            $("#rule_panel").draggable();
                    //
            $("#cancel_query").on('click', (e) => {
                //
                $("#rule_panel").css({"display": "none"});
            });
            return false;
        };

以下は、その時の実行結果です。
コメントが空白に置き換わっています。きれいに置き換わっています。
空白は後で、別の正規表現で削除しています。
空白の削除は、以下の正規表現でできました。

空白削除の正規表現
^\n

ここで、ひとつ補足しておきます。実は、これだけの正規表現では、以下のパターンが検索できませんでした。

検索できないパターン

以下の赤枠で示した空白行("表示不可能な文字を表示"機能を使用しいています)はこの正規表現では検索できませんので、ひと工夫します。
空白行の例.png
その方法は、この画面から、マウスで.....の部分をひとつだけコピーして、それを正規表現にペーストし、その後ろに.*を追加します。
このようになります。
^ *\n
上記の空白部分に、ペーストしたコードがありますが表示には表れていません。コードが隠れていますが存在するはずです。
結果的には、この正規表現を使って空白行を削除することができます。少し邪道ぽいですが。

実行後のサンプルコード

'use strict';
console.log("iframe_sub.jsがスタートします。");
let EXTENSION_ID;       
let nplayer;                   
let observer;                 
let y_btn;                     
let listobj;                    
let testobj;                   
let article;
let fade_mess;


class List {
    data;
    id;
   
    rireki_vid = [];                  
    html;                               
    genre_data = [];                
    genre;                             
    response;                        
    plist = [];                        
    list_data = [];                   
    list_mode = "ランダム";     
    title;                               

    title_mode = "オン";          
    Event;                            
    vid;                                
    url;                                
    db_id;                             
    enter_sw = 0;                   
    vid_sv;                            
    title_sv;                          
    thumbnail;
    thumbnail_sv;                  
    elems;                            
    idx_idx;                          
    elements;                       
    vid_list;                          
    vid_list_;                         
    b_title;                           
   
   
   
   
   
    
   
   
   
   
   
   
    youtube_plugin(e) {
       

       
       
       
       
        if($("#ex_id").html()===undefined){
                   

        }else{
                   
             EXTENSION_ID = $("#ex_id")[0].innerText;
             $("#search_plugin").css({"top": "0px", "display": "block"});
        }
        
       
        try {
            chrome.runtime.sendMessage(EXTENSION_ID, {'type': 'version'}, response => {
               
                alert("このブラウザーにはyoutubeサーチプラグインがインストールされています。\n\n\
プラグイン名 :  " + response['name']+"\n\n\
バージョン　"+response['version']+"\n\n\
ステータス　"+response['type']);
            });
            return true;
        } catch (e) {
           
            $(".search_plugin").css("display", "none");
           
            this.data = $.ajax({
                url: 'https://common.tecoyan.net/plugin/slim/popup_alert.php',
                type: 'GET',
                dataType: 'html',
                cache: false,
               
                async: false
            }).responseText;
            $("#rule_panel").html(this.data);          
            $("#rule_panel").css({"padding": "1%", "overflow-y": "scroll", "zoom": "1.5",
                "font-weight": "bold", "line-height": "1.5", "display": "block",
                "position": "fixed", "top": "20px", "left": "127px", "height": "200px", "width": "600px"});
            $("#rule_panel").draggable();
                   
            $("#cancel_query").on('click', (e) => {
               
                $("#rule_panel").css({"display": "none"});
            });
            return false;
        };

このように、きれいに削除できています。
Apache Netbeans IDE 20のエディターの編集機能にある「置換」で実行しました。
以下は、空白行も削除した結果です。

空白行も削除したコード
'use strict';
console.log("iframe_sub.jsがスタートします。");
let EXTENSION_ID;       
let nplayer;                   
let observer;                 
let y_btn;                     
let listobj;                    
let testobj;                   
let article;
let fade_mess;
class List {
    data;
    id;
    rireki_vid = [];                  
    html;                               
    genre_data = [];                
    genre;                             
    response;                        
    plist = [];                        
    list_data = [];                   
    list_mode = "ランダム";     
    title;                               
    title_mode = "オン";          
    Event;                            
    vid;                                
    url;                                
    db_id;                             
    enter_sw = 0;                   
    vid_sv;                            
    title_sv;                          
    thumbnail;
    thumbnail_sv;                  
    elems;                            
    idx_idx;                          
    elements;                       
    vid_list;                          
    vid_list_;                         
    b_title;                           
    youtube_plugin(e) {
        if($("#ex_id").html()===undefined){
        }else{
             EXTENSION_ID = $("#ex_id")[0].innerText;
             $("#search_plugin").css({"top": "0px", "display": "block"});
        }
        try {
            chrome.runtime.sendMessage(EXTENSION_ID, {'type': 'version'}, response => {
                alert("このブラウザーにはyoutubeサーチプラグインがインストールされています。\n\n\
プラグイン名 :  " + response['name']+"\n\n\
バージョン　"+response['version']+"\n\n\
ステータス　"+response['type']);
            });
            return true;
        } catch (e) {
            $(".search_plugin").css("display", "none");
            this.data = $.ajax({
                url: 'https://common.tecoyan.net/plugin/slim/popup_alert.php',
                type: 'GET',
                dataType: 'html',
                cache: false,
                async: false
            }).responseText;
            $("#rule_panel").html(this.data);          
            $("#rule_panel").css({"padding": "1%", "overflow-y": "scroll", "zoom": "1.5",
                "font-weight": "bold", "line-height": "1.5", "display": "block",
                "position": "fixed", "top": "20px", "left": "127px", "height": "200px", "width": "600px"});
            $("#rule_panel").draggable();
            $("#cancel_query").on('click', (e) => {
                $("#rule_panel").css({"display": "none"});
            });
            return false;
        };

ご覧の通り、空白行は一行も表示されていません。すべてカットされています。

■あとがき

今回、何とか、いい正規表現のサンプルが見つかりましたので、いろいろ試しています。一部の不具合はありますが、それらのコメントはあらかじめ削除してから、この正規表現で置換を実行しています。
これだけでも、助かっています。

■参考1

今回利用した正規表現はここのサイトを参考にしました。Ryan Whealeさんが投稿していたサイトです。有難く利用させてもらっています。
https://stackoverflow.com/questions/5989315/regex-for-match-replacing-javascript-comments-both-multiline-and-inline/15123777#15123777
stackoverflowサイトで以下の方が投稿したものです。
answered Feb 27, 2013 at 22:30 Ryan Wheale27k99 gold badges 8181 silver badges 100

■参考2

サクラエディターでも試しましたが、サクラでは以下のパターンは検索できませんでした。

パターン
/*************************
改行あり
*************************/

■参考3

恵瑠 真珠さんからコメントをいいだきました、「uglifyjs」について試してみました。簡単に削除したり、美化するオンラインツールが見つかりました。
URL
https://www.uglifyjs.net/
です(無料)。
これも利用したいと思います。

2
1
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1