JavaScript入門講座|文字データの切り出し・大文字小文字ついて学ぼう

JavaScript
うさタブ
うさタブ

今回は文字データの取得変換について勉強するッピ!

ユウキ
ユウキ

文字データの取得変換?

うさタブ
うさタブ

そうッピ!

具体的には文字数を数えたり、大文字小文字、変数の最初の文字を取り出して、変換する方法ッピ!

この記事で学べること
  • 文字数を数える
  • 文字を大文字にする
  • 文字を小文字にする
  • 変数の1文字を取り出す
  • 変数のAからBまでの文字を取り出す

文字データの取得変換ついて学ぼう

必要なもの

うさタブ
うさタブ
メモ帳
  • メモ帳
  • ブラウザ

が必要ッピ!

元になるコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>






</script>
<!-- ここまで! -->

</body>
</html>

文字を取得する

文字やデータを入れる変数

うさタブ
うさタブ

さっそくやって行くッピよ~! 今回は文字数を数えるコードッピ!

let a = "Hello World";
document.write(a);

と入力するッピ!

できたらブラウザで確認してみるッピよ~

うさタブ
うさタブ

これは

let a変数aを使います =  中身は Hello world; です

documentデータを.write書き出してください(a 変数aを);

という意味ッピね~

ユウキ
ユウキ

いつものやつだな!

ここまでのコード

入力したコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>

let a = "Hello World";
document.write(a);

</script>
<!-- ここまで! -->

</body>
</html>

出力結果 >

Hello World

文字数を数える命令文

うさタブ
うさタブ

さっそくやって行くッピよ~! 今回は文字数を数えるコードッピ!

let a = "Hello World";
document.write(a.length);

と入力するッピ!

できたらブラウザで確認してみるッピよ~

ユウキ
ユウキ

お! 11になった!

うさタブ
うさタブ

これは

.length

をという命令を使って文字数を数えたッピ!

H1e2l3l4o5 6W7o8r9l10d11

11文字という意味ッピね~

ここまでのコード

入力したコード

<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>

let a = "Hello World";
document.write(a.length);

</script>
<!-- ここまで! -->

</body>
</html>

出力結果 >

11

変数のn番目の文字を取得する

うさタブ
うさタブ

次は少し特殊な文字の取得方ッピ!

変数を使って文字を取得するッピよ~

うさタブ
うさタブ
let a = "good morning";
document.write(a[3]);

と入力してみるっぴ!

うさタブ
うさタブ

これは

let変数 a は a = “good morning”;です
document.データをホームページへwrite 書き出して(a[3]変数aの0から3番目の文字を);

という意味ッピ!

同じく変数の1文字だけを抜き出す

うさタブ
うさタブ

次は少し特殊な文字の取り出し方ッピ!

let a = "good morning";
document.write(a.charAt(3));

と入力するッピよ~

ユウキ
ユウキ

おおお!

なんかさっきと同じふうに表示されたぞ!

うさタブ
うさタブ

ふふふ、これがプログラミングのちからッピ!

これもさっきと同じように、1文字だけを抜き出すプログラムッピ!

document.データをホームページへwrite 書き出して ( a 変数aの .charAt指定する場所の (30から3番目の文字を) );抜き出して

という意味ッピ!

ここまでのコード

入力したコード

let a = "good morning";
document.write(a.charAt(3));

出力結果 >

d

文章の切り抜きをする命令文

うさタブ
うさタブ

特定の文章を抜き出す命令文もあるッピ!

うさタブ
うさタブ

↓の文をコピーして

let a = "Hello World";
document.write(a.substr(0,2));

と入力するッピよ~

ユウキ
ユウキ

He

って表示されたぞ!

うさタブ
うさタブ

これは

let変数 aa です = 中身は “Hello World”;です
document.データをHTMLにwrite書き出して(a.substr変数aの(0,から2)まで);

という意味ッピ!

スタートから2番目まで = He

を抜き出したッピよ~

うさタブ
うさタブ

変数.substr(抜き出し開始の数字, 抜き出し終了文字)

文字を抜き出すことができるッピ!

ユウキ
ユウキ

なるほどな~

文章の前をはぶいて切り抜きをする命令文

うさタブ
うさタブ

他にも前をはぶいて切り抜きをすることも可能だッピ!

let a = "Hello World";
document.write(a.substring(4,a.length));
うさタブ
うさタブ

これは

let変数 aa です = 中身は “Hello World”; です
documentデータをホームページに.write書き出して(a. 変数aのsubstring 指定した(4, a.length)4文字目から最後まで);

という意味ッピ!

ここまでのコード

入力したコード

let a = "Hello World";
document.write(a.substr(0,2));

出力結果 >

He

入力したコード

let a = "Hello World";
document.write(a.substring(4,a.length));

出力結果 >

o World

substring と substr の違いは?

substring は、変数の中の 1文字目~5文字目など、文章ベースでデータを抜き出すします。

substr は、抜き出した文字から何文字目までを抜き出すか? がポイントになっています。

命令文(Hello World)結果
substring(2,5)llo //2~5文字目までのデータを抜き出す
substr(2,5)llo w //2文字目のデータから、さらに5を足す(2~7まで)

文字を取得し《大文字》にする

うさタブ
うさタブ

次は取得した小文字大文字にする方法ッピ!

変数.toUpperCase();

を使って大文字にへんかんするッピよ~

うさタブ
うさタブ

変数を使う場合は

let a = "Hello World";
document.write(a.toUpperCase());

と入力するッピよ~

ユウキ
ユウキ

すっげーな!

ここまでのコード

入力したコード

let a = "Hello World";
document.write(a.toUpperCase());

出力結果 >

HELLO WORLD

取得した文字をすべて小文字にする

うさタブ
うさタブ

最後は文字をすべて小文字にする方法ッピ!

toLowerCase(“文字列)

というやり方で小文字にすることができるッピ!

うさタブ
うさタブ

変数を使う場合は、

let a = "Hello World";
document.write(a.toLowerCase());

という風に入力してみるッピよ~!

ユウキ
ユウキ

やったな!

ここまでのコード

入力したコード

let a = "Hello World";
document.write(a.toLowerCase());

出力結果 >

hello world

大文字と小文字の違いは?

大文字にする命令文小文字にする命令文
これらを見分ける方法は、文章をよくみる必要があります。

toUpperCase //大文字にする命令文

toLowerCase //小文字にする命令文

上のような違いがあります。

単語の最初のみを大文字にする

うさタブ
うさタブ

単語の最初のみを大文字にする命令文もあるッピ!

.charAt一文字だけ抜き出す(数字)

.toUpperCase大文字にする命令文( 数字 )

.substring文字列を抜き出す( 数字 )

.toLowerCase小文字にする命令文( 数字 )

すべてを使うッピ!

うさタブ
うさタブ
let a = "good morning";
document.write(a.charAt(0).toUpperCase() + a.substring(1).toLowerCase());

と入力して確認してみるッピよ~

ユウキ
ユウキ

単語の最初だけ大文字になった!

ここまでのコード

入力したコード

let a = "good morning";
document.write(a.charAt(0).toUpperCase() + a.substring(1).toLowerCase());

出力結果 >

Good morning
学習のまとめ
  • 文字数を数えるlength
  • 文字を大文字にするtoUpperCase
  • 文字を小文字にするtoLowerCase
  • 変数の1文字を取り出すcharAt
  • 変数のAからBまでの文字を取り出すsubstring
うさタブ
うさタブ

上手くできたッピか?

これからも色んなゲーム作りやプログラムの解説をしていくッピ!

次回も楽しみにしているッピよ~~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

JavaScriptプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました