イイダリョウのブログ。【JSの基本-後編】書ける前に読む!HTML、CSS、JSの書式-52017-10-25【JSの基本-後編】書ける前に読む!HTML、CSS、JSの書式-5JSWebサイトを形作っている言語「HTML」「CSS」「JS」。この3言語を身につけるためには、まずはフワッとでもコード*1を読めるようになることが先決と思う。人のコードを読める(インプット)と、自分でゼロから書く(アウトプット)ときの引き出しになる。書ける前に読む!*2と、いうことでコードを読むために理解しておくといいHTML、CSS、JSの基本書式をまとめる。第5回は「JSの基本-後編」Webサイトの動作、変更を制御する「JS」の書式。分岐と反復if文(分岐)switch文(分岐)for文(反復)while文(反復)JSのネスト構造JSサンプル第1回(Webの基礎知識)にも書いたようにJSは文書に動作や変更を加える「スクリプト言語」だ。前・後編に分けてお送りするJS編。後編では「イベント」「制御構造」について解説する。イベントイベント=いつ「イベント」は日本語文でいう「いつ」に当たる部分だ。これまで対象(オブジェクト)の処理(プロパティ、メソッド)について触れたが、イベントを設定すれば実行のタイミングが制御できる。「いつ(イベント)、何が(オブジェクト)、どうなる(処理)」という形になる。「イベントハンドラ」と「イベントリスナ」の2つの書き方がある。イベントハンドラそれではまずは「イベントハンドラ」を解説しよう。イベントハンドラは下記のような書式になる。関数;onイベント名の後にイコール=で関数をで繋ぐ。見た目は前回(前編)触れた「プロパティ」に似ている。window.alert("この内容で送信します。宜しいですか?");};イベントハンドラの中には前回(前編)の関数で触れた「無名関数」を代入する。イベントの関数はそこでしか実行しないことが多いため、名前がいらないのだ。(関数名が多いと、関数名の重複や干渉の原因になり得る)変数btnにid名btn*3の要素を代入している。(前回(前編)触れた「DOM」)変数profileのイベントハンドラonclickにアラートの関数を代入している。clickイベントは文字通り「クリックした時」のイベント。id名btnの要素をクリックすると文字列「この内容で送信します。宜しいですか?」がアラート表示される。関数読み込み(イベントハンドラ)なお、関数を別の用途にも使いたい場合は外に書いてイベントに読み込むのもいいだろう。)を付けないルールなので注意。"この内容で送信します。ok;onclickの値に入れる関数名okはok()ではない!イベントハンドラは一度きりなお、イベントハンドラは同じオブジェクトに複数設定すると最後の一度しか実行されない。"三槽でもヨット");};kazoeutaに対して3つイベントハンドラを設定したところ、最後の「三槽でもヨット」しかアラート表示されない。イベントハンドラはシンプルな記法なので、あらかじめ1度しか実行しないとわかっている時に使用するといいかもしれない。イベントリスナ次はイベントリスナについて解説しよう。イベントリスナは下記のような書式になる。)を付けて、中に引数を3つ入れる。こちらは見た目が前回(前編)触れた「メソッド」に似ている。3にはfalse*4を入れる。"この内容で送信します。false);イベントリスナ内の関数も無名関数。"この内容で送信します。false);イベント名"click"の後の関数名okはok()ではない!イベントリスナは何度でも先ほどのイベントハンドラは同じオブジェクトに複数イベントを設定しても最後の一度しか実行されなかった。イベントリスナの場合は、同じオブジェクトに複数設定すると全てが実行される。false);先ほどのイベントハンドラと同じくkazoeutaに対して3つイベントリスナを設定したところ「一本でも〜」から「三槽でも〜」まで全てアラート表示される。そのため、イベントリスナの方がイベントハンドラより複雑な設定ができる。次は「制御構造」を解説する。制御構造は「○○なら○○する」という感じで「条件」を満たしたときに処理を実行する仕組み。プログラミング言語には以下の3つの構造があり、制御構造は「分岐」と「反復」*5だ。:コードを上から下に順番に処理していく。(これまで触れてきた内容)分岐:条件によって「○○の場合はこうする」という風に処理が分岐する。反復:条件によって「○○の場合はこれを繰り返す」という風に処理を反復する。制御構造同士を組み合わせれば「もし○○なら○○を繰り返す」など、さらに多彩な処理ができるようになる。それでは主な制御構造を見ていこう。if文(分岐)「if文」は「分岐」処理だ。和訳が「もし」なのでイメージしやすい。{ブロック文}if文の形は前回(前編)に出てきた「無名関数」と良く似ている。)の中には「条件式」が入る。}は「ブロック文」で波カッコの後はセミコロン;が付かない。それではブロック文の内容を見ていこう。if文には以下の4パターンがある。/*もし条件式なら処理をする。処理}/*もし条件式なら処理1をする。処理2}/*もし条件式1なら処理1をする。処理4}/*もし条件式1なら処理1をする。elseは「それ以外すべて」。ifはif以外の「条件」。elseがないif文は処理を終了してif文を抜ける。あなたはアラフォーです>=は「以上」という意味で「比較演算子*6」という記号の一つ。変数ageの内容が25以上なら「アラサー」、35以上なら「アラフォー」、45以上なら「アラフィフ」、55以上は全て「年配」。それ以外は全て24以下のため「若者」とアラート表示する。switch文(分岐)switch文も「分岐」処理。if文は条件を書く順番によって優先度が変わるため、書き順をよく考えないといけないが、switchは条件が並列している。{ブロック文}全体的な構成はif文と変わらない。ブロック文の内容を見ていく。break;}caseの後に分岐の値を入れコロン;を付ける。処理を書いてセミコロン;を付ける。処理ごとに最後にbreak;が必要なので注意。break;で処理の区切りが判断される。default:はif文の「それ以外」elseに当たる。4月は花見で酒が飲めるぞ!変数monthがswitchの条件式に入る。値が1から12まで並列にで変数と一致する物を選ぶ。それ以外はdefaultをアラート表示する。例では変数monthの値に4が入っているため「4月は花見で酒が飲めるぞ!」がアラート表示する。for文(反復)for文は「反復」処理だ。全体構成はif文、switch文と変わらない。{ブロック文}もう少し詳しく見ていこう。引数のようなカンマ,ではなくセミコロン;で3つの式が繋がっている。「初期化式」には最初の値、「条件式」は最後の値、「増減式」は値の増え方を書く。}「醤油ラーメンいかがっすかー?」「味噌ラーメンいかがっすかー?」「塩ラーメンいかがっすかー?」と3回アラート表示する。変数soupは配列でスープの種類が3つ入っている。初期化式にあるfor文の変数iはfor文の中だけで使う簡易的な変数。条件式では変数iが3以下<の間に実行、という条件が入っている。増減式は変数iの数値の増え方。++は第4回の四則演算でも触れた「算術演算子」の中の1種でインクリメント演算子という。数値が1ずつ増えることを意味する。]の中に変数iを入れているsoup[i]。このままだと、メニュー数が増えるたびに条件式の3を打ち換えないといけないが、以下の対応策がある。}lengthプロパティは「長さ」という意味で、配列の数を取得する。これを変数lenに代入し、for文の条件式に組み込むと、配列数文繰り返してくれる。これで今後メニューが増減しても、回数を打ち替えずに済む。他の制御構造と同じだ。{ブロック文}whileの中の引数にはfor文の「条件式」だけがある。「初期化式」は外に変数として設定している。「増減式」はブロックの中にある。i++}結果は先ほどのfor文と同じだ。*8「醤油ラーメンいかがっすかー?」「味噌ラーメンいかがっすかー?」「塩ラーメンいかがっすかー?」と3回アラート表示する。JSのネスト構造JSはこれまで出てきた前回(前編)の「変数」「関数」や今回の「イベント」「制御構造」を組みわせてプログラミングされている。「変数」や「関数」は定義と実行が離れた場所に書かれているので位置関係を意識したい。一つ意識したいのは閉じカッコだ。];}なんだかこんな感じにネストがどんどん深くなって)}];みたいな閉じカッコの塊がそこらにある。*9コードを読むときには、どの閉じカッコがどのカッコに当たるか理解できると、閉じカッコの抜けやダブりなどのエラーも見つけやすくなる。(また、ネストは前回(前編)に触れた「スコープ」にも関わる)JSサンプル最後に、第3回(CSSの基礎)の「CSSサンプル」にこれまでの機能を使ったJSのコードを追加してみた。["隠しボタンを見つけてくれてありがとう。私の名前は“Atama”です。"もう少しあなたとお話ししたいです。"......わかりました。false);処理の詳細な説明は省くが、全体がどのような動きになっているか説明する。関数hakkenの配列serifにアラートに表示したいセリフを入れる。変数lenで配列serifの配列数を取得。for文で配列serifのセリフをalertメソッドの引数に読み込んで、変数lenの配列回数分アラートを表示。イベントリスナに変数targetと関数hakkenを組み込みclickイベントで起動させる。こちらが表示サンプル。プロフィールの画像をクリックすると、人口知能「Atama」が起動する。CodePen.「Result」タブを「JS」タブに切り替えると上記のコードが書かれている。「読めるぞ!私にもJSが読める!!*10」と、なっていただけただろうか。コンピュータが処理の判断として拾う記号やキーワードは、人間がコードを読むための「目印」にもなることがイメージできたかと思う。した宝探し気分で気軽にコードを読んで見てもらいたい。本連載で触れた内容はHTML、CSS、JSの基本書式。詳細については個別の機会にまた触れていきたいと思う。本連載がきっかけで自分でもちょっとコードを書いてみようかなー、なんて思っちゃたりしたそこのあなた!ぜひ第1回(Webの基礎知識)の「コードを書きたくなったら...」をご覧いただきたい。idr-zz.hatenablog.com本連載は、これからWebサイト制作を始めてみたい方を念頭に、当ブログの記事中に出てくるWeb系の単語の「出発点」になることを目指して書きました。平易な言葉で、段階的な説明を心がけたつもりです。(書きながら自分自身の復習にもなりました)もし内容に不明点、おかしい点などあれば(優しく)ご指摘いただけると幸いです。idr-zz.hatenablog.com【HTML、CSS、JSの書式】まとめqiita.com*1:ソースコード。人が書いたコンピュータへの命令のこと。*2:某胃腸薬*3:btnはbuttonの略でボタンによく付けられる名前*4:真偽値(true、false)*5:ループ、繰り返し、とも言われる。*6:他に==(等しい)、!=(等しくない)、<=(以上)などがある。while文」などもあり、while文の方がfor文より細かい制御ができる。export)でどんなことができるのか事始めてみたVue.jsやNuxt.jsを理解する上で重要なJSの「モジュール」という...2019-06-30【Tone.js】3コード楽器のコードをリファクタリング(ループとイベントと即時関数)Tone.jsの続きになります。前回作った3コード楽器のコードに重...2018-10-18【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!(基本5+応用1記事)以前、「書ける前に読む!HTML、CSS、JSの書式」*1という連載記...2018-06-27【tone.js】一音鍵盤を1オクターブに拡張したらコードが冗長だったので書き直したブラウザで音を鳴らせるJSライブラリ「tone.js」の続きになりま...2018-06-11Three.js入門サイトに私も入門する!!以前ご紹介した「WebGL」の続きになります。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。