20210731のJavaScriptに関する記事は11件です。

【javascript】全角数字を半角数字に変換

数字に限定すれば変換用のマップを組まなくても良い。 コード お好きなので const fullnums = '0123456789'; const reFullnums = new RegExp('['+fullnums+']','g'); const toHalfnums = text => text.replace(reFullnums, m=>fullnums.indexOf(m)); console.log(toHalfnums('あ369あ')); // 'あ369あ' console.log(toHalfnums('7')); // '7' const fullnums = '0123456789'; const toHalfnums = text => text.replace(/[0-9]/g, m=>fullnums.indexOf(m)); const toHalfnums = text => text.replace(/[0-9]/g, m=>'0123456789'.indexOf(m));
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

GoogleSheetsAPI × LINEBot = 汎用型FAQBot

登録販売者の苦悩 登録販売者とは かぜ薬や鎮痛剤などの一般用医薬品(第2類・第3類に限る)販売を行うための専門資格のこと。 私も登録販売者として5年間くらい勤めてきましたが、どうにも「漢方薬」が苦手でした 全て漢字で書かれているので覚えるのが大変です。(葛根湯くらいなら馴染みがあると思いますが) 作成した動機 自分が苦手だった「漢方薬」の効果・効能を覚えるために単語帳として思いついたものが 今回作った「汎用型FAQBot」になります。 ラインに漢方薬の名前を打ち込むことで、その効果・効能を表示してくれます。 意図しない付加価値 Google SpreadSheet をデータベースのように扱うため、使用目的が限定されず再利用できそうです。 また、Google SpreadSheet を編集するだけで内容を変更出来るので誰でも利用できる点も良いかと思います。 動作の流れについて 使用したアプリケーション ・LINEBot ・Node-RED ・JavaScript ・Google SpreadSheet API ・Google SpreadSheet Node-RED 全体構成 Node-RED 各ノード詳細 「http in」ノード:ラインサーバーから送信されたメッセージを取得  「function」ノード:受け取ったメッセージを格納 1 // LINEサーバーからの情報を「msg.line」に移動させる 2 msg.line = msg.payload; 3 // msg.payloadにメッセージ本体を入れる 4 msg.payload = msg.payload.events[0].message.text; 5 6 return msg; 「G Sheet」ノード:Google SpreadSheet API を使って予め用意した Google SpreadSheet から情報を2次元配列として取得 「function」ノード:受け取った2次元配列を格納したメッセージと突合させて条件に合致したものをメッセージとして代入する 1 // msg.payloadの中にはスプレッドシート内容(2次元配列)が入っている 2 // 行ごとに、その行の1列目の文字がmsg.line.events[0].message.textと等しいかチェック 3 // もし等しければその行のインデックス数値が得られる(なければ-1) 4 const index = msg.payload.findIndex(rows => rows[0] == msg.line.events[0].message.text); 5 // 返信する言葉 6 let resultMessage = "見つかりませんでした"; 7 // もしアイテムの単語が見つかればその説明文を返信する言葉に上書きする 8 if (index != -1) { 9 resultMessage = msg.payload[index][1]; 10 } 11 // 返信する言葉を代入し、payloadに戻す 12 msg.line.events[0].message.text = resultMessage; 13 msg.payload = msg.line; 14 return msg; 「ReplyMessage」ノード:メッセージをラインサーバーに返信 動作デモGIF 作成所感 登録販売者の現役の方に感想を聞いたところ、お客さまの立場からであればこのままで良いが 登録販売者側が使うとしたら症状からどんな薬がお勧め出来るかを知れると良いとのことでした。 この制作物の最も優れた点は、Google SpreadSheet を API で参照しているので 使用者側で容易にカスタマイズ出来るという点だと考えています。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

入力フォームを作る時の考慮

