たった1日で基本が身に付く! JavaScript 超入門 読んでみた。

[記事公開日]2017/10/17

[最終更新日]2024/08/22

WebCampPRO
無料体験会実施中
転職を本気で考えている方向けのプログラミングスクール!
転職を保証しているため、未経験からIT業界へ転職を求めている方へおすすめです。
受講完了後、3ヶ月以内に転職・就職できない場合は ”全額返金” しています!

 


 

WebCamp
無料体験会実施中
Webスキルを習得!大人気テックスクール
短期で学びたい方のための講座です。
1ヶ月で集中して一気に学ぶことができます。
プログラミングやデザイン未経験者でも安心のサポート体制をご用意しています。

 


 

TechAcademy
未経験からプロを育てるオンラインブートキャンプ

最短4週間で未経験からプロを育てるオンライン完結のスクールです。
どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。

【現在提供中のコース】
・Webアプリケーションコース(Ruby on Rails)
・PHP/Laravelコース
・フロントエンドコース
・WordPressコース
・iPhoneアプリコース
・Androidアプリコース
・Unityコース
・はじめてのプログラミングコース
・Webデザインコース
・UI/UXデザインコース
・Webディレクションコース
・Webマーケティングコース

 


 
Amazon:たった1日で基本が身に付く
https://amzn.to/4czIbQO

たった1日で基本が身に付く!シリーズの本。
いろいろ出てます。
わかりやすく解説で、詰め込みすぎていないので
わかりやすい本だと思います。
(プログラミング系の本だと難しく感じるかもです)

ただ、1日で、身に付くかはわからないです。

また、内容が古いのもあります。

1日で基本が身に付くのって?思いますが、
この、本のシリーズは、章ごとに、解説してて、
1単元を1時間など、自分のペースで学ぶとよいと思います。

こんな方におすすめ
JavaScriptプログラミングを一から勉強したい入門者など

JavaScriptプログラミングを一から学ぶための、やさしい入門書です。
Webサーバーを利用するための環境構築から始まり、
文法、構文、変数・配列の扱い方、オブジェクトの利用、
HTMLの操作、イベント処理、Web APIの利用法など、
JavaScriptによるプログラミングで必要になる知識を一通り解説しています。

最終的に、これらの知識をもとにしてWebアプリを開発していきます。

1日8時間の勤務時間内に読むことができる内容で、初心者・新人が最初に読む解説書としてふさわしい1冊です。

たった1日で基本が身に付く! JavaScript 超入門 大型本 – 2017/6/15
WINGSプロジェクト (著), 片渕 彼富 (著), 山田 祥寛 (監修)
JavaScriptプログラミングを一から学ぶための、やさしい入門書です。

目次
たった1日で基本が身に付く! JavaScript 超入門 読んでみた。
CHAPTER 1 環境設定
CHAPTER 2 JavaScriptの基本的な文法
CHAPTER 3 よく利用される変数や処理の扱い
CHAPTER 4 HTMLを操作する
CHAPTER 5 イベントを扱う
CHAPTER 6 Web APIを利用する
CHAPTER 7 日記アプリを作成する
CHAPTER 8 さらに開発を進めるために

 


 

これからのJavaScriptの教科書 単行本(ソフトカバー) – 2024/6/1
狩野 祐東 (著)

確かな力が身につくJavaScript「超」入門 第2版 単行本 – 2019/9/21
狩野 祐東 (著)

 


 

スラスラ読める JavaScriptふりがなプログラミング 増補改訂版 (ふりがなプログラミングシリーズ) 単行本(ソフトカバー) – 2022/8/23
リブロワークス (著), 及川卓也 (監修)

プログラムが「読めない」を解決する入門書

 


 

たった1日で基本が身に付く! JavaScript 超入門 大型本 – 2017/6/15
WINGSプロジェクト (著), 片渕 彼富 (著), 山田 祥寛 (監修)
JavaScriptプログラミングを一から学ぶための、やさしい入門書です。

たった1日で基本が身に付く! JavaScript 超入門 読んでみた。

この1日シリーズ
値段も手頃な価格で、おすすめだと思います。
Chapterは1から8まであります。

他の、プログラミング系の本を読んで、難しく感じるなら、
自分に合う本を買ってみるといいと思います。

個々で、難しく感じるのもありますが。

この1日シリーズ、1冊持っておくと、忘れないためにもいいかもです。

サンプルファイルもあるので学びやすいと思います。

JavaScriptの役割
①Webアプリケーションの補助的な機能
②Ajaxを利用した通信機能
③HTML5のAPIを利用したWebアプリケーションを担う部分など他、

