MENU
未経験から実務レベルのWeb制作スキルを学ぶ基礎講座 見てみる
  1. ホーム
  2. Web制作
  3. 【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す！⑨

【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す！⑨

広告
Web制作
つるぴよ
つるぴよ
もりけん塾に入塾しました！

JavaScriptを勉強してフロントエンジニアを目指しています！
今回は学習ロードマップの１番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。

 

あわせて読みたい
【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す！⑧ JavaScriptを勉強してフロントエンジニアを目指しています！ 今回は学習ロードマップの１番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。...

 

目次

正規表現の実例

前回学んだ正規表現って実際どんなふうに使うの？？
ねこまる
ねこまる
つるぴよ
つるぴよ
実際の使い方を実例をあげながら紹介していくね！

前回学習した「正規表現」の置換が実際のところどのように役立つのか？
勉強した「フラグ」などを組み合わせながら紹介していきます！

特定の文字に「」をつけてみよう

まずはこのような例文があるとします

// 元の文章
var txt = '吾輩は猫である。名前はまだ無い。\n'
    + 'どこで生れたかとんと見当がつかぬ。\n'
    + '何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。\n'
    + '吾輩はここで始めて人間というものを見た。\n'
    + 'しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。';

吾輩　の部分と　猫　の部分に「」をつけるプログラムを書くと

var res = txt.replace(/(吾輩|猫)/g, '「$1」');
document.write('<pre>' + res + '</pre><br>');

結果

「吾輩」は「猫」である。名前はまだ無い。
どこで生まれたかとんと見当がつかぬ
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
「吾輩」はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
解説
①フラグ「g」で全て置換
②「吾輩 | 猫」で「吾輩」あるいは「猫」
③　②を（〜）でグループ化し、再利用可能に
④置換のところで「＄１」として、再利用可能にした②の文字列を使用

行の先頭に「#」をつける

プログラムがこちら

var res = txt.replace(/^/mg, '# ');
document.write('<pre>' + res + '</pre><br>');

結果