入力フォームを作成する際に考慮するポイントが色々とあったのでまとめてみた。 UIについては、取り扱う情報によって、考慮する範囲は変わってくるのと、正解はないと思うので、考え方を参考にしてもらえればと思う。 どういう画面にするか考える 入力フォームに配置する項目に無駄のものはないか 入力項目の数は最小限に絞る 氏名、年齢、性別など本当に全てが必要なのかを考慮し、できる限りミニマムに絞る 個人情報が必要かどうか 問い合わせなど、匿名でも良いものであれば個人情報は極力無くしておくと、個人情報流出のリスクを除外できる。 個人情報を扱う場合はセキュリティ面での考慮も出てくるので、実装コストにも跳ねてくることを考慮しておくこと。 フォームのUIはユーザが操作しやすいものになっているか 入力フィールドはLabelの横か下か 入力は通常、上から下に垂直に実施するのが自然なのでラベルの下が良い。 ラベルと入力フィールドが横並びだとみづらい。(ラベル名が長かったりするとさらにみづらくなる) 参考記事 https://popinsight.jp/blog/?p=4113 ラジオボタン or プルダウン 項目が少ないなら、ラジオボタンで。(選択肢が少ないのであれば全て見せてしまった方がいちいちプルダウンを押させる必要がない) 項目数が多ければ、プルダウンで 参考記事 https://f-tra.com/ja/blog/column/2960 入力項目ごとの考慮 姓名の入力 姓と名で2つのフィールドに分ける メールの文面など何かで姓と名の間にスペースを入れたいときを想定して初めから別で保持していた方が良い。 分けない場合ユーザによっては、姓しか入力してくれなかったりする人も出てきてしまい、データとして扱いにくくなってしまうため 生年月日の入力 プルダウン or 数字で入力 個人的にはプルダウン派 数字での入力はシンプルだが、スマホも考慮するとタップで操作できるUIが良い。PC版のみ数字でスマホはプルダウンとするのも有りだと思う。 選択値の範囲は100年 初期値は利用するユーザ層に合わせると良いかも 参考記事 https://parashuto.com/rriver/development/implement-responsive-date-picker 確認画面は必要か フォームの用途次第で要否を判断する 簡易的な問い合わせや、入力項目が少ないものは確認画面は必要ないと判断しても良い 講座の申し込みや、購入など金額が発生するものなどは確認画面があった方が良い 入力項目のバリデーションはフロント側かサーバサイド側か 基本は、フロントとサーバサイドの両方で行う フロントで行うことはユーザビリティの向上になる サーバサイドでのバリデーションは必須(実施しないとDB登録でエラーしたり、ゴミデータが増える) セキュリティ面 XSS(クロスサイトスクリプティング)対策 XSSとは HTMLインジェクションとサイトをまたがった悪意のあるスクリプト(javascript)が実行されてしまうものをクロスサイトスクリプティングという 実際に見てみないとわかりづらいので、以下のサイトなどで具体例を見るとわかりやすい https://www.websec-room.com/2013/03/14/567 対策 htmlはサニタイズする https://qiita.com/rana_kualu/items/11cd41de5f0364ba2ee8 今どきのフレームワークだと大抵デフォルトサニタイズが有効になっている。 何らかの事情でサニタイズをオフにする場合は、第三者がスクリプトを埋め込む形になっていないか確認すること。 例えば、DBにhtml形式でデータを保持させておいて、それをフォームに表示させたい場合などに、サニタイズをオフにする場合がある。 そのような場合、サニタイズをオフした項目について、画面上からユーザーが入力できる項目になっていないことを確認する。 CSRF対策 CSRFとは XSSと似ているが、攻撃を任意のサイトの処理を使うものということが、XSSとの違い。 例えば、twitterにログインしているユーザが、悪意のあるサイトAを開いてそこの罠リンク(twitterでツイートするもの)を押して意図しないツイートがされてしまうようなもの(ログイン情報を格納しているcookieが悪用される例) 対策 CRSFトークンをhtmlに埋め込み、自身のサイト以外からpostなどをできなくしよう。 XSSとCSRFの違いは以下を参考にしました。 https://qiita.com/wanko5296/items/142b5b82485b0196a2da
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

iPhoneでlocalStorageが消える

CodePen上で、localStorageを使って遊んでいたところ、パソコンのChromeでは保持できてるのにiPhoneでは保存したlocalStorageのデータがたびたび消える現象が起きた。 試した感じだと、サイトを行き来するとすぐに消えてしまうっぽい。 (iPhoneの) Chromeアプリを落として再度開くと消える。 発生したversion: iOS版Chrome 92.0.4515.90 この辺の絡み? https://www.torimochi.jp/871/ 参考用 https://www.google.co.jp/search?q=javascript+localstorage+%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

文章の読みにくい部分を指摘してくれるアプリ作った