目次は、このような感じです。

CHAPTER 1 環境設定
CHAPTER 2 JavaScriptの基本的な文法
CHAPTER 3 よく利用される変数や処理の扱い
CHAPTER 4 HTMLを操作する
CHAPTER 5 イベントを扱う
CHAPTER 6 Web APIを利用する
CHAPTER 7 日記アプリを作成する
CHAPTER 8 さらに開発を進めるために


mokuji1


mokuji2


mokuji3

 


 

CHAPTER 1 環境設定

JavaScriptが、ここまで広く利用されるようになったのは、ブラウザさえあれば動作させられるという実行環境のためです。

SECTION 01 JavaScriptの概要を理解しよう
JavaScriptは、Webブラウザでページが表示された際に実行されます。

初期のJavaScript

AjaxとHTML5の登場

FlashとHTML5

Webアプリケーション以外で利用されるJavaScript
など説明しています。

SECTION 02 開発環境を準備しよう
プログラミングをするには、プログラムを作成する環境と作成したプログラムを実行する環境が必要です。
これらを、まとめて開発環境といいます。

開発に必要なもの
Webアプリケーションを作成するには、Webサーバーが必要です。
Webサーバーは、レンタルサーバーを借りてもいいです。

また、 パソコンを自分専用のWebサーバーにできます。

Webサーバー、インターネット経由
個人PCにApache(無料)をインストールし、Webサーバーと同じ環境をローカル内に構築

本書での開発に必要なもの
サーバーソフト、Apache(ブラウザ上にページを表示)
ブラウザ、Google Chrome(ページの閲覧)
テキストエディタ、(ページの編集)

開発環境に必要なものを入手する。

SECTION 03 Apacheをインストールしよう
Apacheは、世界中で利用されている、Webサーバーのサーバーソフトです。

Apacheは、OS、別にインストールファイルが配布されています。

Apacheの入手
Windowsで解説

Apache
https://httpd.apache.org/

Apacheのインストール

Apacheの実行には、Visual Studio 2015のVisual C++ 再頒布可能パッケージが必要です。

Windowsの場合は、32ビット版、64ビット版があります。
Visual Studio 2015 の Visual C++ 再頒布可能パッケージ

https://www.microsoft.com/ja-jp/download/details.aspx?id=48145

Apacheの起動など解説

SECTION 04 Google Chromeをインストールしよう

Google Chromeの設定で
JavaScriptを有効にする設定

SECTION 05 作成した開発環境を確認してみよう

開発環境の準備ができたら、動作確認をします。
インストールした、ApacheとChromeの動作を確認。

Apacheでテストページを表示する

Chromeのデベロッパーツールを利用する
サンプルファイルを使っての解説

 


 

CHAPTER 2 JavaScriptの基本的な文法

JavaScriptで利用できる基本的な文法について説明。

実際にJavaScriptでプログラミングをしてみましょう。

SECTION 01 JavaScriptの基本的なルールを理解しよう

JavaScriptを記述する場所

HTMLの内部に埋め込んで記述する

ファイルに記述して読み込む

JavaScriptのプログラムの主な構成要素
①変数
②オブジェクト
③演算子
④制御文
⑤関数

JavaScriptを記述する際の注意点など解説

 


 

SECTION 02 変数を使ってみよう
プログラムで数値や文字列などの値を処理する場合、値を、そのまま扱うことはしません。

値は、変数という、入れ物に入れて処理します。

変数とは
変数の宣言など解説

変数のデータ型
配列型
オブジェクト型

 


 

SECTION 03 オブジェクトを使ってみよう

オブジェクトとは、プログラムで操作できるものの総称です。
文字列、日付、ブラウザ情報などをプログラムで扱いやすくするために、一定のルールでまとめたものです。

オブジェクトを利用することで、プログラムをより短く的確に記述することができます。

オブジェクトの種類
JavaScriptのオブジェクトは、3種類あります。
①組み込みオブジェクト
②ブラウザオブジェクト
③DOMオブジェクト

オブジェクトの構成

オブジェクトを利用する際のルール

組み込みオブジェクトを利用する

ブラウザオブジェクトを利用する

など解説

 


 

CHAPTER 3 よく利用される変数や処理の扱い

変数や処理の扱い、それらの機能を、まとめたメソッドについて説明。

SECTION 01 変数を操作してみよう

演算子とは

四則演算子を行なう

変数の値を比較する

文字列を結合、比較する

など解説。

 


 

