JavaScripの書き方に違和感を感じる話(主観)

情報・技術
情報・技術

どうも、河白です。

最近このサイト上で遊べるゲーム(?)をjQueryを使ってちょっとずつ作ってます。
私はJavaScriptに関してはほとんど触ってこなかったので勉強がてら楽しく制作しているのですが、一つ気になる点があります。

Scriptの記述方法って独特だよね問題。

私はHTMLとCSSを主に触っています。なのでScriptの記述の仕方が訳わからなさすぎて、頭がこんがらがっちゃんになります。
HTML・CSSは流し読みでなんとなくどういう事が書かれてあるか把握できますが、Scriptは不可能です。

あまりHTMLやCSSを触らない人のために説明。

例えば、HTMLでは一般的に以下のように記述します。

<div>
    <h2>hoge</h2>
    <p>hogehoge</p>
    <ul>
        <li>hoge-1</li>
        <li>hoge-2</li>
    </ul>
</div>

HTMLは箱のような入れ子式のコードで、上のコードを訳すと、
「div」という箱の中に「h2」「p」「ul」があって、「ul」の中には「li」がある
という感じですかね。

続いてCSSは、

div {
  background-color: #ccc;
  width: 50%;
  margin: 0 auto;
}
h2 {
  font-size: 160%;
  font-weight: bold;
}
p {
  color: red;
  line-height: 1.5em;
  text-align: center;
}
ul {
  width: 50%;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}
ul li {
  color: green;
  border: 1px solid #000;
}

何に対して何を適用させるかを書いてます。適用内容は中かっこで囲みます。

要は、HTMLもCSSも”何かで何かを囲っている”という構造をしていて、一般的な記述方法もそれに則って書かれます。

ところが、これがScript(便宜上jQueryをScriptと言ってます)になると話が変わってきます。

いや、Scriptも囲い系(?)には違いないんですが、改行箇所が変なんですよね。

$(function(){
  var hoge = 0;
  if (hoge == 0) {
    console.log('hoge 0');
  } else if (hoge <= 1) {
    console.log('hoge +');
  } else {
    console.log('hoge -');
  }
});

いやココ~~!👆👆👆

かっこ閉じの真後ろに次の文章が来てるの、すごく気持ち悪いというか違和感があります。
記事書いてるときに他の例が思い浮かばなかったのでアレですが、参考サイトとか見てるとちょくちょくこういう記述方法を見ます。

プログラム畑の友人に聞くと逆にHTMLとかCSSの方が読みづらいと言ってたので、普段触ってる言語によってそこら辺の感覚が変わるんですかねえ。

そもそも私が初心者すぎてScriptの文章構造を理解していない説は大いにあります。未だに「$(function(){});」を使う意味わからんし。かっこ多すぎやねん。

ちなみに、今作ってるjQueryのコードは完全に自分が読みやすい感じに組んでいるので、他の人が見ると嗚咽するほど読みにくいコードになってると思います。

・・・というだけの話でした。ちゃんちゃん。

JavaScriptプログラミング 基礎と実践: スキル向上のための正規表現
https://www.amazon.co.jp/JavaScriptプログラミング-基礎と実践-スキル向上のための正規表現-doitsu-ebook/dp/B0D22B35ML?__mk_ja_JP=カタカナ&amp;#038;crid=1U3B7BDOD5W32&amp;#038;dib=eyJ2IjoiMSJ9.e65d5atYv-mSzb8FqBPYOuTiOMWEGkbMxsHjgS9Jfydc_EGGOA-TmT-ARC_s-SufhXyEofSIIdUao8qcAnytgNd3MW2G8J0PJAO7i2WxiffGxyPv4MMx3N_qxBaxSg6V8ka8j2tIFLsAMzmiGlTTFURqWrmRxsi_kf7I1620ubuBpu-LJ_jmlpflOm_3pt34HX_umzU6d8uHKUtmGrXFo_3nOJfqB3PM5BZ8CUQK1pkzwmarv-BTK7NnEkGZedGGQt_RsuVtNfRXKBW7w0q0RbDRe2_8QdWFVEWUmbhAqLM.IxubsE9tDS_RIAk110yIViPbwUMA5_mhsnFVrF26fuY&amp;#038;dib_tag=se&amp;#038;keywords=jquery&amp;#038;qid=1713929969&amp;#038;sprefix=jquery,aps,176&amp;#038;sr=8-29&amp;#038;linkCode=sl1&amp;#038;tag=kawashiro0c-22&amp;#038;linkId=a322c2a9cd2410ba8bafc2fc4ac3ed13&amp;#038;language=ja_JP&amp;#038;ref_=as_li_ss_tl
JavaScriptを学びたての初心者向けに、実践的なプログラミングプロジェクトを通じて基本的な概念や技術を学ぶためのガイドです。ToDoリストアプリの開発を通じて、HTML、CSS、JavaScriptの基礎から、DOM操作、イベント処理、ローカルストレージの使用など、プログラミングに必要なスキルを身につけることができます。親しみやすい言語で解説された具体的なコード例や、実践的なチャレンジ課題を通じて、読者は自分の手でプログラミングスキルを磨くことができます。本書を読み進めることで、プログラミングの世界に足を踏み入れ、自分...
amzn.to

コメント

タイトルとURLをコピーしました