JavaScriptの書き方入門 - はじめてのWebデザイン
プログラミング初心者のためのJavascript書き方講座です。専門用語を極力使わずわかりやすさを追求し、基本の基本をミニマムにまとめました。Webデザインの勉強をしていて、Javascriptで挫折してしまった経験のある方にもおすすめです。
無料で今すぐはじめる※ ログインする必要はありません。
レベル
ビギナー
11レッスン
1日間
JavaScript学習に関して、こんなことはありませんか？
習得すると良いって聞いたけど
難しそうで踏み出せない
説明の言葉が難しくて
やる気が萎えてしまった
お手本のコードは動かせた
が、何をしているか不明…
今までの苦労はどこへ? Webアプリを作ってJavaScript基礎をさらっと習得
～要点だけをミニマムに学習する、プログラミング初心者のためのJavaScript入門～
Webデザイナーのスキルアップ、Webエンジニアのスタートラインに。Web制作者を目指していたり、Web制作に関わるお仕事に携わっていれば一度は習得を目指すJavaScript。Web制作者の必修スキルと断言する方もいらっしゃるほど、ポピュラーな言語です。
しかし、JavaScriptを書ける方はエンジニアを除くとごく一部。
プログラミング特有の考え方が必要になり、解説も専門的な言葉が多く使われていて分かりにくいのです。どうするか知りたくてリファレンスを開いたのに、説明の解読自体がむずかしいと、学習するのが嫌になってしまいますよね。
そこで、辞書的な厳密でむずかしい説明は抜きに、実際にコードを書きながら、必要な基礎部分を感覚的に理解できることを第一としたJavaScript入門講座を作成しました。動かしながら覚えるので、今まで「本を読んでもさっぱり……」だった部分も一発で納得できます。
短時間で実践的な基礎スキルを習得可能にするSkillhubメソッド
多くの未経験者をフリーランスWeb制作者としてデビューさせてきた、Skillhubの講座は無駄なくミニマムな内容。その中でも初心者の方向けに、ほんとうに必要な知識だけを厳選しているからこそ、短期間でのスキル習得を実現することができます。
本講座はHTMLとJavaScriptファイルの作成からスタート。実際の業務と同じような流れでスクリプトを組んでいきます。基礎習得に必要な内容を盛り込んだWebアプリを作成しながら進めていくので、楽しみながら自然とプログラミングの考えかたを身につけることができます。
わかりやすいのに実践的! 基礎スキルの短期習得が可能な理由
完全未経験でも大丈夫! 基本の基本からわかりやすく解説
専門書やリファレンスのような難しい言葉使いをせず、親しみのある言葉や図解で解説しています。もちろん、今後の学習やプロとしてお仕事をする上で、覚えていきたい用語の解説もありますよ。
オブジェクト、プロパティ、メソッド…分かるような分からないような説明文を眺めてゲンナリしていた方もご安心下さい!
書いて動かして、納得できるから自然に頭に入ります
初心者の方が陥りやすい挫折の入り口は、説明文を一生懸命に読んで理解しようとすること。難解な説明文を読み解いて理解したつもりでも、実際は何に役立つものか分からず使えなかったりします。
講座と一緒にコードを書いて、ブラウザで動きを見てください。難しく考えず、作ってみるとすんなり分かることも多いのです。習った内容を組み合わせてスクリプトを組む箇所もあるので、変数や配列の使い所もわかりますよ。
JavaScriptを組む考え方から、制作までを総合的に学習!
一通りの基礎を覚えたら、実習として１つのWebアプリを作っていきます。この実習ではクライアントの要望があり、どういった処理を行えば要望に答える機能を実装できるかという“考え方”から解説。
設計に沿ってスクリプトを書いて、ブラウザで動かすところまでトータルで学習することが可能です。JavaScriptの基礎文法だけではなく、プログラミング的な考え方にも慣れることができますよ。
本講座を終えると、できるようになること
- JavaScriptの基本書式がわかる
- 変数、配列がどんなものかわかる
- 関数宣言、関数の呼び出しができる
- 「クリックで実行」など条件を設定できる
- JavaScriptを使って簡単なWebアプリを作ることが出来る
レッスン内容
-
1
本講座では専門用語を極力使わず、JavaScript（ジャバスクリプト）の基本の基本をミニマムに解説しています。最初に、JavaScriptとは何なのかを確認しましょう。
-
2
HTML/CSSでコーディングしたWebページで、JavaScriptを動かす書き方の基本を解説します。テストコードを使って、HTMLファイルに直接記述する内部定義、jsファイルを作ってファイルをHTMLファイルに読み込む外部定義を試してみましょう。
-
3
JavaScriptに限らず、プログラミングの世界でよく使われる「変数」と「定数」。変数・定数とは何かを、JavaScriptの書き方とともに解説します。
-
4
プログラミングで使う考え方の一つに「関数」があります。言葉だけで理解しようとすると難しいですが、実際にJavaScriptを書いてみると分かりやすいですよ。一緒にコードを書きながら関数を使ってみましょう。
-
5
記述したコードを処理されないようにする仕組み「コメントアウト」と、JavaScriptでのコメントアウト方法について解説します。何の処理をしているのかメモ書きにも使えて便利ですよ。
-
6
JavaScriptでHTML要素を指定して操作することを、DOM操作と言います。Webページの特定箇所から情報を抜き出したり、表示させたりする方法を解説します。
-
7
JavaScriptのイベントを使うと、表示しているWebページ上の変化に応じて処理を実行するように設定できます。addEventListener()を使って、ボタンをクリックするとアラートが表示される仕組みを作ってみましょう。
-
8
Webページにあるボタンをクリックすると、複数の候補の中から“どれか1つ”を表示するガチャアプリを作ります。構想を考えて、作ってみましょう。
-
9
ガチャで表示させたいメッセージを、Javascriptの配列に格納しましょう。配列を使うと、複数の値（要素）を1つのグループのような感覚で、まとめることが出来ますよ。配列の作成方法、要素のインデックス番号や配列に含まれる要素数の確認方法を解説します。
-
10
JavaScriptの配列から、Math.random()関数を使って要素を一つだけランダムに取り出す方法を解説します。配列の要素の数に合わせて、ランダムな整数を作ってみましょう。
-
11
いよいよ、Javascriptで作る格言ガチャ完成です。addEventListener()を使ってクリック時に動くように設定し、ランダムに選ばれた格言がHTMLページに表示されるようスクリプトを書いていきましょう。
もっと見る
JavaScriptの書き方入門 - はじめてのWebデザインを 無料で始めましょう！
無料申し込み期限
11月24日まで
募集
人数
100名 （残りわずか）
むずかしいと思っていたJavaScriptがさらっと書けて驚かれる方もいらっしゃいます。プログラミングの基本的な考え方を身につけておくと、phpやrubyなどの言語習得がしやすいというメリットもありますよ。