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
うさタブ
うさタブ

上手くできたッピか?

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

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

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

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

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

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

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