初心者がJavaScriptを独学で習得！3か月でWeb案件デビューする勉強法とは？その2
おはようございます！hamatakeBlogです！
JavaScript独学第二弾！やっていきましょう！
※この記事は二部構成になっております。第一部はこちらからどうぞ。
【JavaScript★独学でも大丈夫★】初心者が3か月で案件デビューしたJavaScript勉強法！！その１ - hamatakeBlog
JSがメインだけど、CSSもちょっとつけてみる
さて、前回の記事でひとまずブラウザ上にHTMLを表示することができたと思いますそれでは、次にCSSでデザインを付ける方法をご紹介していきます！
今回CSSは、sample.cssファイルに記載していきます。
まず、sample.htmlのheadタグに下記のように記載してください。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sample.css">
</head>
<body><button>Hello World!!</button></body>
</html>
HTMLのlinkタグを使用することで、CSSファイルを読み込むことができます。
※href=""に読み込みたいCSSファイルのパスを指定。
では、まずはHello World!という文字の色を赤文字にしてみましょう！
sample.cssファイルを開いて下記を記載してください。
body {
color : red;
}
bodyがhtmlのbodyタグ、そして{}の内部がそのbodyタグに対して変更を加える修正内容となります。
今回は文字色を指定するための、colorを用いて文字色を変更してみました。
上記のように変更できていればOKです！！
他にもＣＳＳで、できるでデザインは山ほどありますが、今回はJS（JavaScript）がメインの記事のため紹介までとさせていただきます。
やっとJavaScript
やっとかよ。。と思ったあなた！これでもだいぶ省略したほうです笑
あくまでJavaScriptというプログラミング言語はWebサイトありきの言語になるので、まずはHTML、CSSをある程度理解しなければならないです。
CSSと同様にJSファイルをまずは、HTMLにsample.jsを読み込ませましょう！
また、HTMLには要素と呼ばれるものを設定できます。今回はタグに設定できるid要素にtestを設定します。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sample.css">
</head>
<body><button id="test">Hello World!!</button>
<script type="text/javascript" src="sample.js"></script>
</body></html>
上記で、JSファイルの読み込みが完了しました！
次にsample.jsに下記を記載してください！
document.getElementById("test").onclick = function() {
// ここに#buttonをクリックしたら発生させる処理を記述する
window.location.href = "https://hamatakeblog.hatenablog.com/archive"
};
id要素がtestのものがクリックされたときに上記の処理が実行されます。
上記では、 window.location.href=""によってパスに遷移するような処理が行われます。
まとめ
以上で、かなり簡略的ですが、JavaScriptの始め方を解説しました。
ここからさらに知識を深めるためには、さまざまな学習が必要となりますが、とりあえず始めたいという方にっとてはちょうどいいぐらいの記事と思っています。
さらに深く学習したいと考えている方は、ツイッターもやっているのでＤＭいただけたら幸いです！！
みなさんのプログラマーライフ素晴らしいものとなるようhamatakeBlog一同応援させていただきます！！
初心者がJavaScriptを独学で習得！3か月でWeb案件デビューする勉強法とは？その１
おはようございます！hamatakeBlogです！
前回の記事で、【初心者用2021】激熱！プログラミング言語おすすめ3選！！をご紹介させていただきました！（まだ見てない方は、ぜひこちらからどうぞ！）
今回は紹介させていただいたプログラミング言語の中でも最もおすすめのJavaScriptについて超初心者向けに始め方を現役エンジニアでもあるhamatakeBlogが解説していきたいと思います！
環境を整える
まず初めにJavaScriptを動作できるよう環境を整える必要があります。といっても難しそうと構える必要はありません、JavaScriptはブラウザとテキストエディターがあれば即プログラミングを行うことができます！
準備するもの
・ブラウザ（おすすめはGoogle ChromeやFirefox）
・テキストエディター（おすすめはVisual Studio Codeやサクラエディタ。メモ帳でも可能）
これさえあればJavaScriptの学習がすぐに始めることができます！
Webページの構成
それでは、JavaScriptを学習しましょう！...と言いたいところですが、その前にそもそも私たちが見ているWebページがどのような構成でできているのか、またJavaScriptはどのような役割を持っているのかを簡単に解説していきます。
HTML
HTML（エイチティーエムエル）は、Webページの土台を作るための言語です。
Webページの文章構成を担っており、ページ上に表示をしたい文章や写真などの情報を表示するよう指示を行います。
CSS
CSS（シーエスエス）は、スタイルシートとも呼ばれ、HTMLがWebページの文書構造を作る言語に対して、CSSは、HTMLで作られた文書構造にデザインを加える役割を担っています。
JavaScript
JavaScriptは、Webページにアニメーション等の動きつけるために開発されたプログラミング言語です。JavaScriptがなくてもWebページとして存在することは可能ですが、文書と画像を見るだけの静的なWebページとなってしまいます。
実践
それでは、長らくお待たせしました！実際にJavaScriptを使って簡単なプログラミングをしてみましょう！
手順1
HTML、CSS、JavaScriptのファイルを置くためのフォルダを作成します。今回はデスクトップ上にフォルダ「test」を作成します。
手順2
先ほど作成したフォルダ「test」内に、「sample.html」「sample.css」「sample.js」を作成します。
※sample.htmlなどは、ファイル新規作成からテキストドキュメントなどを選択しファイル名を変更して作成してください。また.txtの部分も含めて変更を行ってください。
拡張子（.txtなどのこと）を変更すると下記のようなアラートがでますが、「はい」を選択してください。
手順3
それでは、sample.htmlを右クリックして「プログラムから開く」→「別のプログラムを選択」→ここからテキストエディターを選択してファイルを開きましょう。
ファイルが開けたら、下記のソースを記述してみましょう。
<!DOCTYPE html>
<head>
<meta charset="utf-8"></head>
<body>Hello World!!</body>
</html>
HTMLはタグと呼ばれる<>から</>で囲まれた要素によって構成されています。（一部閉じタグ（</>）が省略可）
- !DOCTYPE html：DTDの宣言と文章タイプがHTMLであることを表す。
- head：ページが読み込まれてもウェブブラウザーには表示されない部分。タイトルやメタデータの設定をheadタグ内に記載する。
- meta：メタデータを記載。メタデータとは、文書の文字コードや文書の概要、キーワードなどの文書に関する情報のことを表す。上記では、文字エンコーディングがutf-8であることを記載している。
- body：Webページに表示される本文をこの中に記載する。
記載が完了したら、保存をし（Ctrlキーとsキーを同時押し）フォルダ内のsample.htmlをダブルクリックしましょう。下記のようにブラウザ上で表示されていればうまくHTMLが記載できていることになります。
「Hello World!!」を別の文言に修正して反映させてい場合は、修正したファイルを保存しブラウザ更新をすると書き換わります。
今回は、ここまでとなります！
⇓続きはこちらからどうぞ！⇓
【JavaScript＋CSS】簡単なWebタブ切替の実装方法を徹底解説｜初心者OK＆サンプル付きその２
おはようございます、hamatakBlogです！
今回は、タブ表示切替その２です。
前回のタブ切替その１を見てない方はそっちから見てね！
ということでさっそく前回の続きから解説していきたいと思います。
前回はJavascriptを使って、タブの切替を行いましたが、今回ご紹介するのは、CSSのみでタブ切替を行う方法です！
Javascriptを読み込まない分、前述したロジックよりも軽量で早く処理を行うことができます！（今回は短い処理なので、差異はわかりにくいですが。。。）
それでは、学習スタート！！
CSSのみでタブ切替をしてみる
それでは、CSSとHTMLを用いてタブの切替をやってみましょう！
HTML
<div>
<!--タブを表示-->
<div class="tab-group">
<input id="japanese" class="tab-btn" name="tab-name" type="radio" checked>
<label class="tab" for="japanese">国語</label>
<input id="mathematics" type="radio" name="tab-name">
<label class="tab" for="mathematics">数学</label>
<!--タブ切替表示内容-->
<div class="content-group">
<div id="japanese-content">国語の授業内容</div>
<div id="mathematics-content">数学の授業内容</div>
</div>
</div>
</div>
.tab{
padding:1vh;
list-style:none;
border:double 4px rgb(58, 57, 57);
text-align:center;
cursor:pointer;
float: left;
width: 30%;
}
.content-group{
height:100px;
border:solid 1px #CCC;
background:rgb(180, 180, 180);
}
/* 選択されたタブのスタイル変更 */
#japanese:checked ~ .tab[for=japanese],
#mathematics:checked ~ .tab[for=mathematics],
{
background:#0017FF;
color:#FFF;
}
/*ラジオボタンを全て消す*/
input[name="tab-name"] {
display: none;
}
/*タブ切り替えの中身のスタイル*/
.content-group div {
display: none;
}
.content-group{
clear: both;
}
/* 選択されているタブのコンテンツのみを表示 */
#japanese:checked ~ .content-group #japanese-content,
#mathematics:checked ~ .content-group #mathematics-content,
{
display: block;
}
イメージはこちら⇓
上記イメージを見てもらうとわかりますが、Javascriptで作成したものと
見た目は変わりません。
inputタグのradioボタンでタブ切替を行います。
radioボタンとは、選択肢の中から一つだけ選べるタイプのボタンのことです。
この特性を活かしタブ切替に利用します。
chekedを記載することで、初期表示時のタブを選択します。
<input id="japanese" class="tab-btn" name="tab-name" type="radio" checked>
<label class="tab" for="japanese">国語</label>
続いて、CSSで特質すべき点は、下記のロジックです。
/* 選択されているタブのコンテンツのみを表示 */
#japanese:checked ~ .content-group #japanese-content,
#mathematics:checked ~ .content-group #mathematics-content,
{
display: block;
}
まず、#japanese:checkedですが、これは「id」が「japanese」の要素がチェックされた状態の時を表しています。つまりタブが選択された状態の時を指します。
続いて、この波線はチルダ（~）といい、選択した要素以降を指定させるためのセレクタです。
つまり、上記のロジックは、タブが選択されたとき、コンテンツ（授業内容）を表示するということです。
まとめ
いかがだったでしょうか、今回はタブ切替について、解説しました。
Javascriptを用いる方法とCSSのみの方法の2パターンで解説しましたが、
JavaScriptを用いる場合は、JavaScriptを読み込むため、どうしてもCSSよりも処理が遅くなりますが、タブが追加などの修正の対応は、CSSのみよりもやりやすいなど、それぞれ一長一短の側面があります。
臨機応変にソースを使いわけてより良いプログラミングライフを送れるようこれからもブログ更新をしますので、ぜひ別の記事もまた見てください！！
以上ご視聴ありがとうございました！
|
|
【JavaScript＋CSS】簡単なWebタブ切替の実装方法を徹底解説｜初心者OK＆サンプル付き
おはようございます、hamatakBlogです！
今回は、タブ表示切替についてご紹介します。
タブってどんなものなの？？
タブとは、下記の画像のようなものです！
あー、よく見たことある！
本ブログでも、ヘッダー部分にタブを作ることで、ジャンル分けをしています！
タブがなくても、Webページは作れますが、組み込むことでページの可読性を高めることができるんです！！
タブの切り替え処理は、JavaScriptを組み込んでタブ選択時のイベントを拾って切り替えを行うパターンや、HTMLとCSSのみで実装するパターンがあります。
この記事では、JavaScriptまたはCSSだけでWebページにタブ切り替え機能を実装する方法を紹介します。初心者の方でもコピー＆ペーストですぐに試せるサンプル付きです。
それでは、学習スタート！！
JavaScriptでWebタブ切り替えを実装する方法
それでは、JavaScriptを用いてタブの切替をやってみましょう！
HTML
<div>
<!--タブを表示-->
<ul class="tab-group">
<li class="tab japanese active-tab">国語</li>
<li class="tab mathematics">数学</li>
</ul>
<!--タブ切替表示内容-->
<div class="content-group">
<div class="content japanese show">国語の授業内容</div>
<div class="content mathematics">数学の授業内容</div>
</div>
</div>
.tab-group{
/* display: flexでタブを横並びにする */
justify-content: center;
}
.tab{
padding:1vh;
list-style:none;
border:double 4px rgb(58, 57, 57);
text-align:center;
cursor:pointer;
}
.content-group{
height:100px;
border:solid 1px #CCC;
background:rgb(180, 180, 180);
}
/* 授業内容は、デフォルト非表示 */
.content{
display:none;
}
.tab.active-tab{
background:#0017FF;
color:#FFF;
}
/* is-showクラスが追加された場合表示 */
.content.show{
display:block;
}
// class=tabの要素を取得
const tabs = document.getElementsByClassName('tab');
// tabsはタブの個数分存在するので、ループ処理を用いてそれぞれにクリックイベントを付与
for(let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', changeTab, false);
}
// addEventListenerで付与されたクリックしたときに呼び出される関数
function changeTab(){
// タブのclassを変更
// active-tabクラスによって選択されているかを判別しているため、
// タブクリック時に一度すべての選択を解除するためクラス削除
document.getElementsByClassName('active-tab')[0].classList.remove('active-tab');
// thisでクリックされた要素のみを指定することができる
// addでクリックされたタブにactive-tabを追加
this.classList.add('active-tab');
// コンテンツのclassを変更
document.getElementsByClassName('show')[0].classList.remove('show');
// クリックされたタブのクラスを取得
const tabClasses = Array.prototype.slice.call(this.classList);
// filter関数でクラス配列から、
// tab,active-tab以外のクラスを取得（japanese,mathematics,historyを取得）
var result = tabClasses.filter(function( item ) {
return item !== 'tab' && item !== 'active-tab';
});
// タブに応じた授業内容を表示
document.getElementsByClassName('content' + ' ' + result)[0].classList.add('show');
};
イメージはこちら⇓
まずは、HTML、CSSについて解説します。
HTMLに「ulタグ、liタグ」を用いてタブになる部分を表示します。その下に、タブごとで表示した内容（divタグ内）を表示します。
また、初期表示として表示したいタブと、タブに関連したdivタグにクラスを付与します。(それぞれactive-tab、show)
このクラスをJavaScripで付け替えることによって画面のタブ表示を変更していきます。
<li class="tab japanese active-tab">国語</li>
<div class="content japanese show">国語の授業内容</div>
CSSでは、上記で説明したクラス（active-tab、show）によって表示非表示を設定します。
/* 授業内容は、デフォルト非表示 */
.content{
display:none;
}
/* is-showクラスが追加された場合表示 */
.content.show{
display:block;
}
またタブを横に並べるほうがそれっぽいので、CSSでdisplay=flexを記載して、タブを横に並べます。
そのほか細かいデザイン設定は行っていますが、今回は説明を割愛します。
続いて、JavaScript
全部のタブ（class=tabを持つ）に、addEventListenerメソッドでClickイベントを付与します。
またgetElementsByClassNameで引数("tab")を持つ要素群が複数取得することができるので、この要素群をfor文を用いて要素の数だけループ処理を行います。
// class=tabの要素を取得
const tabs = document.getElementsByClassName('tab');
// tabsはタブの個数分存在するので、ループ処理を用いてそれぞれにクリックイベントを付与
for(let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', changeTab, false);
}
forで取り出した要素に対して、addEventListenerでClickイベントを付与し、第二引数にタブがクリックされた時に呼び出されるchangeTab関数を入れます。
addEventListenerについてより深く知りたい方は、
こちらのサイトをご覧ください。⇓
続いて、addEventListenerの第二引数に入れたchangeTab関数について、このchangeTab関数はタブのクリックイベント発火時に呼び出される関数として作成していきます。
// addEventListenerで付与されたクリックしたときに呼び出される関数
function changeTab(){
この関数で、行いたいことはクラスの追加と削除です。
classListに対してadd()、remove()関数を呼び出すことでクラスの追加、削除を行うことができます。
thisは、クリックされた要素（タブ）のみを指してます。
// タブのclassを変更
// active-tabクラスによって選択されているかを判別しているため、
// タブクリック時に一度すべての選択を解除するためクラス削除
document.getElementsByClassName('active-tab')[0].classList.remove('active-tab');
// thisでクリックされた要素のみを指定することができる
// addでクリックされたタブにactive-tabを追加
this.classList.add('active-tab');
CSSだけでタブ切り替えを実装する簡単な方法
続いて、CSSのみでタブ切替を行いますが、少し記事が長くなってきたため、次回の記事にCSSのみでの切替を紹介したいと思います。
後程リンクも記載しますので、ぜひご覧ください！
こちらのリンクからどうぞ！
以上ご視聴ありがとうございました！
|
|
JavaScriptでボタンやテキストの表示・非表示( visibility , display )を切り替える方法【初心者向けサンプルコード付き】
おはようございます、hamatakeBlogです！
JavaScript入門！この記事は、JavaScriptの学習をすでに始めているかた向けの記事となっています。
超初心者編は、こちら⇓からどうぞ！
【JavaScript★独学でも大丈夫★】初心者が3か月で案件デビューしたJavaScript勉強法！！その１ - hamatakeBlog
今回は
ボタンやテキストの表示非表示切り替え処理を実行する方法
をご紹介します。
・特定の条件の時に表示したい！
・ボタンが押されたら表示、もう一回ボタン押したら非表示にしたい！
などの処理を実装したい人向けの記事となります！
ということで、今回はボタンクリックした時、テキスト表示非表示切り替えをする処理を作っていきます！
完成イメージはこんな感じ⇓
---ここにテキスト表示---
テキストが表示されました！
----------------------------
それではやっていきましょう！
Style visibilityで表示非表示
対象の要素にstyle.visibilityを設定することで、文章のレイアウトを変更することなく表示表示を切り替えることができるます。
style.visibilityの要素をJavascriptで付け替える方法を教えます。
まずは、HTMLを準備します。
<body>
<button type="button" id="btn1">テキストを表示切替！</button>
// style visibility : visible でテキストを表示させる
<p id="toggleText1" style="visibility : visible">テキストが表示できました！
</p>
<script type="text/javascript" src="sample.js"></script>
</body>
※今回ボタンタグにフィーチャーするためheadタグなどは省略して記載しています。
詳しくは、こちら⇓の記事を参考にしてHTMLを作成してください。
【JavaScript★独学でも大丈夫★】初心者が3か月で案件デビューしたJavaScript勉強法！！その１ - hamatakeBlog
続いてJavascript
sample.js
// document.getElementById()でHTMLの中でid属性がbtnの要素を取得し、変数buttonに代入する
let button1 = document.getElementById('btn1');
// addEventListenerでボタンのクリックイベント時に処理を実行
button1.addEventListener("click",function() {
// id属性がtoggleTextの要素を取得
let text1 = document.getElementById('toggleText1');
// text の style visibility の状態で分岐条件を設定
if(text1.style.visibility === 'visibility'){
text1.style.visibility = 'hidden';
} else {
text1.style.visibility = 'visible';
}
});
完成形はこんな感じ！↓
テキストが表示されました！
Styleメモ
- style.visibility
文章のレイアウトを変更することなく表示表示を切り替えることができる - visible
style.visibilityに設定することで対象を表示状態にする - hidden
style.visibilityに設定することで対象を非表示状態にする
Style displayで表示非表示
対象の要素にstyle.dipslayを設定することで、表示表示を切り替えることができるます。(※visibilityと違いレイアウトまで非表示となるので注意！)
style.displayの要素をJavascriptで付け替える方法を教えます。
まずは、HTMLを準備します。
<body>
<button type="button" id="btn2">テキストを表示切替！</button>
// style display: block でテキストを表示させる
<p id="toggleText2" style="display: block">テキストが表示できました！
</p>
<script type="text/javascript" src="sample.js"></script>
</body>
sample.js
let button2 = document.getElementById('btn2');
button2.addEventListener("click",function() {
let text2 = document.getElementById('toggleText2');
// text の style display の状態で分岐条件を設定
if(text2.style.display === 'block'){
text2.style.display = 'none';
} else {
text2.style.display = 'block';
}
});
完成形はこんな感じ！↓
テキストが表示されました！
Styleメモ
- style.display
文章表示表示を切り替えることができる - block
style.displayに設定することで対象を表示状態にする - none
style.displayに設定することで対象を非表示状態にする
まとめ
以上、テキスト表示非表示の処理でした。
表示非表示切替はあらゆる箇所で利用できるのでしっかりとマスターして快適なエンジニアライフを送りましょう
![1冊ですべて身につくJavaScript入門講座 [ Mana ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/5758/9784815615758_1_6.jpg?_ex=128x128 "1冊ですべて身につくJavaScript入門講座 [ Mana ]")
こちらの記事を見終わった方は次の記事をチェック！
【ChatGPT新機能】「Study Mode（学習モード）」 問題を解く過程も回答
おはようございます、hamatakeBlogです！
昨今話題のChatGPTに2025年7月29日新機能が追加されることをOpenAIが発表しました！
新機能「Study Mode（学習モード）」は、主な対象を学生とした新しい学習機能で、これまでの単純な解のみを回答するのではなく、解に至るまでの過程まで含めてAIが回答をしてくれる機能です！
これにより使用する学生にとっては、単純な回答のみを暗記するような機械的な理解ではなく、より深く知識や応用に至るまでの根拠を身に着けることが期待できます！
ということで今回は
ChatGPT新機能「Study Mode（学習モード）」の主な機能について
ご紹介します。
それではやっていきましょう！
主な特徴と目的
- ソクラテスメソッドを採用し、ユーザに直接答えを提示するのではなく、問いかけやヒントを通じて志向を促す方式。
- 学習者のレベルや過去の会話内容に基づいて、個別化された説明やチェック問題が提示される。
- 途中でオンオフ切替も可能で、必要に応じて通常モードでの回答も可能。
ねらいと背景
-
ChatGPTが「単なる宿題代行ツール」「答えを自動提供するツール」として使われるイメージを払拭し、「学びを促進するツール」として再定位するのが目的。
-
スタディモードの学習設計は、学生が主体的に関与し、思考を深めるプロセスを促すために工夫されている。
Study Modeの使い方
- ChatGPTウィンドウの「ツール」をクリック。
- あらゆる学びをサポートをクリック。（勉強するタブが表示されればOK）
- 質問や課題を入力。
- ChatGPTが学習者に質問しながら導く形で対話が進行。
- ヒントや段階的な説明、簡単なクイズなどを通じて理解を深める。
まとめ
以上、ChatGPT新機能Study Modeの説明でした。
今後も発展するChatGPTの新機能を使いこなし快適なAIライフを過ごしましょう！
こちらの記事を見終わった方は次の記事をチェック！
プログラミングの必須処理: ループの活用法
おはようございます、hamatakBlogです！
今回は、ループ処理を解説したいと思います!
ループってことは、繰り返すって意味かな～？！
そうです！ループ処理は繰り返し処理を行うができるようになります！
プログラムを組むにあたって、必須な処理なので、ぜひ覚えましょう！
ループ処理には、複数の実装方法があります。用途によって使い分けましょう！
それでは、学習スタート！！
for文
まずは、ループ処理の基本の一つであるfor文について解説します！
// ( 変数の初期化; ループ条件; 加算式 )
for (let i = 0; i <= 5; i++) {
console.log("for文:" + i);
}
for文は、上記のように記述します。
大きく3つに分かれています。
-
for文であることを定義するfor
- ループ処理の条件やループ回数を記述する( )
- ループする処理を記述する{ }
さらに( )の中は、(変数の初期化; ループ条件; 加算式 )に分かれており、セミコロンで区切って定義することができます。
つまり、上記の式は、変数 i = 0 をループするごとに、i++ で加算し、i が 5 以下の場合ループ処理を行うとなります。
そして、ループ内の処理は、console.logで i が加算されていることを確認するようログ出力を行っています。
また、for文の ( ) 内は省略が可能で下記のように記述ができます。
// for文の（;;）内は省略可能
// 条件なしとなるため無限ループに気を付ける必要がある
let forCount = 0;
for (; ;) {
if (forCount > 5) {
// 下記でも説明しますが、breakでループ処理を抜けます
break;
}
console.log("for文省略:" + forCount++);
}
ただし、すべてを省略した場合は無限ループとなるためループを抜けるための処理をいれるようにしましょう。break文に関しては、後程解説します。
while文
2つ目は、こちらもfor文と同様にループ処理の基本の一つであるwhile文について解説します！
// for文と違い、ループの条件のみです
let whileCount = 0;
while (whileCount <= 5) {
console.log("while文:" + whileCount++);
}
while文も、for文と同様の構成となってます。
-
while文であることを定義するwhile
- ループ処理の条件やループ回数を記述する( )
- ループする処理を記述する{ }
ただし、for文と違い、( ) の中は、ループの条件式のみ記述が可能です。
またwhile文は ( ) の中を省略はできません。
do while文
while文の派生であるwhile文について解説します！
// 条件：カウントが5以上の場合、ループ処理を行う
// do while文では条件に限らず1回は処理を行い2回目のループを行う時に、
// 条件処理を適応するため、下記では初期値カウント0で「カウントが5以上」の条件を
// 満たさないが、1度だけログ出力処理を行っている
let doWhileCount = 0;
do {
console.log("do while文:" + doWhileCount++);
} while (doWhileCount > 5);
while文と構成が少し違って見えますが、基本的には、同じです。
-
while文であることを定義するwhile
- ループ処理の条件やループ回数を記述する( )
- ループする処理を記述する{ }
- do while文であることを定義するdo
ただし、ループ処理の仕方が違います。
do while文では条件に限らず1回は処理を行い2回目のループを行う時に、 条件処理を適応します。
そのため上記処理では、初期値カウントが0で、本来「カウントが5以上」の条件を満たさないが、1度だけログ出力処理を行っています。
continue文
続いて、ループ処理内で使うcontinue文について解説します！
// continueは、ループ処理内で使用します
// continueが実行されるとループ内のcontinue以下のループ内処理をスキップし
// ループ処理を再開します
let continueCount = 0;
while (continueCount <= 10) {
if (continueCount === 5) {
continueCount++;
continue;
}
console.log("continue文:" + continueCount++);
}
continue文は、ループ処理そのものではなく、実行した時、continue以下のループ内処理をスキップし、またループ処理に戻ります。
上記の例では、continue文が実行されるのはcontinueCountが5の時で、continueが実行された後、continue以下の処理である、console.logは実行がスキップされループ処理に戻ります。
break文
continueと同様にループ処理内で使うbreak文について解説します！
// continueと同様に、ループ処理内で使用します
// breakが実行されると、break以下処理を実行せずに、ループ処理を抜けます
let breakCount = 0;
while (breakCount <= 10) {
if (breakCount > 5) {
break;
}
console.log("break文:" + breakCount++);
}
break文は、ループ処理そのものではなく、実行した時ループ処理を抜けます。
上記の例では、本来10回ループされるよう条件定義されたwhile文ですが、break文が実行されてループ処理を終了します。
label文
for文、while文などに使うlabel文について解説します！
// 特定のforやwhileに対して、break、continueを実行したいときに、label文をしようします
// 下記では、本来breakしたときに、内側のfor文を抜けるbreakにlabelをつけることによって、
// labelされたwhile文を抜けるよう処理を行っています
// ループ処理がネストされた場合などで使用します
let labelCount = 0;
markLoop:
while (labelCount <= 10) {
for (let i = 0; i <= 3; i++) {
if (i === 2) {
break markLoop;
}
console.log("labelCount:" + labelCount + " i:" + i);
}
labelCount++;
}
label文は、特定のforやwhileに対して、break、continueを実行したいときに、label文をしようします。
使い方は、for文やwhile文の前に、ラベルを記述。この時ラベルの値は、JavaScriptの予約語でなければどんな文でも問題ありません。そして同じラベルをbreakやcontinueのあとに記述します。
上記の例では、通常直近のループを抜けるbreak文（今回はfor文）ですが、ラベル（markLoop）を記述しているため、while文のループを抜けます。
for in文
forの派生であるfor in文について解説します！
// for文の派生系
// ( 変数 in オブジェト )でオブジェクトのプロパティ（name,age）を
let object = { name: "Taro", age: 20 };
}
// 配列をいれた場合は、配列のインデックス番号をvalueに代入する
let array = ["a", "b", "c", "d"];
}
for in 文は、オブジェクトのプロパティの数ループ処理を行います。
( 変数 in オブジェクト)の形で定期を行います。上記の例では、nameとageのプロパティを持つ変数objectをfor in文で、ループを行っています。プロパティname、ageはvalueに代入されます。
配列をfor in文に記述した場合は、valueにインデックス番号を代入します。
for of文
forの派生であるfor of文について解説します！
// for文の派生系
// ( 変数 of 配列 )で配列の値を変数に代入し、配列の数だけループを行う
let array = ["a", "b", "c", "d"];
}
for in 文は、配列のプロパティの数ループ処理を行います。
( 変数 of オブジェクト)の形で定期を行います。上記の例では、配列のプロパティの値（a, b, c, d）をループごとにvalueに代入して処理を行います。
ということで今回は、ループ処理について解説しました！
種類は少し多かったですが、非常に重要な処理のため、しっかりと使えるようになりましょう！
以上ご視聴ありがとうございました！
|
|