タイトルそのままです。 「文章の読みにくい部分」に色を付けて指摘してくれるウェブアプリを作りました。 …読みやすい文章を書くのって大変だと思うんですよ。 ついつい「という」とか「こと」とか使っちゃうし、細かくチェックするのも面倒だし。 だから、以前から「読みにくい部分をチェックしてくれるアプリがあったら便利なのにな…」と思っていました。 そして、最近「あれ?今なら自分で作れるかも」と感じてやってみたら…、できました。笑 個人的にはかなり重宝しているので、よかったら使ってみてください。 ちなみに、おまけで「読みやすい文章の書き方紹介」や「採点機能」もあります。 (採点機能はエンタメ要素なので、あまり真に受けないでください。)
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

文章の読みにくい部分を指摘してくれるアプリを作った

タイトルそのままです。 「文章の読みにくい部分」に色を付けて指摘してくれるウェブアプリを作りました。 …読みやすい文章を書くのって大変だと思うんですよ。 ついつい「という」とか「こと」とか使っちゃうし、細かくチェックするのも面倒だし。 だから、以前から「読みにくい部分をチェックしてくれるアプリがあったら便利なのにな…」と思っていました。 そして、最近「あれ?今なら自分で作れるかも」と感じてやってみたら…、できました。笑 個人的にはかなり重宝しているので、よかったら使ってみてください。 ちなみに、おまけで「読みやすい文章の書き方紹介」や「採点機能」もあります。 (採点機能はエンタメ要素なので、あまり真に受けないでください。)
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

だから、その文章は読みにくい!(文章の読みにくい部分を指摘してくれるアプリを作った話)

タイトルそのままです。 「文章の読みにくい部分」に色を付けて指摘してくれるウェブアプリを作りました。 …読みやすい文章を書くのって大変だと思うんですよ。 ついつい「という」とか「こと」とか使っちゃうし、細かくチェックするのも面倒だし。 だから、以前から「読みにくい部分をチェックしてくれるアプリがあったら便利なのにな…」と思っていました。 そして、最近「あれ?今なら自分で作れるかも」と感じてやってみたら…、できました。笑 個人的にはかなり重宝しているので、よかったら使ってみてください。 ちなみに、おまけで「読みやすい文章の書き方紹介」や「採点機能」もあります。 (採点機能はエンタメ要素なので、あまり真に受けないでください。)
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Railsで架空のCafeのHPを作ってみよう!【15日目】『1以上の半角数字の正規表現』編

概要 基本Railsの記法に則り書いていきます! 1から全ての説明ではなく その中であれ?どうやるの?と 疑問に思った点や実装に困った箇所を ピックアップして紹介していきます♩ 設定と準備 ・Rails ・HTML ・CSS ・Javascript(jQuery) ↑上記の言語とフレームワークを使い 架空(自分で考えたテキトーなもの)のCafeの HPを作っていこうと思います! 15日目の作業内容 ・JQueryを使いエラーメッセージを非同期で表示 15日目の気になった箇所 値段の入力で1以上の半角数字で入力させるエラーメッセージを記述したい。 仮説 正規表現を使い半角数字かつ1以上のマッチした時以外でエラーメッセージを 出せば表現できるはず。 今回は正規表現の箇所だけ抜粋して仮説と結論を記述するので エラーメッセージの表示のさせ方などは割愛させていただきます。 error_messages.js if (price.match(/^[0]+[^0-9]/)){ $('#price-error').html('1以上かつ半角数字で入力してください'); } return result; } このように ^ ← 先頭の1文字のマッチする  [0]  ← 数字の0 [^0-9] ← 半角数字以外 先頭が0かつ半角数字以外にマッチするような正規表現で試したが うまくいかなかった。 先頭が0だとダメなのでこの記述だと先頭は文字列を含んでしまい "a" などを 入力しても通ってしまう。 逆にして error_messages.js if (price.match(/[^0-9]+^[0]/)){ $('#price-error').html('1以上かつ半角数字で入力してください'); } return result; } このように半角数字かつ先頭が0だとダメという正規表現を試してみたが 先頭を意味する ^ ←こちらは最初に記述する必要があるため機能しなかった。 結論 分けて段階を踏み、マッチさせていく必要があった。 error_messages.js if (price.match(/[^0-9]/)){ $('#price-error').html('半角数字で入力してください'); } else if (price.match(/^[0]/)){ $('#price-error').html('1以上でお願い致します'); } return result; } このように段階を踏みまずは、 /[^0-9]/ ← 半角英数字のみ その次に、 /^[0]/ ← 先頭が0だとダメ という風に、大きな枠から順に狭めていくように 記述するとうまく記述することができる!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

いつの間にか MusicKit JS V3 (Beta) が公開されていた件

