Javascriptをはじめましょう | SkillhubAI（スキルハブエーアイ）

はじめてのJavaScript講座

JavaScriptとは？

今回は、JavaScriptについて学んでいきます。私は現在、教育関連のお仕事や受託開発、企業のWeb技術に携わり、「日本実業出版」から書籍を出版しています。

本日の目的

JavaScriptとは何か？
本講座では、以下のことを学びます。

JavaScriptで何ができるか
JavaScriptの基本的な概要
実際にJavaScriptを使って簡単なWebアプリケーションを作成する

これをきっかけに、「JavaScriptってこんなものなんだな」とイメージをつかんでいただければと思います。

JavaScriptで何ができる？

JavaScriptでできることとして、以下のようなことが挙げられます。

イベント処理
- ページを読み込んだ時
- クリックした時
タイマーや日時
DOM要素の操作
- HTMLを構成している要素を操作する

例えば、GoogleマップではJavaScriptを利用して、ページをリアルタイムで操作しています。また、JavaScriptを使うと、ユーザーのアクションに応じて動作するインタラクティブなサイトを作成できます。

Webアプリケーション ┌──────┐ のイメージ図 │ フロント │ ┌─────────┐ │ エンド │ │ユーザーがアクション│←→│の部分 │ └─────────┘ └────────┘ ↑ ↓ ─────────────── バックエンド

フロントエンドとバックエンドの違い

JavaScriptは主にフロントエンド、つまりブラウザ上で動作します。バックエンドは、データベースやサーバーとのやりとりを担当します。

JavaScriptの基本的な書き方

HTMLファイルの作成
スクリプトタグの使用
- scriptタグを使ってJavaScriptコードを埋め込みます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>初めてのJavaScript</title>
</head>
<body>
    <script>
        alert("こんにちは！");
    </script>
</body>
</html>

Document.writeメソッド

document.writeは、HTMLドキュメントに直接書き込むためのメソッドです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>初めてのJavaScript</title>
</head>
<body>
    <script>
        document.write("こんにちは、世界！");
    </script>
</body>
</html>

このコードを書いて実行すると、ブラウザに「こんにちは、世界！」と表示されます。

JavaScriptの基本的な動作原理

例えば、1+1の計算結果を表示するコードは以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>初めてのJavaScript</title>
</head>
<body>
    <script>
        document.write(1 + 1);
    </script>
</body>
</html>

これを実行すると、「2」という結果が表示されます。JavaScriptはこのように計算や処理を行い、その結果を表示することができます。

実際にコードを書いてみましょう

まずは、以下のような簡単なJavaScriptコードを試してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>JavaScriptコードの練習</title>
</head>
<body>
    <script>
        document.write("1 + 1 = " + (1 + 1));
    </script>
</body>
</html>

このコードをブラウザで開くと、「1 + 1 = 2」という結果が表示されます。

まとめ

今回の講座では、JavaScriptの基本的な使い方とその応用について学びました。次回以降は、さらに進んだトピックを扱い、具体的なアプリケーション作成に挑戦していきます。興味がある方は、ぜひ継続して学んでいってください。

タイムスタンプ

1 00:00:01,300 --> 00:00:06,370 [音楽]

2 00:00:03,620 --> 00:00:06,370 me

3 00:00:06,700 --> 00:00:10,710 [音楽]

4 00:00:14,699 --> 00:00:17,750 [音楽]

5 00:00:23,269 --> 00:00:32,799 ブービー今回はあのー javascript っっていきます

6 00:00:27,910 --> 00:00:38,130 スキュラ部というサイドを作っていてあとは教育関連のお仕事であるとか

7 00:00:32,799 --> 00:00:38,129 あとまあ受託開発であるとかですね結構やってます

8 00:00:38,219 --> 00:00:46,009 企業の web 技術という方が日本実業出版から出てますのでぜひですね

9 00:00:43,439 --> 00:00:49,009 手に取ってみてください

10 00:00:46,009 --> 00:00:53,509 では本日の目的と内容を

11 00:00:49,009 --> 00:01:00,018 いますね javascript とワーッっていうことですけれども

12 00:00:53,509 --> 00:01:02,988 今日はこう何ができるかというのをとまぁざっとやっていきたいなと思いますえええっ

13 00:01:00,018 --> 00:01:06,030 何をするかというともう本当にプログラミング

14 00:01:02,988 --> 00:01:09,810 基本的な概要ですね変数と日間

15 00:01:06,030 --> 00:01:13,439 するとかで javascript 時のイベントとかですね

