どうも7noteです。文字が書けるルーズリーフをCSSだけで再現 学生さんがよく使う、ルーズリーフ。 これをCSSで再現して、文字も書けるようにします。 ソース index.html <div class="paper"> <textarea></textarea> </div> style.css body { background: #F9EBB8; /* 背景色に淡い黄色を指定 */ } .paper { width: 300px; /* 紙の幅を指定 */ height: 450px; /* 紙の高さを指定 */ background: #fff; /* 紙の色を白に指定 */ border-radius: 5px; /* 角は若干丸くする */ padding: 20px 20px 20px 50px; /* 左に多い目に余白を取る */ position: relative; /* 基準位置とする */ } .paper::before { content: ''; /* 疑似要素に必須 */ width: 10px; /* 穴の幅を指定(穴の幅以上あればOK) */ height: 90%; /* 穴をあける距離を指定。紙の高さの90%に指定 */ background-image: radial-gradient(circle, #F9EBB8 5px ,transparent 5px); /* 円形のグラデーションを作成。色はbodyの背景色と同じ */ background-repeat: repeat-y; /* Y軸方向に繰り返す */ background-size: 10px 20px; /* 「背景の穴のサイズ(10px)」「穴のサイズ(10px)＋穴から次の穴までの距離(10px)」を指定 */ display: inline-block; /* インラインブロック要素にする */ position: absolute; /* 相対位置に指定 */ left: 10px; /* 左から10pxの位置に指定 */ top: 0; /* 上下中央に配置するため0に指定 */ bottom: 0; /* 上下中央に配置するため0に指定 */ margin: auto; /* 上下中央に配置するためautoを指定 */ } .paper textarea { outline: none; /* アウトラインを無効化。ビジュアル優先 */ background-image: linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 95%, #aaa 95%); /* 罫線を引く */ background-size: 100% 2em; /* 1段分の罫線を引く為、背景のサイズを指定 */ line-height: 2em; /* 行間を指定 */ border: none; /* デフォルトの枠線を無効化 */ width: 100%; /* 幅いっぱいに指定 */ height: 100%; /* 高さいっぱいに指定 */ resize: none; /* リサイズを無効化 */ } 解説 長方形を用意して、装飾をつけていきます。 重要になってくるのが、罫線、左の穴、四角の角丸です。 これらを再現することでそれらしさを表すことができます。 左の穴は擬似要素を使って再現していますが、div要素を二重にして再現することも可能です。 textareaと組み合わせる事で、実際にルーズリーフに文字を書いてるように見せかけています。 まとめ 社会人になるとなかなか筆記用具とかを使わなくなるので少し懐かしい感じがします。 特にit系の仕事だとほぼパソコンでメモしてしまうので、本当に使う機会が少ないですね。 だからこそWEBで再現することで面白さが出せます！ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

例の早押しボタンアプリで有名なボタンをCSSだけで作ってみました。 完成形 完成はこのような感じになります。 See the Pen RwpqPGP by saladbowl77 (@saladbowl77) on CodePen. html あまりタグの付け方が上手くないのはご愛敬ということで...(良い書き方あれば教えてください....) <div id="BuzzerQuizButton"> <div class="buttonTop" id="buttonTop1"></div> <div class="buttonTop" id="buttonTop2"></div> <div class="buttonTop" id="buttonTop3"></div> <div class="buttonBottom" id="buttonBottom1"></div> <div class="buttonBottom" id="buttonBottom2"></div> <div class="buttonBottom" id="buttonBottom3"></div> </div> css section#game div#BuzzerQuizButton { width: 300px; height: 300px; display: block; margin: 0 auto; position: relative; } section#game div#BuzzerQuizButton div{ position: absolute; top: 0; left: 0; } section#game div#BuzzerQuizButton div.buttonTop{ width: 250px; height: 250px; margin: 0 25px; } section#game div#BuzzerQuizButton div#buttonTop1 { background-color: #dc5a1c; clip-path: ellipse(50% 25% at 50% 43%); z-index: 1000; } section#game div#BuzzerQuizButton div#buttonTop2 { background-color: #ae231d; clip-path: ellipse(50% 25% at 50% 53%); z-index: 995; } section#game div#BuzzerQuizButton div#buttonTop3 { background-color: #ae231d; clip-path: polygon(0 42%, 100% 42%, 100% 54%, 0 54%); z-index: 990; } section#game div#BuzzerQuizButton div.buttonBottom{ width: 300px; height: 300px; } section#game div#BuzzerQuizButton div#buttonBottom1 { background-color: #f2f5c4; clip-path: ellipse(50% 27% at 50% 50%); z-index: 985; } section#game div#BuzzerQuizButton div#buttonBottom2 { background-color: #b19969; clip-path: polygon(0 50%, 100% 50%, 100% 64%, 0 64%); z-index: 980; } section#game div#BuzzerQuizButton div#buttonBottom3 { background-color: #b19969; clip-path: ellipse(50% 27% at 50% 64%); z-index: 975; } アップグレードしたい方へ step1 ボタンを押し込む アップグレードしたい人がいるかわかりませんが、cssだけでボタンを押し込む動作を実装します。 タッチ画面用にhtmlを少し書き換えます。 <div id="BuzzerQuizButton" ontouchstart=""> <!-- 略 --> </div> 以下のCSSを追加します。 section#game div#BuzzerQuizButton:active div#buttonTop1{ transform: translateY(5px); } section#game div#BuzzerQuizButton:active div#buttonTop3{ clip-path: polygon(0 45%, 100% 45%, 100% 54%, 0 54%); } step2 ボタンの音を追加する。 インターネットでフリー素材のボタンを押す素材を探してきて、JavaScriptで鳴らします。 htmlは適当に各自の環境に合わせてお願いします。 <audio id="musicPlayer" src="/button.mp3"></audio> //ボタンのID取得 const BuzzerQuizButton = document.getElementById("BuzzerQuizButton"); //audioの取得 const musicPlayer = document.getElementById("musicPlayer"); // iOS対応のため、無音で一度鳴らしておく window.onload = function() { // ミュート musicPlayer.muted = true; // 鳴らす musicPlayer.play(); // 止める stop(); } BuzzerQuizButton.addEventListener('click', function(){ // ミュート解除 musicPlayer.muted = false; // 再生位置を戻しておく musicPlayer.currentTime = 0; // 再生 musicPlayer.play(); }) 最後に 使えるかわかりませんが、ネタとしてどうぞ!

職業訓練校に通い始めました 前職を辞めてからしばらくはJavaScript,PHPを中心に勉強していましたがオブジェクト指向の餌食になってしまい、エラーのオンパレード。そこで海外留学やプログラミング教室など誰かに教えて貰おうと思ったのですが高額すぎて諦めました。そんな中とある日何気無くYoutubeで2chの元管理人のひろゆきさんのライブ配信（本人曰く録画放送）の中でお金を貰いながら勉強できる公的サービスがあると聞いて調べてみた所、職業訓練と言う働く気がある者なら誰でも受ける資格があり場合によれば職業訓練手当と言う在学中月10万円ほどもらえる仕組みがある事を知りました。※詳しくは各地方自治体のハローワークのホームページをご参照ください

はじめに これは文系大卒未経験が一から勉強しプログラマになれるかを検証する物語になります。 まずプログラミングを学ぼうと思った経緯をお話すると今から約４年前私は就職活動真っ只中でした。私はその前年に一年間オーストラリアに留学をしており、TOEICも800点を獲得し意気揚々と超大手企業にエントリーシートを出しまくりました。結果大量のお祈りメールを受け取ることになりました。 今思うとその当時スポーツ馬鹿でなんのスキルもない若造（海外にかぶれていて紺色のストライプが入ったスーツで就活していた）を採用するはずがないです。 兎にも角にもそのまま周りは内定を取り始めるなか私は書類選考すら通らない日々が続き心身共に（特にメンタル）が疲れ果てました。幸いな事にその当時のバイト先に採用してもらい（準社員）そのまま2年ほど働かせて頂きました。 その職場が特殊で就業中はお客さんとおしゃべりをひたすらすると言う内容で二年間で5000人ほどの方とお喋りをし、特に印象に残った方々は税理士さんや車両エンジニアの方など手に職があるスペシャリストの方で自分も何かスキル何か誇れる物が欲しいと思い昔からゲームやパソコンが好きだったので思い切って会社を退職しプログラミングの世界にやってきました。未経験で勉強も得意ではないので不安はいっぱいですが仕事も辞めてしまったのでやるしかない。今後もプログラミング情報や私の現状などを投稿させてもらいます。

１、概要 　ご存じの通り、HTML 5.2 で「<dialog>: ダイアログ要素」が使用できるようになりました。　まだ「Chrome」、「Edge」、「Opera」等一部のブラウザでのサポートですが、ダイアログ・ボックスを簡単に表示できるようになったので色々作成してみました。（次の画像はその一例です）　皆様の参考になれば幸いです。 ２、ファイル構成 　プログラム用ファイルは、HTML、CSS 及び JavaScriptが作られており、これらのソースコードは全て次のGitHubからダウンロードできます。　また、そのファイル構成は、以下の通りです。 - GitHub: Dialog_Boxes_for_HTML css：各種スタイルシートを収容するフォルダー images：各種アイコンや画像ファイルを収容するフォルダー js：関連するJavascriptを収容するフォルダー index.html：英語版用メニュー・プログラムのソースファイル EN_Dialog_***.html：英語版プログラムのソースファイル JP_Dialog_***.html：日本語版プログラムのソースファイル Simple_Dialog.html：簡単なダイアログ・ボックス表示プログラムのソースファイル ３、内容 　ここに記載されたプログラムは全て次の「Index.html」からも確認できます。　なお、日本語版については、それぞれの項目で確認してください。 - index.htm：英語版のプログラムが確認できます。 3-0. シンプルなダイアログ・ボックスの表示 　ダイアログ・ボックスを表示させるのは次の通りとても簡単です。　ここで忘れてならないのは、ダイアログを「開く」ボタンと「閉じる」ボタンを表示し、その処理を記載することです。　ダイアログを「開く」処理を記述しないとダイアログは表示されませんし、当然ながら「閉じる」処理を記述しないと表示されっぱなしになりますから。 - Simple_Dialog.htm：シンプルなダイアログ・ボックスの表示 Simple_Dialog.html <!DOCTYPE html> <html lang="en"> <head> <meta charset = "utf-8" /> <title> Simple Dialog Box 2021/06/10 by T. Fujita</title> </head> <body> <center> <p>Simple Dialog Box</p> <input type="button" value="Open dialog" onclick="dialog_Open()"> </center> <dialog id="dialog"> <center> <p>This is a simple dialog box.</p> <br> <input type="button" value="Close dialog" onclick="dialog_Close()"> </center> </dialog> <script> function dialog_Open(){ dialog.showModal(); } function dialog_Close() { dialog.close(); } </script> </body> </html> 3-1. インフォメーション等 (a) インフォメーション 　ここでは、２つのインフォメーション・ボックスを作成しました。　一つ目は単純な情報表示で、二つ目は文字にマウスを重ねると文字が砂のように崩れる効果を付けたものです。 - JP_Dialog_001.htm：インフォメーション表示のダイアログボックス (b) プロファイル 　写真がマウスの位置により動く効果をつけたものを用意しました。　「CSS」フォルダー内の「images」フォルダーの写真を変更してみて下さい。　但し、写真のサイズ等を変える場合はcss内の記述の変更も忘れずに！ - JP_Dialog_010.htm：プロファイル写真表示のダイアログ・ボックス 3-2. データ入力ダイアログ (a) テキスト入力 　単純なキーボードからのテキスト入力です。　ダイアログ・ボックスで入力されたテキストが親ウインドウに表示されます。 JP_Dialog_002.htm：テキスト入力のダイアログ・ボックス (b) 音声入力 　音声認識を使用したテキスト入力です。　もちろんキーボードからの入力も可能です。 JP_Dialog_012.htm：音声入力のダイアログ・ボックス (c) ラジオボタン 　ラジオボタンを使用した入力です。　入力結果が親ウィンドウに表示されます。 JP_Dialog_003.htm：ラジオボタン入力のダイアログ・ボックス (d) チェックボックス 　チェックボックスを使用した入力で、これも入力結果が親ウィンドウに表示されます。 JP_Dialog_004.htm：チェックボックス入力のダイアログ・ボックス (e) セレクター 　プルダウン・メニューを使用したセレクター入力です。 JP_Dialog_005.htm：セレクター入力のダイアログ・ボックス (f) カレンダー選択 　jqueryとjquery UI を使用したカレンダーでの年月日入力です。　jquery UIのテーマ一覧は、ここ で確認できますので、参考にしてください。 JP_Dialog_011.htm：カレンダー入力のダイアログ・ボックス 3-3. ファイル入出力 (a) テキスト・ファイル読込 　UTF-8やANSI/Shift-JISの自動判別可能なテキスト・ファイル読込用ダイアログ・ボックスです。　読み込んだファイルのデータは親ウィンドウにも表示されます。　テキスト・ファイルの出力（ローカル・ファイルへの出力）については、3-4項で実装しました。 JP_Dialog_006.htm：テキスト・ファイル読込のダイアログ・ボックス (b) CSVファイル読込 　UTF-8やANSI/Shift-JISの自動判別可能なCSVファイル読込用ダイアログ・ボックスです。　読み込んだCSVファイルのデータは親ウィンドウにも表示されます。　CSVファイルの出力（ローカル・ファイルへの出力）については、3-4項で実装しました。 JP_Dialog_007.htm：CSVファイル読込のダイアログボックス (c) 画像ファイル読込 　画像ファイル読込用ダイアログ・ボックスです。　読み込んだ画像は親ウィンドウにも表示されます。 JP_Dialog_008.htm：画像ファイル読込のダイアログボックス 3-4. 時計 (a) デジタル時計 　ダイアログ・ボックス内にデジタル時計を実装してみました。　背景色や文字色を変更することで色々使えると思います。 JP_Dialog_009.htm (b) アナログ時計 　ダイアログ・ボックス内にアナログ時計を実装してみました。　文字盤の画像を変えることで好みの時計を実装できます。 JP_Dialog_016.htm 3-5. メニュー等 (a) プルダウン・メニュー 　親ウィンドウのプルダウン・メニューから直接ダイアログ・ボックスを表示してみました。　ダイアログ・ボックスの内容は、上記と同様です。　また、テキストファイルの出力（UTF-8）と CSVファイル出力（UTF-8及びShift-JIS）も実装しています。 JP_Dialog_100.htm：親ウィンドウのプルダウン・メニューから直接ダイアログ・ボックスを表示 (b) スライダー 　ダイアログ・ボックス内にスライダーを設置し、単純な入力を切り替えるようにしてみました。 JP_Dialog_101.htm：ダイアログ・ボックス内にスライダーを設置 (c) アイコン・メニュー 　ダイアログ・ボックスにアイコン・メニューを設置し、そこから各種ダイアログ・ボックスを表示してみました。　親ウインドウ以外は、上記「(a) プルダウン・メニュー」とほぼ同一です。 JP_Dialog_102.htm：ダイアログ・ボックスにアイコン・メニューを設置 ４、Reference ダイアログ要素：HTML の 要素の説明 Dialog_Boxes_for_HTML：この記事で説明したプログラムのソースファイル保存場所

jQueryとJavaScriptを使ってWebデザインページを作成しました。 今回はjQueryフレームワークを使いました。（普段はBootStrap派です) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryを使ったアニメーションテスト</title> </head> <!-- jQueryを使ったテスト --> <script src="jquery.js"></script> <script> //F1タグの色を青に変える $(function(){ $('h1').css('color','blue'); }); //F2タグを消す $(function(){ $('h2').fadeOut(); }); //h4タグの色を変える $(function(){ $('h4').css('color','deeppink'); }); //h5タグの背景を変える $(function(){ $('h5').css('background-color','black'); }); //fuori-classeサイトを別ウィンドウで開く function test100(){ let i = 0; while (i< 1){ window.open('http://www.fuoriclasse2.com/','flora','width=600,height=450'); i++; } } //EURO2020のイタリアVSトルコ戦のサイトを別ウィンドウで開く function fuoriclasse(){ let i = 0; while (i< 1){ window.open('http://www.fuoriclasse2.com/cgi-bin/g.cgi?euro&2020&210611','italy vs Turkey','width=600,height=450'); i++; } } </script> <style> h1 { color:red; font-size:50px; } h2 { color:black; font-size:40px; } .test { color:lawngreen; font-size:50px; background-color:dimgray; text-align: center; padding :20px; margin: 20px; border:solid 10px #8b7348; width:350px; height:150px; } .test2 { background-color:aliceblue; text-align: center; color:darkred; font-size:80px; padding: 100px; } .test3{ color:indianred; font-size:30px; background-color:aliceblue; text-align: center; padding :20px; margin: 20px; border:solid 10px #b0c100; width:400px; height:100px; } .test4{ color:#05AB92; font-size:20px; background-color:whitesmoke; text-align: center; padding :20px; margin: 20px; border:solid 5px #cccccc; width:200px; height:100px; } .test5{ color:#00FF00; font-size:20px; background-color:whitesmoke; text-align: center; padding :20px; margin: 20px; border:solid 5px #66AA33; width:80px; height:50px; } .test6{ color:yellow; font-size:20px; background-color:darkorchid; text-align: center; padding :20px; margin: 20px; border:solid 5px #66AA33; width:200px; height:100px; } .test7{ color:black; font-size:18px; background-color:white; text-align: center; padding :20px; margin: 20px; border:solid 5px #66AA33; width:200px; height:100px; } </style> <body> <h1 class="test">jQueryのテスト</h1> <h2 class="test2">この部分は消えます</h2> <h3 class="test3" >I will move to Osaka at next year.</h3> <h4 class="test4">大阪で頑張るぞー</h4> <h5 class="test5">以上報告でした</h5> <br> <a class="test6" onclick=test100()>株式会社fuori-classe</a> <br> <br> <br> <br> <br> <a class="test7" onclick=fuoriclasse()>EURO2020の試合結果が出てるぞ</a> <br> </body> 完成したWebページです

やる事 スクロールをしていって、要素がスクリーンのある程度に来るとじわっと表示させる。 方法 html <section class="fadein"> <!--何かしらの要素を入れる--> </section> javascript $(function(){ $(window).scroll(function (){ $(".fadein").each(function(){ let imgPos = $(this).offset().top; let scroll = $(window).scrollTop(); let windowHeight = $(window).height(); if (scroll > imgPos - windowHeight + 250){ //ここの数値を変えて表示させる箇所を変更する $(this).addClass("fadein_scroll"); } else { $(this).removeClass("fadein_scroll"); } }); }); }); css .fadein { opacity: 0; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s; } .fadein_scroll { opacity : 1; }

HTMLでの読み込み HTML上で動かす場合 sample.html <script type = "text/javascript"> // ここにコードを書く </script>

ここに記載されているコードは単体で動くようになっているのでイメージが湧かない場合は動かしてみてください。 HTMLでの読み込み HTML上で動かす場合 sample.html <script type = "text/javascript"> // ここにコードを書く </script> 外部ファイルとして読み込む sample.html <script src="JavaScriptのファイルパス"></script> コメントアウト sample.js 1行の時 // これは例です 複数行の時 /* これは例です これは例です */ コンソールに出力 主にデバックで使用します。 sample.js console.log('Hello World'); console.log("Hello World"); //文字列は、シングルorダブルクォーテーションで囲む ダイアログ sample.js alert("Hello World!!"); 数値と文字列の出力 sample.js console.log(5 + 3); // 出力結果：8 console.log(5 - 3); // 出力結果：2 console.log(4 * 2); // 出力結果：8 console.log(4 / 2); // 出力結果：2 console.log(9 % 2); // 出力結果：1 ※余りの計算 console.log("5 + 3"); // 出力結果：5 + 3 console.log("5" + "3"); // 出力結果：53 console.log("あい" + "うえお"); // 出力結果：あいうえお console.log("A" + "B" + "C"); // 出力結果：ABC 計算式の省略 sample.js 省略前 省略後 x = x + 1 x += 1 x = x - 1 x -= 1 x = x * 1 x *= 1 x = x / 1 x /= 1 x = x % 1 x %= 1 変数 変数とはプログラミング言語における値を入れておく箱のこと 変数名にはルールがあり「数字開始・アンダーバー・ローマ字・日本語」は、エラーが出るのでNG sample.js const name = "tanaka"; // 変数名はtanaka console.log(name); // 出力結果：tanaka /*--------------------------------------------------*/ const name = "tanaka"; console.log(name + tarou); // 出力結果：tanakatarou /*--------------------------------------------------*/ const x = 1 + 100; alert(x); // 出力結果：101 変数の種類 変数にはvar、let、constがあり現場で使用するのはlet、constを使う const 再代入できない変数。 sample.js const name = "yamada"; name = "tanaka"; console.log(name) // エラーになる let 再代入できる変数。 sample.js let name = "yamada"; name = "tanaka"; console.log(name) // 出力結果:tanaka 真偽値 「true（真）」と「false（偽）」2つの値のこと sample.js a === b // aとbが等しければtrue a !== b // aとbが等しくなければtrue a < b // aの方がbより小さいときtrue a <= b // aの方がbより小さいまたは等しいときtrue /*--------------------------------------------------*/ && = かつ xが2のとき x > 1 && x < 3 //複数の条件がすべて真だからtrue /*--------------------------------------------------*/ || = または xが2のとき x < 1 && x < 3 //複数の条件のうち1つでも真だからtrue 条件分岐 if文を用いると「もし○○ならば○○を行う」という条件分岐が可能になる。elseは「もし○○なら○○を行う、そうでなければxxを行う」という処理ができるようになる。elseは日本語で「別の方法で、他に」の意味を持つ if文 sample.js if (条件式) { 処理 // 条件式がtrueのとき実行 } else { 処理 // 条件式がfalseのとき実行 } /*--------------------------------------------------*/ const name = "yamada" if (name === "yamada") { console.log("yamadaです") // 条件式がtrueのとき実行 } else if (name === "tanaka") { console.log("tanakaです") // 条件式1がfalseで、条件式2がtrueのとき実行 } else { console.log("yamadaでもtanakaでもないです") // 条件式1と2両方ともfalseのとき実行 } switch文 sample.js switch (対象) { case 値１: // 式の結果が値1に等しい場合に実行 break; case 値2: // 式の結果が値2に等しい場合に実行 break; default: // 式の結果がどれにも該当しない場合に実行 処理 } /*--------------------------------------------------*/ const food = "チョコレート"; // food === "チョコレート"のとき switch (food) { case "チョコレート": console.log("チョコレートは食べ物です"); // 実行される break; case "コーラ": console.log("コーラは飲み物です");　 // 実行さない break; default: console.log("食べ物でも飲み物でもありません"); } // bleakがあるのでswitch文を抜ける // bleakがないと他のcase内の処理も実行される 繰り返し処理 繰り返し処理とは、一定の処理を自動で繰り返し行う処理のこと。JSでループ（繰り返し）処理をおこなうときは、while文とfor文の2種類がある。 while文 sample.js while (条件式) { 処理 } /*--------------------------------------------------*/ let x = 1; // 変数の定義 while (x <= 5) { // 条件（条件式の真偽が判定される） console.log(x); // 繰り返す処理(条件式がtrueのとき処理が実行、falseのとき繰り返しが終了) x = x + 1; // 変数の更新（変数の値が更新され、再び条件に戻る） } for文 sample.js for(変数の定義;条件式;変数の更新){ 処理 } /*--------------------------------------------------*/ for (let x = 1; x <= 1; x += 1) { console.log(x); // 条件式がtrue（真）になるまで出力する } 配列 配列を使うと複数の値をまとめて書くことができる。 sample.js // 例えば、名前の値がいくつもある場合、配列を使うとシンプルになる let name01 = "tanaka"; let name02 = "sasaki"; let name03 = "yamada"; // 配列の出力 let name1 = ["tanaka", "sasaki", "yamada"] console.log(name1); // 配列の要素を取り出す(インデックス番号：「0=tanaka」「1=satou」「2=yamada」) let name2 = ["tanaka", "sasaki", "yamada"] console.log(name2[0]); // 出力結果：tanaka lengthメソッド sample.js const name = ["tanaka", "sasaki", "yamada"] console.log(name.length); //出力結果：3 pushメソッド sample.js const name = ["tanaka","sasaki","yamada"] name.push("suzuki") console.log(name); // 出力結果：tanaka,sasaki,yamada,suzuki 連想配列 配列は複数の値を並べて管理するのに対して、連想配列はそれぞれの値にキーと呼ばれる名前をつけて管理する。 sample.js [値1, 値2] // 配列 { キー1: 値1, キー2: 値2, } // 連想配列 /*--------------------------------------------------*/ let fruit = { "name": "banana", "color": "yellow", }; console.log(fruit.name); // 出力結果：banana console.log(fruit.color); // 出力結果:yellow アロー関数 関数とは、ある処理をまとめたプログラムのこと。同じ処理をまとめて定義し、何度も使い回しができるかたちにしたもの。 sample.js const hello = () => { // hello　= 関数名 console.log("こんにちは") // console.log("こんにちは") = 実行される処理 } hello(); // 出力結果：こんにちは 引数 引数(ひきすう)とは関数に与える追加情報のようなもの。関数を呼び出すときに一緒に引数を渡すことで、関数の中でその値を利用することができる。 sample.js const 関数名 = (引数名) => { 処理 } 関数名(値); // 関数の呼び出し /*--------------------------------------------------*/ const introduce = (name) => { console.log(name); } introduce("tanaka"); // 出力結果：tanaka /*--------------------------------------------------*/ const introduce = (name, age) => { console.log("名前は" + name + "です"); console.log(age + "歳です"); } introduce("田中", 20); // 出力結果：名前はtanakaです。20歳です。 戻り値 関数の処理結果を呼び出し元で受け取る方法。呼び出し元で受け取る処理結果を戻り値と呼び、このことを「関数が戻り値を返す」と言う。 sample.js const 関数名 = () => { return 値; // 「return 値」と書くことで、関数はその値を戻り値として返す。 } /*--------------------------------------------------*/ const add = (a, b) => { return a + b; } sun = add(1, 3) // 呼び出し部分 console.log(sun); // 結果４ DOM取得 DOMとは「Document Object Model」の略。直訳すると、「ドキュメントを物として扱うモデル」になる。プログラムからHTMLやXMLを自由に操作するための仕組み sample.html <input type="text" id="text_area"> sample.js const textArea = document.getElementById("text_area") console.log(textArea) // 出力結果:<input type="text" id="text_area"> 値（value）を取得 sample.html <input type="text" id="text_area" value="banana"> sample.js const textArea = document.getElementById("text_area") console.log(textArea.value) // 出力結果:banana 入力した値（value）を取得 sample.html <input type="text" id="text_area"> <button id="send_button">送信</button> sample.js const textArea = document.getElementById("text_area") // inputタグのDOMを取得 const sendButton = document.getElementById("send_button") // buttonタグのDOMを取得 sendButton.addEventListener('click', () => { console.log(textArea.value) // 出力結果:入力された値 })