SECTION 02 処理の流れを制御してみよう

プログラムの処理の流れ

条件分岐
処理を繰り返す

など

 


 

SECTION 03 処理をまとめてみよう

関数を利用する
変数のスコープに注意する
varのつけ忘れに注意する

 


 

SECTION 04 プログラムを効率よく作成してみよう

デバッグを行う
コメントを記述する

 


 

CHAPTER 4 HTMLを操作する

JavaScriptからHTMLに動きをつけたり、書き換えたりする処理について説明。

SECTION 01 HTMLを操作する仕組みを理解しよう

プログラムからHTMLを扱う基本的な仕様

JavaScriptから扱うHTMLの構造

 


 

SECTION 02 要素を取得してみよう
DOMの仕様

idを指定して要素を取得する

タグの名前を指定して要素を取得する

CSSクラスの名前を指定して要素を取得する

要素の属性を取得、変更する

SECTION 03 HTMLを書き換えてみよう
取得した要素や属性をJavaScriptで変更する

テキストを書き換える
HTMLを書き換える
要素を追加する

要素を削除する

 


 

CHAPTER 5 イベントを扱う

インタラクティブな処理の実装について解説。

SECTION 01 イベントの仕組みを理解しよう
ユーザーの動作を検出するイベント
よく利用されるイベント

SECTION 02 イベント発生時に処理を行ってみよう
イベント・ドリブンモデル

イベントハンドラー、イベントリスナーを定義する

イベントをキャンセルする

SECTION 03 イベントを利用して動的に画面を変更してみよう

イベント発生元の要素にアクセスする

動的にUIを制御する

 


 

CHAPTER 6 Web APIを利用する

ネットワークこしのデータとの取得と、取得したデータの利用について解説。

SECTION 01 APIの仕組みを理解しよう
Web APIとは
プログラムが持っていない外部の機能やデータを呼び出して、利用できるようにする仕組みの名称です。

Web APIとのデータのやり取り
XML
利用者が独自のタグを指定することができるマークアップ言語の形式

RSS
Webサイトの更新情報などを簡単に、まとめたXMLの形式

JSON
JavaScriptのオブジェクト表記構文でデータを記述する形式

CSV
データを、カンマで区切った形式

JSONとは

SECTION 02 JavaScriptからWeb APIを呼び出してみよう

Flickr API
Flickr API Public feed

画像検索結果を解析してみよう

SECTION 03 画像検索アプリを作成してみよう

作成するアプリケーションの概要

画面で利用するUIを定義する

Web APIを動的に呼び出す

入力したキーワードを使って画像検索を行う

画像検索の結果を取得する

 


 

CHAPTER 7 日記アプリを作成する

JavaScriptでのデータの保存と読み出しについて、日記風のサンプルを作成しながら説明。

SECTION 01 日記アプリを作成してみよう
作成するアプリの概要

アプリを作成するうえで整理しておく点

SECTION 02 データを保存してみよう
JavaScriptでのデータ保存

データを保存する、保存したデータを呼び出す

保存したデータを削除する

SECTION 03 日付の扱いをマスターしよう
日付を扱う

指定した日付を取得する

SECTION 04 カレンダーを作ってみよう
作成するカレンダーの概要

ヘッダを作成する

カレンダーのセルを作成する

SECTION 05 カレンダーに日記機能をつけてみよう
画面を作成する

カレンダーの日付と日記入力欄をリンクさせる

書いた日記を保存する

初回表示時に、当日の日記を表示する

 


 

CHAPTER 8 さらに開発を進めるために

本書の学習を終えて、さらに、次のステップアップに進むには、どうしたらよいか解説。

SECTION 01 JavaScriptのプログラムを1人で練習してみよう

お手を見ながらプログラムを作ってみる

実践的なプログラムを作成する

JavaScriptでの開発に便利なエディタ Atom

SECTION 02 jQueryを利用してみよう
jQueryとは

jQueryを利用するための準備

要素を取得する

要素の属性を操作する

要素を追加する
要素を削除する
イベントを利用する

SECTION 03 jQueryのプラグインを利用してさまざまな機能を実装しよう
jQueryのプラグインとは?

スライダーを簡単に実装できる

レスポンシブデザインに対応したメニューを作成できる

 


 

たった1日で基本が身に付く! JavaScript 超入門 大型本 – 2017/6/15
WINGSプロジェクト (著), 片渕 彼富 (著), 山田 祥寛 (監修)
JavaScriptプログラミングを一から学ぶための、やさしい入門書です。

おすすめ