16 00:01:09,810 --> 00:01:18,060 a まずやって言ってそれを使って簡単な

17 00:01:13,439 --> 00:01:18,899 まあフォームから取り出すカウンターであるとか実際の javascript なん

18 00:01:18,060 --> 00:01:23,700 だというかな

19 00:01:18,900 --> 00:01:26,790 ちょっとした web アプリケーションを作っていこうかなと思っています

20 00:01:23,700 --> 00:01:30,659 で8まあ今日の講座ね

21 00:01:26,790 --> 00:01:35,340 簡単ミニマムにやりますけれども javascript の

22 00:01:30,659 --> 00:01:39,599 まあ何たるかというかですねまぁ深いとこまでは行きませんけれども

23 00:01:35,340 --> 00:01:42,510 あのイメージをつけていただいて今まで javascript 何なんだろうなぁと

24 00:01:39,599 --> 00:01:45,500 思ってるかなって結構いると思うんですよ

25 00:01:42,510 --> 00:01:45,500 でもあの

26 00:01:47,459 --> 00:02:08,329 ブーブしあとはあっああこんなものなのかあれば考慮てょ最初のステップ

27 00:02:03,590 --> 00:02:13,210 としての講座と思っていただければいいかなと思います

28 00:02:08,330 --> 00:02:13,210 では8早速ですねやってまいりましょう

29 00:02:15,020 --> 00:02:20,080 じゃあ行きます初めての javascript ね

30 00:02:20,129 --> 00:02:24,259 javascript でいったい何ができる

31 00:02:24,360 --> 00:02:32,640 javascript できることというとみなさんで何を思い浮かべるでしょうか

32 00:02:29,639 --> 00:02:37,979 まあ一体なんなんだろうな検討もつかない人もね

33 00:02:32,639 --> 00:02:41,909 いるかもしれませんけれどもここで書いてあるイベント処理するページを読み込んだ時

34 00:02:37,979 --> 00:02:44,379 とかクリックした時姉ウェブサイトその時の

35 00:02:41,909 --> 00:02:46,770 マーサーイベントを使う

36 00:02:44,379 --> 00:02:50,219 って何か操作できるんですよ

37 00:02:46,770 --> 00:02:54,240 時間や日時であるとか溝要素

38 00:02:50,219 --> 00:02:58,800 これも初めて聞くかもしれないですねこれはですね

39 00:02:54,240 --> 00:03:04,650 html を構成している要素のことをドム要素って言うんですよ

40 00:02:58,800 --> 00:03:06,140 してくださいとね凍っ作るじゃないですかその中の一つ一つどーむ要素をコントロール

41 00:03:04,650 --> 00:03:09,020 することができる

42 00:03:06,139 --> 00:03:14,259 とかなどなどいろいろありますけれども

43 00:03:09,020 --> 00:03:19,290 まあこれ後でね見ておいてくださいねじゃあ実際にですね

44 00:03:14,259 --> 00:03:25,959 こんなずっとやってるんでずっと言ってもまぁそんなもんかと思うかもしれないので

45 00:03:19,289 --> 00:03:27,250 実際のサイトを見て何が出来るか少しイメージを持ってもらいたいなと思うんです

46 00:03:25,959 --> 00:03:30,530 けれども

47 00:03:27,250 --> 00:03:33,068 例えばそうですねー

48 00:03:30,530 --> 00:03:33,068 8

49 00:03:34,050 --> 00:03:42,090 例えばこの google の

50 00:03:37,080 --> 00:03:45,280 ラップ華奈江この google マップ大分前に出ましたけれどもこういうふうに

51 00:03:42,090 --> 00:03:51,340 動かせるびっくりしたんですよねずっと前

52 00:03:45,280 --> 00:03:57,009 でこれは何でできているかと言うと javascript で制御されているという

53 00:03:51,340 --> 00:03:59,420 ここまでできるんだなあということたとえば他にもこういうメニューを出したりとか

54 00:03:57,009 --> 00:04:00,959 しまったりとか

55 00:03:59,419 --> 00:04:04,079 8共有

56 00:04:00,960 --> 00:04:08,450 学校なんか出てきたりだとかね

57 00:04:04,080 --> 00:04:13,010 こういうものを実現するのは javascript でできます

58 00:04:08,449 --> 00:04:16,219 まあこうなってくるとここまでなってくると web アプリケーション

59 00:04:13,009 --> 00:04:20,750 開発もすごい大変ですけれどもその

60 00:04:16,220 --> 00:04:26,160 javascript の最高峰と言っていいかもしれないですねと言う

61 00:04:20,750 --> 00:04:32,430 a こういうようなですね web アプリケーションを作成することができます

62 00:04:26,160 --> 00:04:35,830 あとはよくあるウェブサイトソニーのプレイステーションとかねありますけれども

63 00:04:32,430 --> 00:04:38,069 この中の例えばゲームのページ

64 00:04:35,829 --> 00:04:39,219 オフはと出てきて

65 00:04:38,069 --> 00:04:40,879 なんかあの

66 00:04:39,220 --> 00:04:45,820 [音楽]

67 00:04:40,879 --> 00:04:47,279 こういうちょっと動きがあるようでは猿じゃないですか

68 00:04:45,819 --> 00:04:51,409 高

69 00:04:47,279 --> 00:04:53,549 動画が出てでそれ動画を送りできてとか

70 00:04:51,410 --> 00:04:55,540 でバツボタンで土地でとか

71 00:04:53,550 --> 00:05:00,790 こういう

72 00:04:55,540 --> 00:05:04,210 ユーザーが何かアクションしてそれに対応してくれるようなサイトを作る場合は

73 00:05:00,790 --> 00:05:08,229 javascript を使います

74 00:05:04,209 --> 00:05:09,769 こういうものをフロントエンドとねっ

75 00:05:08,228 --> 00:05:11,159 いいます

76 00:05:09,769 --> 00:05:12,288 ブラウザ

77 00:05:11,160 --> 00:05:18,528 day

78 00:05:12,288 --> 00:05:20,240 怒るほどねブラウザでの作業のことをフロントエンドでで例えばそのクリックして何か

79 00:05:18,528 --> 00:05:26,658 情報を渡すとき

80 00:05:20,240 --> 00:05:29,939 情報渡してそれはデータベース処理するとかっていうのがありますね例えば8何かお

81 00:05:26,658 --> 00:05:36,120 申し込みフォームかなんかに入力して

82 00:05:29,939 --> 00:05:41,189 お申し込みフォーム入力してそれをクリックするとその内容が送信される

83 00:05:36,120 --> 00:05:44,189 で送信されるのデータベースに入ってデータベースをやりとりして

84 00:05:41,189 --> 00:05:47,149 web サーバーでまた帰ってくるとか

85 00:05:44,189 --> 00:05:54,670 こういうのをバックエンドと言います

86 00:05:47,149 --> 00:05:55,750 バックエンドから帰ってきたこの情報をブラウザで処理する猫この先やったような

87 00:05:54,670 --> 00:06:01,810 こういう

88 00:05:55,750 --> 00:06:05,370 動画ですね動画のページ送りみたいなもんこういうユーザーの目に見えるものでやる

89 00:06:01,810 --> 00:06:10,199 処理とことをフロントエンドと言います

90 00:06:05,370 --> 00:06:14,189 で javascript っていうのはフロントエンドのことね

91 00:06:10,199 --> 00:06:17,449 なのでへ今回のお勉強はですね

92 00:06:14,189 --> 00:06:22,418 フロントエンドについての勉強になります

93 00:06:17,449 --> 00:06:22,419 ではちょっとスライドに戻りましょうか

94 00:06:23,360 --> 00:06:30,360 ねっできることをもう1回見てみるとイベントや

95 00:06:26,870 --> 00:06:32,620 えっと日時やドッグあとは

96 00:06:30,360 --> 00:06:36,939 タイマーが使えるとか

97 00:06:32,620 --> 00:06:39,288 フォームを操作できるとかウィンドウ操作できるクッキーが使えるキーボード操作

98 00:06:36,939 --> 00:06:44,209 キーボード操作もできるんですよね

99 00:06:39,288 --> 00:06:45,959 8例えば gmail とかってキーボードショートカットで期待しますけど

100 00:06:44,209 --> 00:06:49,978 ajax が使う

101 00:06:45,959 --> 00:06:55,529 ajax はリアルター6 to 4さっきの google マップで google

102 00:06:49,978 --> 00:06:56,349 マップって高洲クローンしていくつを裏のサーバーとリアルタイムで更新してるんです

103 00:06:55,529 --> 00:07:00,179 よ

104 00:06:56,350 --> 00:07:00,180 こういうの a 弱スっています

105 00:07:00,920 --> 00:07:09,250 では最初のレッスンですね

106 00:07:04,550 --> 00:07:09,250 基礎中の基礎というところをやってみましょうか

107 00:07:09,829 --> 00:07:17,279 ではやってみますね

108 00:07:13,079 --> 00:07:22,859 まず8はじめてのプログラミングということでね

109 00:07:17,279 --> 00:07:27,429 java スクリプトの書き方から見ていくとえっと

110 00:07:22,860 --> 00:07:31,960 報道なしの場合まあこの script スクリプト

111 00:07:27,430 --> 00:07:35,829 no バエますコードが中に入ってるからないかも入ってるんですけれども

112 00:07:31,959 --> 00:07:41,589 まずはこのスクリプトタグに囲んであげる

113 00:07:35,829 --> 00:07:45,219 これ html の中に各話ですよ html の中にはスクリプトっていうタグを

114 00:07:41,589 --> 00:07:50,409 入れてあげてその中にコードを書いていきます

115 00:07:45,220 --> 00:07:54,460 てコードありの場合で実際に見てみるとスクリプトタグがあってその中に

116 00:07:50,410 --> 00:07:57,630 javascript があります

117 00:07:54,459 --> 00:08:01,819 これがまず気温

118 00:07:57,629 --> 00:08:06,449 が8 javascript のでコードを書いてみましょうか

119 00:08:01,819 --> 00:08:10,519 デスクトップまぁどこでもいいんですけど新規フォルダーを作りますね

120 00:08:06,449 --> 00:08:10,520 でじゃあバースクリプト

121 00:08:10,939 --> 00:08:17,939 講座

122 00:08:12,779 --> 00:08:20,719 にしておきましたのでこれをサブライム的度かなんかまぁ自分の気に入った

123 00:08:17,939 --> 00:08:25,110 エディターでいいので開いてください

124 00:08:20,720 --> 00:08:27,550 でそこにですね8 new ファイルを作ります

125 00:08:25,110 --> 00:08:32,230 でまず保存しますねー

126 00:08:27,550 --> 00:08:33,789 こまんですが本当のレスででこれは何しましょうか

127 00:08:32,230 --> 00:08:37,930 最初の

128 00:08:33,789 --> 00:08:41,149 ので税 s 一度と html にしましょうか

129 00:08:37,929 --> 00:08:44,019 js 一度と愛媛で保存して

130 00:08:41,149 --> 00:08:48,309 html タブ

131 00:08:44,019 --> 00:08:50,639 で評定7作りますねでここに

132 00:08:48,309 --> 00:08:55,619 javascript の練習

133 00:08:50,639 --> 00:08:59,490 なのでですねちょっとあの見せしたいんですけれども普通

134 00:08:55,620 --> 00:09:02,080 ねあの html を書くとき1+1は

135 00:08:59,490 --> 00:09:03,730 めちゃ生地で各じゃないですか

136 00:09:02,080 --> 00:09:06,220 で保存して

137 00:09:03,730 --> 00:09:09,120 でブラウザで見てみます

138 00:09:06,220 --> 00:09:12,460 ブラウザで見るのはえいっ

139 00:09:09,120 --> 00:09:14,000 1 the switch できてますねー

140 00:09:12,460 --> 00:09:18,759 でしょ

141 00:09:14,000 --> 00:09:18,759 ちょっと半分半分にしますね4+1 day

142 00:09:20,320 --> 00:09:23,940 家所

143 00:09:21,639 --> 00:09:23,939 これで

144 00:09:24,720 --> 00:09:28,490 こうだよと

145 00:09:27,070 --> 00:09:33,830 しておきましょうか

146 00:09:28,490 --> 00:09:35,149 で89回た時に1+1コで売ってますよね

147 00:09:33,830 --> 00:09:36,129 で

148 00:09:35,149 --> 00:09:39,279 で

149 00:09:36,129 --> 00:09:42,009 もちろんそのまんま出るわけです

150 00:09:39,279 --> 00:09:48,039 でも javascript の場合ってのはちょっと違うんですね

151 00:09:42,009 --> 00:09:53,439 javascript で書く場合にはここにスクリプトタグっていうのを埋め込み

152 00:09:48,039 --> 00:09:56,089 ますでこれこのテキストタイプ会でも回書かなくてもいいんですけれども

153 00:09:53,440 --> 00:09:59,690 じゃあ今回なしでね

154 00:09:56,090 --> 00:10:03,710 を書いてこの間にプログラムを書きます

155 00:09:59,690 --> 00:10:06,310 で8ここにですねまあ

156 00:10:03,710 --> 00:10:06,310 アラート

157 00:10:08,370 --> 00:10:14,500 これアラートっていうの舌最後セミ頃

158 00:10:11,208 --> 00:10:16,629 セバ作る届く最後セミコロンをつけますね

159 00:10:14,500 --> 00:10:20,208 でこちらで

160 00:10:16,629 --> 00:10:21,950 理論するとほら入っ出てきました

161 00:10:20,208 --> 00:10:27,889 いいですね

162 00:10:21,950 --> 00:10:29,020 じゃあこの入ってありますけどこれ決してこの中が実行されてっていうのが分かりまし

163 00:10:27,889 --> 00:10:31,439 た

164 00:10:29,019 --> 00:10:34,088 ってねドキュメント

165 00:10:31,440 --> 00:10:37,240 ドットラインと

166 00:10:34,089 --> 00:10:39,779 っていうのがあるんですね

167 00:10:37,240 --> 00:10:43,919 てこうすると

168 00:10:39,778 --> 00:10:48,730 ま htm でこう普通に書く場合はボディの中で書けばいいんですけど

169 00:10:43,919 --> 00:10:52,500 javascript でここに表示する場合は document .ライト

170 00:10:48,730 --> 00:10:52,500 っていうのが必要なんですじゃあ入っ

171 00:10:52,570 --> 00:11:02,670 そうするとねこれ入って出力されましたねー

172 00:10:57,149 --> 00:11:05,340 そうそういうことなんですまあこれは何か文字表示するだけだからここでもできるじゃ

173 00:11:02,669 --> 00:11:10,529 ないかとね思うかもしれません

174 00:11:05,340 --> 00:11:12,370 じゃあ今度とこの javascript の中で1+1

175 00:11:10,529 --> 00:11:14,409 床を変えてみますよ

176 00:11:12,370 --> 00:11:16,578 そうするとどうなるか

177 00:11:14,409 --> 00:11:18,000 えっになりましたね

178 00:11:16,578 --> 00:11:21,419 これね

179 00:11:18,000 --> 00:11:26,460 ここは1+1がそのまま表示されるわけじゃなくて

180 00:11:21,419 --> 00:11:27,849 the バスケ部計算してくれてその結果をここに document .ライトして

181 00:11:26,460 --> 00:11:30,160 くれている

182 00:11:27,850 --> 00:11:35,800 わけです

183 00:11:30,159 --> 00:11:37,549 そうなんです javascript というのは何らかの処理をしてここに出力して

184 00:11:35,799 --> 00:11:43,479 くれたり

185 00:11:37,549 --> 00:11:43,479 いろんなプログラム後に多いよね裏でやってくれるわけです

====

実際の例を見てみよう

たとえば、Googleマップ。大分前に出ましたけれども、こういうふうに動かせるウェブページを見て「びっくりした！」という記憶があるかもしれません。これは、JavaScriptで制御されています。同じように、メニューが出たり隠れたりするのも、JavaScriptが使われているのです。

他の例としては、SonyのプレイステーションのWebサイトを見てみましょう。ゲームの紹介ページで、動画が出てきたりクリックでページが送られたりする部分は、JavaScriptで実現されています。

JavaScriptの基本を書く

では、JavaScriptの基本的な書き方を学んでいきましょう。

まずは、HTMLの中にJavaScriptを埋め込む方法です。HTMLの中に、以下のように書いてみてください。

<!DOCTYPE html>
<html>
<head>
    <title>はじめてのJavaScript</title>
</head>
<body>
    <script>
        alert("こんにちは、JavaScriptの世界へようこそ！");
    </script>
</body>
</html>

これをブラウザで開くと、「こんにちは、JavaScriptの世界へようこそ！」というアラートが表示されます。

JavaScriptで計算してみよう

次に、JavaScriptを使って簡単な計算をしてみましょう。以下のように書きます。

<!DOCTYPE html>
<html>
<head>
    <title>簡単なJavaScriptの計算</title>
</head>
<body>
    <script>
        document.write(1 + 1);
    </script>
</body>
</html>

これをブラウザで開くと、「2」という結果が表示されます。この例では、JavaScriptが1 + 1の計算を行い、その結果をHTMLに埋め込んでいます。

まとめ

今回の記事では、JavaScriptの基本的な使い方とその力を見てきました。実際に手を動かしながら、さまざまな機能を試してみることが、JavaScriptを理解する最良の方法です。

次回は、もっと高度な事例や応用編を見ていきますので、お楽しみに！それでは、楽しいコーディングライフを！

  ∧＿∧
 （ ｡･ω･｡)つ━☆・*。
  ⊂　　 ノ 　　　・゜+.
    しーＪ　　　°。+ *´¨)
                      .· ´¸.·*´¨) ¸.·*¨)
                      (¸.·´ (¸.·'* ☆

少しでも理解しやすいように、アスキーアートも交えてみました！