どうしたの? いやーびっくりした。 MusicKit JS V2 を待ち望んでいたらいつの間にか V2 スキップして V3(Beta) が公開されているんだもん。しかも、2ヶ月前くらいに公開されていたっぽい。 MusicKit JS とは Web ブラウザで音楽をフルで再生出来る JS ライブラリです(すごい)。 ちなみに MusicKit JS V2 は公開されてはいませんが、 Apple Music for Web で実装されています。 これが Apple Music で実装されているバージョン↓ MusicKit.version > "2.2130.7" 私が運営しているゲーム音楽では V1 なので V3 対応していこうかなと思います。 これがゲーム音楽で実装されているバージョン↓ MusicKit.version "1.1932.0-2" V1 Docs 私は毎週こちらのドキュメントを確認し V2 を待っていました。Docs がダークモード対応したんだなぁとか毎週少しの変化を楽しんでいました。しかし、なぜかこの Docs では V3(Beta) を確認することはできません。(謎) V3 Docs これが MusicKit JS V3 の Docs です。 Storybook で実装されていますね。 V1 の Docs にもリンクを貼って欲しいところ。 大きな変更点 (参考) Music Video が再生可能になった これすごいですね。 Music Video で何かしらの Web サービス実装できますね。 Live Radio や Station が再生可能になった バグ fix などなど。 まだ確認していませんが、おそらく購入した iTunes の曲も再生可能になっているはずです。(V1 ではできず、 V2 では出来ていた。確認できたら更新します。) おわりに MusicKit V3 で Twitter で検索しても1件くらいしかヒットしないほど話題性ないですが、私にとっては大事件なので Qiita に書いた次第です。 Web で音楽フル再生出来るサブスクは Spotify API と Apple Music API しかないのですが、これがそんなに実装されていない理由はおそらく商用化しづらいからでしょうね。もう少し利用規約を緩くしてもらうと実装が増えるかもしれませんね。といっても提供していただけるだけで私はありがたいです。ありがとう Apple Music。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

『閏年判定くん』を作った

