Slender Clubライブ一例目終了

昨日は湘南鎌倉総合病院から品川プランスホテルで開催されている Slender Club Tokyo in 2018へのライブ症例中継の日です

これまで僕自身はこの病院からもたくさんのライブを全世界に向けて飛ばしてきましたので、特に緊張することも慌てることもありません そういう意味では、よく議論になっているライブ中継の欠点、つまり — 術者やスタッフが緊張してしまい、普段の実力を出せなくなり、その結果、患者さんに不利益となる — ということからは僕自身そしてコメディカルも含めたスタッフは無縁です

逆にこのようなライブでは会場におられるたくさんの全世界の expertsの貴重な意見を真摯に聞ける、その結果 より良い治療を行える可能性が高まる、そのような利点が際立ってきます

まあそんなこんなで自分の割当分の患者さんは無事成功裏に二例治療することができました 特に一例目の方は非常に危険が予想される患者さんであり、あまり調子に乗って(つまりライブという環境の中で他の人の行け、行けという意見に押されて)攻めすぎると危険な事態に陥る、そのようなことが僕の誰よりも多くPCIをしてきた人生の経験から感じていました 結果は、押しすぎずある妥協点で終了し、手技は成功し、治療の目的は達成し、かつ無事に終了しました

ここいら辺のPCIというかどんな治療にも共通するであろう真実をどれぐらいの人々、特に若い先生方に理解して頂けるは? 言葉では伝えにくいものがありますね もうかれこれ 30年ぐらい前になりますが、そう昭和の終わりに、日本のとても偉い方が腹部臓器の悪性腫瘍となられ、某国立有名大学の外科の教授が根治手術をされたのですが、明らかにその手術は限界を越えたものだったと思います もちろん僕は腹部外科手術に詳しくありませんので、間違っていたらばすみません 何れにしてもその方は手術を契機に亡くなられました そんなことをどうしても思い出します

さてさてそんなことを考えながら本日は朝から昼のdutyまで懸案のプログラミングにとりかかっています 昨日来「あれ? 何で?」ということがあり、その疑問にすっかり取り憑かれ、どうすればこの疑問を解消できるか? そんなことに悩みながら座長をしたりしていたのです

結果的に解決しました これまであまり深く考えずに慣習に則ってやってきたからこんな事態に直面したのですね 反省です こんなことはこれまで jQueryを使い始めてから、ですから 10年ぐらい前から何回も何回も知っている筈のことだったのです 分かりやすくプログラムで書きますね

<!doctype html>
<html>
  <head>
    <title>TEST PROGRAM</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
  </head> 
<body> 
<form action="http://www.kamakuraheart.org/wordpress/" method="post"> 
<button type="submit" id="btn">ブログに飛ぶ</button> 
</form> 
<script> 
$('#btn').on('click', function() { 
    if (!confirm('本当にブログに飛びますか?')) { 
        return false; 
    } else { 
        location.href='http://www.kamakuraheart.org/wordpress/'; 
    } 
}); 
</script>
</body> 
</html>

これは勿論動作します しかし、次のプログラムは動作しません

<!doctype html>
<html>
  <head>
    <title>TEST PROGRAM</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script> 
$('#btn').on('click', function() { 
    if (!confirm('本当にブログに飛びますか?')) { 
        return false; 
    } else { 
        location.href='http://www.kamakuraheart.org/wordpress/'; 
    } 
}); 
</script>
  </head> 
<body> 
<form action="http://www.kamakuraheart.org/wordpress/" method="post"> 
<button type="submit" id="btn">ブログに飛ぶ</button> 
</form> 

</body> 
</html>

何故でしょうか <script></script>の位置に注目して下さい jQueryが対象としているオブジェクトは ‘#btn’ですが、それは DOMでは <button></button>の中で id = ‘btn’として指示されているものです

つまり、この作動しないプログラムでは、jQueryが id = ‘btn’というオブジェクトを探しに行っても、未だ DOMの中に読み込まれていないので、jQueryは分からないのです もちろんhtmlも上から順番に読み込まれます

では次のプログラムはどうでしょうか?

<!doctype html>
<html>
  <head>
    <title>TEST PROGRAM</title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script> 
jQuery(document).ready(function() {
  $('#btn').on('click', function() { 
      if (!confirm('本当にブログに飛びますか?')) { 
          return false; 
      } else { 
          location.href='http://www.kamakuraheart.org/wordpress/'; 
      } 
  });
}); 
</script>
  </head> 
<body> 
<form action="http://www.kamakuraheart.org/wordpress/" method="post"> 
<button type="submit" id="btn">ブログに飛ぶ</button> 
</form> 

</body> 
</html>

これはきちんと作動します 何が変わったのでしょうか? jQueryによるプログラム(スクリプト)全体が jQuery(document).ready(function() {})で括られていますね これが意味するところは、htmlのプログラム全体が読み込まれて DOM解析が終了するまで jQueryに待ちなさい、ということを指示しているのです

実はこんなこと jQueryを使うに際しては当たり前のことです ですから、いちいち jQuery(document).ready(function() {})でくくるのは面倒なので </body>タグの直前に jQueryスクリプトを書くように推奨されているのです こんなことすっかり忘れてしまい、これまで慣習で</body>タグの直前に jQueryスクリプトを書いてきたのですが、それを<head></head>に書いた所、プログラムが動作しなくなり、とても焦ったのです 全く何やっているのだか 解決に数時間を要しました こんなことだから時間がいくらあっても足りませんね

投稿者: (KAMAKURA & SAPPORO)Dr_Radialist

Expert Interventional Cardiologist and Amateur Computer Programmer

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です