- 投稿日：2021-04-25T20:32:48+09:00
CSSが嫌いなエンジニアが多い理由を、勝手に考えてみた
どうも7noteです。CSSが嫌いな方が多いですが、私はフロントマンなのでCSSは好きです。 Twitterを見ていると、 「CSS嫌い」 「CSSむずい」 「CSSわからん」 などなどの言葉をちょくちょく見かけるなと思っていました。 実際エンジニアの方から「CSS、よくわかるなぁ」なんて感じの言葉をかけられることもあります。 CSSって嫌われてますね。。。Twitterならではの偏りはありそうですが。 ということで、勝手ながらCSSが嫌いになる理由を考えてみました。 CSS嫌いを克服する方法も少しだけ最後に書いているので、よければみていってください。 ▼エラーが出ない 普段PythonやCなどのプログラミング言語を中心に開発されているエンジニアの方からするとエラーが出ないのは恐怖だと思います。 エラーが出ないときほど怖いものはないですからね。 「原因不明のエラー(不具合)は怖い。」 ▼プロパティの種類が多すぎる 数えてないですが、おそらく100は超えてて200あるかどうか、、、くらいでしょうか。 一覧↓ https://weblan3.com/css/css_property#css_property_purpose しかもpaddingとmarginのように似たようなものがあったりするのでややこしい。 違いが分かりにくい。 「そう、CSSはややこしい言語である。」 ▼無効化や削除したいのに、なんのプロパティのせいなのかが分からない 「なんか余計なcssが効いてそうだけど、どこで効いてるかわからない。という場面も多いのかなと思います。 しかも見つけてもそれ消していいのか分からないという不安。。。スコープ的な概念がないので、1行だけで全部に反映されるのは便利なのですが、その分修正するときにはめっちゃ神経を使います。 「つまり、cssを触ると疲れるんですよね。」 ▼不具合が出ても何て検索したらいいかわからない。 うまくいってない＝見えない・反映されない。 だから原因がわからない。だからなんて検索していいかもわからない。なんのプロパティが影響してるせいでうまくいってないのかがわからない。そもそもプロパティ以前の問題の可能性もあるから困る。 「解決策を探す方法が分からないから詰んでる。」 ▼各種ブラウザに依存性があるプロパティが多い ※@scivola さんよりコメントでいただきました。ありがとうございます。 「Chromeでは使えるけどIEでは使えない」、「iosのSafariだけなんか効かない」 なんてことが多々あります。 さらにはIEにも対応しなければならないとなると、地獄を見る可能性もあります。 「ブラウザごとの特性を覚えつつ、プロパティを覚えるなんて地獄」 ▼学習サイトじゃ学びきれない 正直CSSの5〜10%くらいしか解説してないと思います。仕事ができるレベルの理解度で60〜70%くらい理解していれば、いろいろできると思いますが、プロゲートのような学習サイトをやったからといってCSSが使えるようにはならない…(あくまで個人的見解です)。 「cssを勉強しても、分からないままなのは変わらない。」 ▼そもそも予備知識が必要だから勉強してないと難しい フロート、ボックスモデル、メディアクエリ、フレックスボックス、などなど。 正直知識なかったらサッパリなのは当然。 勉強してなあテストの範囲出されても答えられないのと一緒だから、cssがわからなくても大丈夫です。当然です。 勉強する暇があったらわかる人に聞くわ！ でもCSSわかる人が近くにいない。。。 「勉強してまでCSSを覚えるつもりはない」 CSS嫌いを克服するには ・慣れる ・恐怖心をなくす と曖昧な言葉だけでも締まりが悪いので具体的な方法も考えてみました。 【CSS嫌いを克服するコツ】 ・googleChromeの検証ツールを使う ・模写コーディングを行う ・知ってる人に聞く、もしくはお願いする 「googleChromeの検証ツールを使う」 「F12」もしくは「Ctrl+Shift+I（MacではCommand + Option + I）」で起動できます。 検証ツールでHTMLとCSSを確認することができます。 ↖このアイコンをクリックした後、ブラウザの要素をクリックするとフォーカスがあたり、その要素とその要素に効いているCSSを確認することができます。また検証ツール上で数値を変更したり、プロパティを追記したり、無効化にしたりもできます。 「模写コーディングを行う」 やはり模写コーディングを行うと格段にスキルアップができます。そこで使われているプロパティを真似して使うことで、なんとなく何がどこに影響しているのかがわかります。 また模写コーディングは実用的なプロパティに多く触れることができるので、理解までのスピードがめちゃくちゃ早いです。ただ、その分難易度は少し高いかもしれません。。。 デザインが簡単なサイトの模写から始めると良いと思います。 「知ってる人に聞く、もしくはお願いする」 苦手なものはだれにでもあると思います。できる人に聞いたり、お願いしたり頼りましょう。 いまでは質問投稿サイトもたくさんありますのでそういうところを活用するのがいいかもしれませんね。 まとめ 勝手な妄想でCSSが嫌われる理由を考えてまとめてみました。 他にもCSSがよくわからない理由などあればぜひコメントください。質問などもあればお答えさせていただきます！ 1人でもCSS好きが増える平和な世界になりますように。 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
- 投稿日：2021-04-25T15:56:00+09:00
「HTMLはプログラミング言語か」問題に終止符を打つ
こんにちは。筆者はHTMLでプログラムを書けるプログラミング言語、その名も「The HTML Programming Language (THPL)」を作りました。なので、明らかにHTMLはプログラミング言語です。以下では、THPLについて説明します。 最初のプログラム HTMLプログラミング言語では、Hello, world!プログラムは次のように書くことができます。HTMLプログラムを実行するには、HTMLファイルをブラウザで開きます。そうするだけでHTMLプログラムが実行され、出力が表示されます。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>My First HTML Program</title> <script src="https://unpkg.com/the-html-programming-language@0.1.0/browser.min.js"></script> </head> <body> <p><output>Hello, world!</output></p> </body> </html> 順に説明していきましょう。<body>までの以下の部分はおまじないです。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>My First HTML Program</title> <script src="https://unpkg.com/the-html-programming-language@0.1.0/browser.min.js"></script> </head> <body> ただし、<title></title>の間の部分は好きに書くことができ、プログラムのタイトルを表します。分かりやすい名前を付けてあげましょう。また、scriptという部分にある@0.1.0というのはTHPLのバージョンを表します。プログラミング言語自体のバージョンを常に明示的に指定してあげることで、互換性などの問題が生じにくくなっています。 また、プログラムの最後の2行についてもおまじないです。ここの文言は常に固定です。 </body> </html> よって、このプログラムの本体は以下の1行となります。 <p><output>Hello, world!</output></p> ここに書かれているのはP文であり、これは<p>式</p>という構文を持ちます。意味は、中の式を実行することです。JavaScriptなどと同様にHTMLでは文は結果を持たず式は結果を持ちます。P文では、中の式を実行した結果は使われません。JavaScriptでいうところの 式; に相当する文ですね。 P文の中にあるのはOUTPUT式であり、これは<output>式</output>という構文を持ちます。意味は、中の式を評価し、その結果を出力します。OUTPUT式の結果は中の結果そのままです。上の例ではHello, world!という文字列を出力しています。御察しの通り、Hello, world!というプレーンテキストもHTMLでは式として扱われます。要するに文字列リテラルです。 変数を定義する HTML言語では変数を使うことができます。変数を定義するにはDL文を用います。DL文は次のような構文を持ちます。 <dl> <dt>変数名1</dt> <dd>式1</dd> <dt>変数名2</dt> <dd>式2</dd> <!-- ... --> </dl> このように、DL文の中では<dt>と<dd>という構文がペアになって現れます。dtで示された名前の変数が作られ、その中身はddに書かれた式の評価結果となります。 また、変数の中身を得るためには<var>変数名</var>という構文のVAR式を用います。 例（以下の例ではおまじない部分は省略します）: <dl> <dt>str1</dt> <dd>Hello</dd> <dt>str2</dt> <dd>world</dd> </dl> <p> <output><var>str1</var>, <var>str2</var>!</output> </p> 関数を定義する HTMLではSECTION文を用いて関数を宣言できます。構文は<section title="関数名">関数本体</section>です。また、関数呼び出しにはABBR式を用います。こちらは<abbr title="関数名">引数</abbr>という構文です。引数を複数渡す場合は<br>で区切ります。 <section title="say"> <p> <output><slot name="0"></slot>, <slot name="1"></slot>!</output> </p> </section> <p> <abbr title="say">Hello<br />world</abbr> </p> この例ではsay関数にHelloとworldという2つの関数を渡しています。関数内では、受け取った引数はSLOT式を用いて参照することができます。最初の引数が0、次の引数が1……という名前を指定します。また、最初の引数は<slot></slot>というようにname構文を省略することができます。 また、関数名というのは実は変数名として解釈されます。上のプログラムでは、SECTION文は実際にはtitleという名前の変数を作りその中に関数オブジェクトを格納します。ABBR式では、title構文で関数を呼び出す方式のほかに、ABBR式の内部で、VARで取得した関数オブジェクトを指定する方法もあります。この場合、関数オブジェクトは引数よりも前に書かれ、関数オブジェクトと引数の間はやはり<br>で区切られます。つまり、上のプログラムの関数呼び出し部分は次のように書くことも可能です。 <abbr> <var>say</var><br />Hello<br />world </abbr> なお、関数の戻り値は関数内でP文の代わりにFOOTER文を実行することで指定できます。FOOTER文の中に書かれた式が実行され、その結果が関数の返り値となります。 算術演算 HTMLでは算術演算も可能ですが、あまり得意ではなくやや複雑なプログラムを書く必要があります。HTMLには算術演算用の演算子のようなものはなく、各演算が関数として提供されています。それらの関数はmath名前空間から取得する必要があります。math名前空間にアクセスするには、次のようなmath式を用います。次の例は、加算を表すplus関数をmath名前空間から取得する例です。 <math><plus /></math> このような関数は上述のABBR式を用いて呼び出すことができます。 <p> <output>1 + 2 + 3 = <abbr> <math><plus /></math><br> 1<br>2<br>3 </abbr></output> </p> <!-- 1 + 2 + 3 = 6 と表示される --> HTMLの値には文字列と数値がありますが、算術演算の結果は数値です。一方で、HTMLプログラムに書かれた1, 2, 3といったプレーンテキストは文字列として扱われます。これらが算術演算の関数に渡される際は自動的に数値に変換されます。明示的に数値に変換したい場合は、文字列から数値への変換を表すMETER式を用いて次のようにできます。 <p> <output>1 + 2 + 3 = <abbr> <math><plus /></math><br> <meter>1</meter><br><meter>2</meter><br><meter>3</meter> </abbr></output> </p> 条件分岐 HTMLでの条件分岐はRUBY式として提供されています。RUBY式はやや特殊な構文を持ち、JavaScriptで言うところのswitchに似た挙動をします。RUBY式は次のような構文を持ちます。 式 <ruby> 条件式1 <rt>分岐式1</rt> 条件式2 <rt>分岐式2</rt> <!-- ... --> 条件式n <rt>分岐式n</rt> <rt>else分岐 (任意)</rt> </ruby> このように、RUBY式は条件分岐の対象となる式に後置することで形成されます。ここではまず式が評価され、次に条件式1が評価されて両者が一致するかどうか確かめられます。一致した場合、分岐式1が評価され、その結果がRUBY式の結果となります。一致しなかった場合、次に条件式2が評価され、式の結果と条件式2の結果が一致すれば分岐式2が評価され……のように進行します。 RUBY式には、一番最後に条件式を伴わない<rt>構文を書くことができ、これはelse分岐です。これまでのどの条件にもマッチしなかった場合にこの分岐が実行されます。else分岐が無いRUBY文でどの条件にもマッチしなかった場合は、結果はnullとなります。 例えば、与えられた数値が偶数なら"even"を、奇数なら"odd"を返すodd_even関数は次のように定義できるでしょう。 <section title="odd_even"> <footer> <abbr> <math><rem /></math><br /> <slot></slot><br /> 2 </abbr> <ruby> <meter>0</meter> <rt>even</rt> <meter>1</meter> <rt>odd</rt> </ruby> </footer> </section> <p> <output>15 is <abbr title="odd_even">15</abbr>.<wbr /></output> </p> <p> <output>-2 is <abbr title="odd_even">-2</abbr>.<wbr /></output> </p> ここでのポイントは、RUBY式の条件分岐に先ほど紹介したMETER式が使われている点です。RUBY式の条件分岐の対象となっているのはその前のABBR式ですが、ここではmath名前空間から取り出したrem関数を実行しているので、その結果は数値です。RUBY式では文字列と数値の間の暗黙の変換は行われないため、このように条件として数値を与えないとマッチしてくれません。HTML初心者が引っかかりがちな罠の一つですので気をつけましょう。 ちなみに、この例では密かに<wbr />という構文のWBR式が登場しています。これは改行文字を表す式です。 実践編: FizzBuzz HTMLの言語機能は以上です。実践編として、FizzBuzzを書いてみました。HTMLの力試しをしたい方は自力で書いてみましょう。 ヒントとしては、ループの言語機能がありませんので、再帰関数を用いることになります。 以下がHTML言語によるFizzBuzzの実装です。1から100までループします。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>FizzBuzz</title> <script src="https://unpkg.com/the-html-programming-language@0.1.0/browser.min.js"></script> </head> <body> <section title="fizzbuzz"> <dl> <dt>rem3</dt> <dd> <abbr> <math><rem /></math><br /> <slot></slot><br />3 </abbr> </dd> <dt>rem5</dt> <dd> <abbr> <math><rem /></math><br /> <slot></slot><br />5 </abbr> </dd> <dt>text</dt> <dd> <abbr> <math><eq /></math><br /><var>rem3</var><br /><meter>0</meter></abbr ><abbr> <math><eq /></math><br /><var>rem5</var><br /><meter>0</meter></abbr ><ruby> <span>00</span> <rt><slot></slot></rt> <span>10</span> <rt>Fizz</rt> <span>01</span> <rt>Buzz</rt> <span>11</span> <rt>FizzBuzz</rt> </ruby> </dd> </dl> <p> <output><var>text</var><wbr /></output> </p> <footer> <slot></slot> <ruby> <meter>100</meter> <rt><span></span></rt> <rt ><abbr title="fizzbuzz"> <abbr ><math><plus /></math><br /><slot></slot><br />1</abbr > </abbr></rt > </ruby> </footer> </section> <p> <abbr title="fizzbuzz"><meter>1</meter></abbr> </p> </body> </html> おおよそこれまで解説した知識で読み解くことができますが、一つだけ新たな要素としてSPAN式が登場しています。これは基本的には括弧( )のようなもので、中の式を評価してそのまま返すだけの式です。ただ、HTML言語では特徴的な使われ方をされることがあります。 まず、<span></span>のような空のSPAN式が許可されています。これは空文字列を返す式となります。式を書くべき所に何も書かないのは構文エラーとなるので、何もしたくないが式を書く必要がある場合に重宝されます。 また、よく見ると以下の箇所でRUBY式の条件式としてSPAN式で囲まれた文字列が使用されています。 <ruby> <span>00</span> <rt>...</rt> </ruby> これはHTMLパーサーの特徴的な挙動によるものです。HTMLパーサーは空白文字だけからなるプレーンテキストを無視しますが、次のようにSPANが無いと、RUBY文の条件式が"(改行) 00(改行) "のような文字列であると認識され、本来"00"にマッチさせたいところマッチしなくなってしまいます。 <ruby> 00 <rt>...</rt> </ruby> SPAN式を使うことで<ruby>と<span>の間のテキストが文字列の一部ではなく無視するべき空白であるとパーサーに認識されます。SPAN式はこのような用途で使うこともできます。 まとめ 皆さんもHTMLで楽しいプログラミングライフを！ HTML言語への機能追加提案やプルリクエストなども歓迎です。
- 投稿日：2021-04-25T12:40:49+09:00
消費税計算~JS側~
今回は、JS側での消費税計算をする関数を作り、それを表に出力できるようにしました。 HTML側 index.html <table class="tax-answer" id="tax-answer" border="1"> <caption>結果一覧</caption> <tr> <th>何月何日</th><th>式</th><th>結果</th> </tr> <tr> <th>データ</th><th>データ</th><th id="total1">データ</th> </tr> <tr> <th>データ</th><th>データ</th><th id="total2">データ</th> </tr> </table> 今回は、結果の欄に出力できるようにしていきます。 index.js const tax = 0.1; function totalTax(taxNot) { const total = taxNot + taxNot * tax; return total; } document.getElementById('total1').textContent = totalTax(3000); document.getElementById('total2').textContent = totalTax(400); document.getElementByIdでHTMLのid属性を取得します。そして、textContent( これは開始タグから終了タグまでを書き換えてくれます)にtotalTax(値);で関数を呼び出し、代入します。 これで、データを書き換えることができました。 今回の場合は、ユーザーが計算した値を計算したいので、入力イベント発生から書き換えて行きます！
- 投稿日：2021-04-25T08:49:22+09:00
jQuery: 簡単なパスワード認証
Web サーバーの設定を変更出来ない時、（権限がないとか設定ファイルが難解な為）簡単なパスワード認証をつける方法です。 私は、Synology の NAS の nginx の設定が難解な為に、Basic 認証をつけることを諦めました。nginx を再起動する度に、複数の mustache ファイルから、nginx.conf が生成されるという仕組みでした。 次のページを参考にしました。 [JavaScript] 簡単にパスワード認証(のようなもの)を作る JavaScriptで文字列のハッシュ値を取得する index.html <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" /> <title>Simple Login</title> </head> <body> <blockquote> <h2>Simple Login</h2> </blockquote> <hr /> <table> <tr><td> UserName: </td><td> <input id="user" type="passsword"></input> </td></tr> <tr><td> Password: </td><td> <input id="pass" type="passsword"></input> </td></tr> <tr><td> </td><th> <button id="enter">OK</button> </th></tr> </table> <hr /> <p>Apr/25/2021 AM 07:19</p> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="password_check.js"></script> </body> </html> password_check.js // --------------------------------------------------------------- // password_check.js // // Apr/25/2021 // // --------------------------------------------------------------- jQuery(function() { jQuery("#enter").click(function () { const key = jQuery("#user").val() + "_" + jQuery("#pass").val() sha256_async(key).then(value_hash => { console.log(key) console.log(value_hash) jQuery.ajax({ url: value_hash + ".html" }).then(html => { jQuery("body").html(html) }).catch(() => { alert("パスワード認証に失敗しました") jQuery("#pass").val("") }) }) }) jQuery("#pass").on("keydown", e => { if(e.keyCode === 13) { jQuery("#enter").trigger("click") } }) }) // --------------------------------------------------------------- async function sha256_async(text){ const uint8 = new TextEncoder().encode(text) const digest = await crypto.subtle.digest('SHA-256', uint8) return Array.from(new Uint8Array(digest)).map(v => v.toString(16).padStart(2,'0')).join('') } // --------------------------------------------------------------- 例えば、 UserName: good Password: morning と入れると、コンソールに、ハッシュが表示されます。 この時は、 7f48567474fc65934fa4f1e50c9c2fd8f8123a257433b9255104e71607a255cf.html というファイルを作成して下さい。それが表示されます。 https でなくて、http でアクセスすると、次のエラーが出ます。 password_check.js:39 Uncaught (in promise) TypeError: Cannot read property 'digest' of undefined at sha256_async (password_check.js:39) at HTMLButtonElement.<anonymous> (password_check.js:12) at HTMLButtonElement.dispatch (jquery-3.6.0.min.js:2) at HTMLButtonElement.v.handle (jquery-3.6.0.min.js:2)
- 投稿日：2021-04-25T00:08:11+09:00
【HTML】リストについて簡単に整理
HTMLで使われるリスト 本記事ではHTMLで使われるリストについて、私が勉強した範囲で簡単にですが、記録しておきます。 1.普通のリスト（liタグだけでの使用はNG） <li> </li>タグで囲むとリストとして箇条書きで羅列される。 単純にこれだけの記載はあまり使わないのでしょうか。 <li>ノート</li> <li>鉛筆</li> <li>消しゴム</li> <li>定規</li> 結果は以下。 2.順序なし ul要素、順序あり ol要素 <li> </li>タグで作っているリストを<ul> </ul>タグで囲むと、順序なしのリストになる。 ・ul：Unordered Listの略 <ul> <li>ノート</li> <li>鉛筆</li> <li>消しゴム</li> <li>定規</li> </ul> 結果は以下。 見た目的には1.の単純なリストとあまり変わらない印象。 次に、<li> </li>タグで作っているリストを<ol> </ol>タグで囲むと、順序ありのリストになる。 ・ol：ordered Listの略 <ol> <li>ノート</li> <li>鉛筆</li> <li>消しゴム</li> <li>定規</li> </ol> 結果は以下。 各項目の頭に番号がついた。 3.入れ子にしたリスト 下記のような書き方をすれば、入れ子として使うこともできる。 ulとolを混ぜて使うことも可能。 <ul> <li>ノート</li> <li> 鉛筆 <ol> <li>HB</li> <li>B</li> <li>2B</li> </ol> <li>消しゴム</li> <li>定規</li> </li> </ul> 結果は以下 こんな感じで理解しています。 これからも勉強記録として記事を書きたいと思うので、認識違いなどがあれば、コメントいただけますと幸いです。