まえがき こんにちは、清掃屋です。 2020年はコロナの影響により排水管清掃業も大きな影響を受け4~7月頃まで暇な時間が増えました。 その時期にかねてより興味があったIT関係の勉強をチマチマ始め、現在は勉強を始めて1年3か月ほどになります。 「そろそろ教科書をなぞるだけではなく、何か自作物を作ってみよう」という意気込みで、今回「閏年判定くん」を作りましたので。その結果をここに残します。 製作時間は6時間です。 もくじ 1. 目的 2. 完成物 3. 制作の流れ 4. ふりかえり 1. 目的 いきなり難しいものは作らず、一つの機能のみを備えた簡単なアプリをつくることにした。 アプリの内容にはこだわらず、基本的な処理が出来ることを制作の目的とした。 基本的な処理とは 「ユーザーが入力し、ボタンを押すと処理が実行され、結果が表示される。」 とする。 2. 完成物 完成物の見た目は以下のようなものになります 1: 4桁までの半角数字しか入力できません。 2: 4桁の数字が閏年でなければ「普通の年」と表示されます。 3: 4桁の数字が閏年ならば「閏年です」と表示されます。 4: 未入力でボタンを押した場合は「未入力」と表示されます。 5: 4桁未満でボタンを押した場合は「4桁で!」と表示されます。 6: リセットボタンを押すと入力された値がリセットされます。 3. 制作の流れ ここからは完成物が完成するまでの流れを振り返ります。 まず、この『閏年判定くん』の基本的な処理は3つの部品で構成されている。 入力欄 処理実行のボタン 結果の出力 私は「処理実行のボタン」から制作することにした。 「入力欄」と「結果の出力」は後で簡単に追加できると考えたからだ。 処理実行のボタン 処理部分について 閏年の判定は 「4で割り切れる なおかつ 100で割り切れない あるいは 400で割り切れる」 つまりこんな形になる year%4 ===0 && year%100 !== 0 || year%400 === 0 これが正しいかどうかまずテストしてみることにした。 <!DOCTYPE HTML> <HTML> <head> <meta charset ="UTF-8"> </head> <body> <script> function urudosi(year){ if(year%4 ===0 && year%100 !== 0 || year%400 === 0){ return true; }else{ return false; } } for(let i = 1500; i < 2100; i++ ){ if(urudosi(i)){ console.log(i +'閏年です'); }else{ } } </script> </body> </HTML> コレを実際の閏年の資料と比較して合っているかどうか確認する。 100で割り切れる値の内、400で割り切れるものだけが出力されていれば大丈夫でしょ。 大丈夫そうなのでその後、この処理を以下のように書き直した。 <!DOCTYPE HTML> <HTML> <head> <meta charset ="UTF-8"> </head> <body> <script> const year = 2021; if(year%4 ===0 && year%100 !== 0 || year%400 === 0){ console.log('閏年です'); }else{ console.log('閏年ではありません'); } </script> </body> </HTML> 今回は関数に渡す値を2021にしているので「閏年ではありません」と出力されるはず。 とりあえずOKそうなので次へ進みます。 ボタンと連動 次はボタンを作る。 ボタンを押すとaddEventListenerでclickした場合に先ほど作った処理部分が実行されるようにする。 <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>閏年チェッカー</title> </head> <body> <div id = "button">実行</div> <script src = "main.js"></script> </body> </html> 'use strict'; const urudosiHantei = document.getElementById('button'); urudosiHantei.addEventListener('click', () => { const year = 2020; if(year % 4 === 0 && year % 100 !== 0 || year % 400 === 0){ urudosiHantei.textContent = '閏年です'; } else { urudosiHantei.textContent = '閏年ではありません'; } }); 今回はyearに2020を渡しているので結果は「閏年です」が出力されるはず。 大丈夫そうですね。後はCSSでそれっぽく整形するだけです。 整形したものが下にあります。 CSSは省略させてください。長いので… これで「処理実行ボタン」は完成です。 結果の出力 何となくボタンに結果を出力してしまっているが 本来は結果を出力する専用のアイコンなどを用意しようと考えていた。 しかし、制作の目的が「基本的な処理が出来ること」なのでこれでOKと判断しました。 ちなみに文字サイズの関係で4文字しか綺麗に表示できません。 その為、「閏年ではありません」の時は以下のように表示を改めました。 「閏年ではありません」の時だけ、文字サイズを変更させようかと考えましたが、制作の目的にそぐわないのでやめました。 まずは完成させることが第一だ! 入力欄 入力欄はinput type = "text"を使うことにした。 input type = "number"の方が数字しか入力できないので良いように感じますが type = "number"の場合maxlengthが効かず4桁を超えて入力できてしまいます。またスピンボタンも出てしまいます。 スピンボタンは簡単に消せるし、4桁以上入力してもJavaScriptの入力制限で処理を弾くこともできますが、入力できてしまうことがなんか嫌なので、今回はinput type = "text"を使います。 入力欄には「半角数字4文字」を入力してほしいので <input type = "text" id = "inputYear" maxlength = "4" oninput = "value = value.replace(/[^0-9]+/i,'');" > となりました。ここで oninput = "value = value.replace(/[^0-9]+/i,'');" の箇所に関しては下記のサイト様の記事を参考にしました。 <input type="text">で数値のみ入力する方法 参考にした箇所の説明としては、oninputはinput要素の値が変更された際に実行されるイベントハンドラでreplaceにより半角数字以外の文字が入力された際に''内の値で置き換えてくれるようです。 今回の場合は、削除してくれます。 なお、半角数字を入力後に全角で入力すると2文字分削除されるらしく、入力した半角数字が1文字づつ消されます。 普通の操作ではないし、大きな問題ではないので放置します。 入力欄から渡された値の処理 ボタンが押されたら入力欄の値を受け取って定数yearとして処理に渡す。 const urudosiHantei = document.getElementById('button'); urudosiHantei.addEventListener('click', () => { const inputY = document.getElementById("inputYear"); const year = inputY.value; そして入力された値が制限に反していないかチェックする。 現状、4文字以下の半角数字しか入力できない状態なので、チェックすべきは「4文字未満」の状態かどうかであると考えた。 普通にmatch()を使って半角数字4文字かどうか確認させます。その結果が違っていたらmutch()はnullを返します、JavaScriptではnullがif文に入っていた時にfalseを返すので、反転させてtrueにします。nullでなけばfalseを返すのでそのまま閏年の判定に移行します。 if(!year.match(/[0-9]{4}/)){ urudosiHantei.textContent = '4桁で!'; } else if(year % 4 === 0 && year % 100 !== 0 || year % 400 === 0){ /* 閏年の判定 */ urudosiHantei.textContent = '閏年です'; } else { urudosiHantei.textContent = '普通の年'; } このままでも良いのですが、未入力状態でボタンを押した場合も「4桁で!」と表示されます。 これはちょっとズレた反応のように感じたので、一番最初に未入力かどうか判定させることにしました。 先ほど説明した通り、JavaScriptだとif文の中身が空だった場合falseを返すので反転させてtrueにします。 if(!year){ /* yearの中身が無かった場合falseになる、それを反転させる */ urudosiHantei.textContent = '未入力'; } else if(!year.match(/[0-9]{4}/)){/* yearが数字4桁でなければnullを返す、falseになるので反転させてtureを返す */ urudosiHantei.textContent = '4桁で!'; } else if(year % 4 === 0 && year % 100 !== 0 || year % 400 === 0){ /* 閏年の判定 */ urudosiHantei.textContent = '閏年です'; } else { urudosiHantei.textContent = '普通の年'; } これで未入力の場合には、ちゃんと「未入力」と判定されてくれます。 部品追加 現状こんな感じである。 使ってみて分かったが、値を入力した後に入力欄の値を消すか、上書きしないと次の判定が出来ない。 これは面倒くさいのでリセットボタンを作ることにした。 普通のリセットボタンです。 <div id = "reset" >リセット</div> const resetBotton = document.getElementById('reset'); resetBotton.addEventListener('click', () => { const textReset = document.getElementById("inputYear"); textReset.value = ''; }); リセットボタンを押されたら入力欄の値を消すだけの処理です。 これで完成!すっごいダサい… 4. ふりかえり 閏年を調べるだけのアプリという最低限のものは作れたと思う。 よって基本的な処理が出来ることを制作の目的にするという目標は達成できたと思います。 来年、この記事を見たら恥ずかしくて消したくなるよう成長したいです。 一番心残りなのはCSSです。marginを使って必死に微調整してましたがFlexboxとか使えばもっとスマートに出来たのではないか?と思います。 <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>閏年チェッカー</title> <link rel = "stylesheet" href = "styles.css"> </head> <body> <!--閏年判定くんの親要素--> <div class = "relative"> <!--リセットボタン--> <div id = "reset" >リセット</div> <!--入力欄の単位表示用--> <p id = "unitYear">年</p> <!--入力欄、文字数制限、入力制限--> <input type = "text" id = "inputYear" maxlength = "4" oninput = "value = value.replace(/[^0-9]+/i,'');" > <!--入力欄の説明用--> <p id = "textEX">4桁の半角数字を入力して下さい</p> <!--実行&判定表示ボタン--> <div id = "button">判定</div> </div> <script src = "main.js"></script> </body> </html> 'use strict'; //リセットボタンの処理 const resetBotton = document.getElementById('reset'); resetBotton.addEventListener('click', () => { const textReset = document.getElementById("inputYear"); textReset.value = ''; }); //実行&判定表示ボタンの処理 const urudosiHantei = document.getElementById('button'); urudosiHantei.addEventListener('click', () => { const inputY = document.getElementById("inputYear"); const year = inputY.value; if(!year){ /* yearの中身が無かった場合falseになる、それを反転させる */ urudosiHantei.textContent = '未入力'; } else if(!year.match(/[0-9]{4}/)){/* yearが数字4桁でなければnullを返す、falseになるので反転させてtureを返す */ urudosiHantei.textContent = '4桁で!'; } else if(year % 4 === 0 && year % 100 !== 0 || year % 400 === 0){ /* 閏年の判定 */ urudosiHantei.textContent = '閏年です'; } else { urudosiHantei.textContent = '普通の年'; } });
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

// でコメントアウトできる事知りませんでした...

▪️ コメントアウトとは プログラミングはチームで各々担当分けして開発することが多いので、意思を伝えるためにコードの近くにコメントを残します。ですが、コメントをただ書いただけだと読み込まれエラーの原因になってしまいます。そこでコメントは残しつつ、エラーの原因にならないようにするためにコメントアウトを用います。 ▪️ コメントアウトの書き方 普通のコメントアウトの書き方は、< !-- > という記号で囲むとコメントアウトされると思います。 e) <! -- コメントアウトです > ですが、他にもコメントアウトのやり方があり綺麗なコードを書くプログラマーのコードを見ているとそれをよく多用しています。<下記に記載> ▪️ 他のコメントアウトの書き方  他のコメントアウトの書き方としてコードの前に//を書くとコメントアウトすることができます。 e) // コメントアウトです 今日の投稿は以上です。 他にもこんなコメントアウトの書き方があれば、是非教えてください。 wagaでした!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む