#吾輩は猫である。名前はまだ無い。
#どこで生まれたかとんと見当がつかぬ
#何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
#吾輩はここで始めて人間というものを見た。
#しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
解説
①フラグ「g」で全部置換
②フラグ「m」で「^」を行頭、「＄」を行末にマッチさせる
③「^」(行頭）を「#」に置換

行の末尾に「！！」をつける

プログラムはこちら

var res = txt.replace(/$/mg, '!!');
document.write('<pre>' + res + '</pre><br>');

結果

吾輩は猫である。名前はまだ無い。!!
どこで生まれたかとんと見当がつかぬ!!
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。!!
吾輩はここで始めて人間というものを見た。!!
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。!!
解説
①フラグ「g」で全部置換
②フラグ「m」で「^」を行頭、「＄」を行末にマッチさせる
③「＄」（行末）を「！！」に置換

改行を取り除き、２０文字ごとに改行させる

プログラム

var res = txt.replace(/\n/g, '').replace(/(.{20})/g, '$1\n');
document.write('<pre>' + res + '</pre><br>');

結果

吾輩は猫である。名前はまだ無い。どこで生
まれたかとんと見当がつかぬ何でも薄暗いじ
めじめした所でニャーニャー泣いていた事だ
けは記憶している。吾輩はここで始めて人間
というものを見た。しかもあとで聞くとそれ
は書生という人間中で一番獰悪な種族であっ
たそうだ。
解説
①フラグ「g」で全部置換
②「\n」を「’’」（空文字）に置換してなくす
③「{. 20}」( 任意の文字を20回）を「(〜)」でグループ化して再利用できるようにする。
④「$1\n」で20文字で切り出した文末に改行を加える。

数字に３桁ずつカンマをいれる

プログラム

var res = ('1234567890 / 1234').replace(/(\d)(?=(\d{3})+($|\D))/g, '$1,');
document.write('<pre>' + res + '</pre><br>');

結果

1,234,567,890 / 1,234
解説
①フラグ「g」で全部置換
②「\d」は数字に一致
③その後の「(?=(\d{3})+$)」の部分があるので以下のようになる
「(\d{3})」←数字3つを「＋」で１回以上繰り返す
その後「$」(末尾)か「\D」(数字以外)が来ることが条件
④「$1 ,」で切り出した末尾に「,」を加える。

全角半角混じりの数字を半角にする

プログラム

var res = ('０１23-4５６7-８90１').replace(/[０-９]/g, function(s) {
    return s.charCodeAt(0) - '０'.charCodeAt(0);
});
document.write('<pre>' + res + '</pre><br>');

結果

0123-4567-8901
解説
①フラグ「g」で全て置換
②[０-９]で全角の「０」から「９」の文字を指定
③関数で置換を行う
「charCodeAt(0)」メソッドを使う
　「０」文字目の文字コードを取得
一致した文字の文字コードから「０」全角の文字コードを引く
④結果「0〜9」の数値になる

全角半角混じりの英数字を半角に

プログラムがこちらです

var res = ('Ａbcｄ＿０１234５６7８9＿ＥｆghＩ')
.replace(/[Ａ-Ｚａ-ｚ０-９＿]/g, function(s) {
    return String.fromCharCode(
        s.charCodeAt(0) - '０'.charCodeAt(0) + '0'.charCodeAt(0)
    );
});
document.write('<pre>' + res + '</pre><br>');

結果

Abcd_0123456789_EfghI
解説
①フラグ「g」で全て置換
②[Ａ-Ｚａ-ｚ０-９＿]で検索文字列を全角の英数字に指定
③関数で置換を行う

「charCodeAt(0)」メソッドを使う
　「０」文字目の文字コードを取得
一致した文字の文字コードから「０」全角の文字コードを引く
「＋ ‘0’.charCodeAt(0)」で「0」半角の文字コードを加える
「s.charCodeAt」で文字コードから文字を生成する
「charCodeAt」とは？
文字コードを取得するメソッド（Stringオブジェクト）
変数＝文字列.charCodeAt(変数)
文字列のうち引数の数値の位置にある文字コードを返します
詳しくはこちらで確認

第３部　１６話　WebページのJavaScript

つるぴよ
つるぴよ
Webページ内でJavaScriptを動かす場合の約束事を学んでいこう！

これから学んでいくことは以下の2つです。
①外部JavaScriptファイルの指定の仕方
②JavaScriptが使用できない時の処理

外部JavaScriptファイルの指定の仕方と理由

外部のJavaScriptファイルを作る理由

・HTMLファイルにJavaScriptファイルを書いていくとコードが長くなり見通しが悪くなるから。
・プログラムに問題が発生した時に、全てのファイルをHTMLに書いていると全てを書き直す必要があり非効率だから。
・ファイルを分けておけばメンテナンスが容易になるから。

 

外部JavaScriptの基本
外部JavaScriptファイルは拡張子「.js」のテキストファイルです。
プログラム部分のみを記述するので以下のようなタグは不要です。
・「<html>」「<head>」「<script>」

外部JavaScriptファイルを作ってみよう

まずはこういった元のHTMLファイルを用意します。

<!DOCTYPE html>
 <html lang="ja">
  <head>
   <meta charset="UTF-8">
    <script>
      document.write("JavaScript");
     </script>
   </head>
  <body> 
 </body> 
</html>

上記のHTMLファイルからプログラム部分のみを取り出して「外部JavaScriptファイル」にします。
今回は「out.js」という名前でテキストファイルを作ります。

HTMLファイルに「JavaScriptファイル」を読み込ませるためのコードを書きます。

<script src="out.js"></script>

このコードはHTMLファイルの「<head>」タグ内の「<meta charset=”UTF-8″>」の下あたりに書きます。

パスの書き方とファイルの配置

HTMLファイルとJavaScriptファイルの保存場所によってはパスの書き方が変わってきます。
ファイルの配置が①同じフォルダの場合と②別のフォルダの場合の書き方の違いをみていきましょう。

同じフォルダの場合

HTMLファイルとJavaScriptファイルが同じフォルダ内に配置されている場合
「src = out.js」というようにファイル名のみでOK！

『src="out.js"』の場合のファイルの配置

■基準のフォルダ
┣○『sample.html』
┗○『out.js』
同じフォルダであることを明示的に書く場合もあります。
『src="./out.js"』の場合のファイルの配置

■基準のフォルダ
┣○『sample.html』
┗○『out.js』

別のフォルダの場合

別のフォルダの場合
「/」でパスの区切りを書いてファイルの場所を指定します。
「script」というフォルダに「out.js」があるなら
「src = ”script/out.js ”」という風に書きます。

『src="script/out.js"』の場合のファイルの配置

■基準のフォルダ
┣○『sample.html』
┗■『script』フォルダ
　┗○『out.js』

また、「src = “../script/out.js”」ならば、HTMLファイルのあるフォルダを基準にして1つ上のフォルダ内にある「script」フォルダ内の「out.js」が、読み込むファイルになります。

「../」→「1つ上の」という意味
「../../」→「2つ上の」という意味

『src="../script/out.js"』の場合のファイルの配置

■1つ上のフォルダ
┣■基準のフォルダ
┃┗○『sample.html』
┗■『script』フォルダ
　┗○『out.js』

別のドメインの場合

「src」に記入するパスは「http://」や「https://」から始まるURLでもOKです
「外部ドメイン」のURLを指定する場合は
「src = “https://〜/out.js”」のようにURLを指定すれば指定したURLから読み込むことができます。

『src="http://google.com/out.js"』の場合のファイルの配置

○『http://crocro.com/sample.html』

外部のサーバー上にある『外部JavaScriptファイル』
○『http://google.com/out.js』

JavaScriptが利用できない場合の処理

じゃb

つるぴよ
つるぴよ
全てのブラウザでJavaScriptが使えるわけでは無いので注意が必要だよ！

主なJavaScriptが利用できない理由
・JavaScript未対応のブラウザで見る場合
・セキュリティ上の理由からJavaScriptを使わないようにしている場合

上記のような場合もあるのでJavaScriptが実行できることを前提にコードを書くと意図せぬ表示になることもあります。
それを避けるためにつかうタグが「<noscript>」です。

JavaScriptが使える環境で実行される処理→<script>タグ内のプログラム
JavaScriptが使えない環境で実行される処理→<noscript>タグ内のプログラム

実際にコードでみてみましょう

【JavaScriptが使える環境】
<script>
    // 領域A
    documen.write("領域A");   【処理】
</script>
<noscript>
    領域B    【無視】
</noscript>
【JavaScriptが使えない環境】
<script>
    // 領域A
    documen.write("領域A");   【無視】
</script>
<noscript>
    領域B    【処理】
</noscript>

ちなみに<noscript>タグの中にはプログラムを書いてはいけません。
普通の文章やHTMLファイルのタグを書きます。

マンガJavaScript　コラムと第１６話まとめ

ここまで学んだことをまとめます
・正規表現の実例をみていこう
・外部JavaScriptファイルの作り方
・JavaScriptファイルが実行されない場合の処理
　＜noscript＞タグを使う

 

もりけん塾を運営している森田賢二さんのブログはこちらから👇

武骨日記

Twitterフロントエンジニア（@terrace_tech）のフォローは👇

フォローはこちら

Web制作

関連記事

目次