10/13(Sun)

今日の生放送

―目次―
1. 「Javascript入門」。それが「プログラミング初心者」にオススメの授業
2. そもそも「Javascript」ってなに?
3. 「Javascript」で何ができるの?
4. なぜ、いま「Javascript」を学ぶべきなのか?
5. Q&A!みんな気になるあの疑問に先生が回答
6. 授業に必要な準備

 

1. 「Javascript入門」。それが「プログラミング初心者」にオススメの授業


 

かいせつくん

「HTMLとCSSを触るだけのウェブデザイナ・マークアップエンジニアから一歩踏み出して、

   ウェブサイト上でもっといろいろなことができるようになりたい!

プログラミング未経験から、Webサイトやスマホアプリをつくりたい!

 

そんな方のためにオススメの授業が、「Javascript入門ーはじめてのJavascript」。

この授業なら、Javascriptの概念や基本構文を学ぶことができるよ!

 

先生のご紹介

右寺 隆信 フロントエンドエンジニア / グロースデザイナー

1982年生まれ、佐賀県佐賀市出身。 株式会社グッドパッチに所属。フロントエンドエンジニアとして主にウェブサービスの管理画面の開発を行うほか、数値解析のノウハウを活かしてグロース施策の設計・実装等を行う。

 


2、そもそも「JavaScript」ってなに?


なになにくん

私もプログラミングを学びたいと思っているんです。

最近よく聞く、Javascriptってなんですか?


かいせつくん

Javascriptとは、アプリやWebサイトの開発など主にウェブブラウザ上で使用されている、人気のプログラミング言語のひとつ!

そして近年は、様々なアプリ開発をする際にも使用され注目を集めているのがJavascript。

プログラミングの初学者にオススメの言語と言われているんだ。

 

3. 「Javascript」で何ができるの?


なになにくん

HTMLやCSSは少し理解はしているんだけど、

もうちょっと動きのあるWebサイトをつくりたいなと思っています。

Javascriptを学べば、そういうこともできますかね?


かいせつくん

ウェブブラウザに実行環境が搭載されていることから、主にWebサイトやWebアプリ・サービスなどを開発する際によく利用されているJavascript。PHPやJava、Ruby、Pythonなどのプログラミング言語もあるんだけど、初学者でも分かりやすいと言われているんだ。

その理由は、「InternetExproler」や「GoogleChrome」といったウェブブラウザと、テキストエディタ(メモ帳)さえあれば簡単に動かすことができるからなんだよね。他の言語に比べて開発環境の構築に手間が掛かることが多いんだけど、Javascriptなら手軽にプログラミングが始められちゃうってワケなんだ。

Javascriptを使えるようになっちゃえば、手軽に動きのあるWebサイトやアプリがつくれたり、スマホアプリやゲーム開発ができるとか、できることの幅が広がっていくと思うよ!

 

4. なぜ、いま「Javascript」を学ぶべきなのか?


かいせつくん

ここでは、「なぜ、いま、Javascriptを学ぶべきなのか」について、授業の中で行われた先生と受講生代表のやりとりから紹介していくよ!

 


右寺先生:「Javascriptって何か?」と言いますと。一言で言うのであればこちらですね。

プログラミング言語の一つであること。そして、主に Web ブラウザ上で使われている。

っていう特徴があります。なので、こちらも当たり前じゃん!っていうのもありますが、Javascriptは結構、他のプログラミング言語と違った特徴がありまして。

全くプログラミングわかんない方にとって、なんか難しいものってイメージプラス、プログラマーさんがこのマック上とかで書いて、コンパイルみたいなものをやって、実際に動かすみたいなイメージをされて方が多いと思います。

ーーコンパイル。

右寺先生:そのコンパイルというのは、実際、書いている言語って人間がわかる言葉ですが、それをコンピュータに分からせる言語に1回、変換してからじゃないとコンピューター分からないので。そのためにコンパイルっていうのがあるんです。Javascriptでは、このコンパイルがないんですね。

実はHTMLを書いたり、CSSを書いたりするのと同じ感じでも、普通に書いていって、そのままサーバーにあげて、それでウェブサイトを訪れた時に入っている言語をウェブブラザーが勝手に、逐次コンピューターがわかるように変換してくれてどんどんやっていくと。

ちょっとした手間がないだけでも、初学者向けとしてはいいものかと。

あと、もう一つ。Javascriptをいろんな方に使ってもらいたいっていうのは、そういう理念があるというのもあって。

プログラミングの初心者向けに優しく作られている部分も結構あったりとかしまして、そういったところで結構初学者向けにおすすめの言語でありますと。

次に二つ目のこの主に、ウェブブラウザー上で使われているという部分ですね。こちらはまだあまり正確じゃなくて。もっと正確に言うとウェブブラウザ上で使おうと思うんだったら、もうJavascriptしかないぐらいな、そんな感じだったりもしますね。探せば他にもあるかもですけど。

ーーなるほど。

右寺先生:Flashとかっていうサードパーティのものを使うとなると、別のツールをインストールしないと使えないですし、そもそもブラウザ上でそのまま使えるもので言うと、ほぼほぼ Javascript が唯一かなと。

初心者向けにも分かりやすい所は多いっていうのと、ウェブブラウザ上でなんかしようとしたら必須かなと。そういったところで、Javascript は初学者用に最適かなと、私は考えております。

簡単にそんな Javascript の歴史っていうところですが。そもそも1990年代の中頃ですかね。あの ネットスケープっていうブラウザ覚えてますか?

ーーいやぁ、わかんないですねぇ。

右寺先生:(笑)むかし、ネットスケープというのがあって、そこで実装されていたのが、確か一番最初で。それを標準化してっというところで、エクマスクリプトというのが、生まれまして。そのエクマスクリプトがどんどんアップデートされてるんです。

それで今、皆さんが使われているブラウザ 、「Safari」や「 Chrome」 なり「 Internet Explorer 」など、そこで動いてる Javascript も、今では新しいエクマスクリプトをもとにブラウザを作ってる企業さんが実装しているっていう状態です。そういったところですが、2000年代の頭ぐらいですかね。 Javascript は闇の時代がありまして。今でこそ色々と言われてますが、昔は、「ウェブブラウザ上で色々出来るぞっ!」って言っても、画面をピカピカさせるだけとか(笑)

無尽蔵に新しいウィンドウを開くとか、やっぱりユーザービリティの面でいうと、結構最悪だったりとか。そういう時代もありました。なんなら、Webブラウザの機能で「Javascript の機能をオフにする」っていうチェックボックスにチェックを入れたりしていましたね(笑)

ーーえー(笑)。

右寺先生:ただ、2000年代も半ばごろになると状況は変わります。Googleさんが出した、たぶんみなさんもよく使われている「Google Maps」。

こちらがですね、まさにJavaScriptでしかできないことが、たくさん実装されていきましたと。すると、「あれJavascriptって意外と使えるんじゃねぇ。」みたいな流れが出てきて、そこからJavaScriptの見方が変わっていったと。

そして、今でいうとほとんどのサイトでJavaScriptが使われていますよね。昔はユーザビリティを下げるだけって思われていたものが、逆に今ではJavascriptを使わないと、ユーザーが使いやすいものはつくれないと。

Javascriptでより良いものが作れるよね、ということで、いろんなところで使われている、というのが現状ですね。

ーーなるほど。コメントもたくさんきていますよ!

コメント:昔は重くて使い物にならなかった...。

右寺先生:確かに今は、このブラウザ自体やマシンのスペックが上がって、いろんなことができるようになった、というのはありますね。そんなJavascriptですが、なぜ、いま、Javascriptを学ぶべきか。と言いますと、この言語はさまざまなシーンで使われているからです。

ただ単にブラウザーだけで使うわけではなくて、プラスアルファでできることが増えています。例えば、昔だったらもう PHP でフレームワーク入れて、全てサーバーサイドで行うような大規模サイトの開発などもJavascript だけでできてしまったりします。

また、データビジュアライゼーションも Javascript でできるなど、本当にこの言語でできることが増えています。ただその中でも、いろんなプラグインやライブラリーを使うと、 Javascript そのものをそんなに学んでなくても、ちょっとだけ書けるって言うのも結構あったりするんですよ。

ーーほう

右寺先生:例えば有名どころで言うと、 jquery というライブラリーですね。あちらを使うと本当に、簡単にブラウザ上でいろんなことができるので、結構使われてる方は多いですね。困ったことに、私の後輩にもいたんですけど、 「Javascript が分かんないんだけど jquery は使いますよっ」という方たちもいて。

これで何が起きるかって言うと、何か作れているんだけど、ちょっとカスタマイズしようとか、ちょっと違ったことをした時に、「もうお手上げです。何もできません!」何かちょっと問題が発生した時に、「もうどうしようもないね」っていうのありまして。

先ほど私が、「Javascript を使ってこんな便利なこといっぱいできるようになりましたよ」って言いましたけど、そもそもJavaScript を理解できていないと、「宝の持ち腐れ」じゃないですけど、意味がないような状態になってしまうこともありますね。

なので、私は今ってこうできることが増えた今は、Javascript の基本の部分を学んでおくのはいいことだなと考えていますね。

ーーなるほど。jQuery だけだとちょっと不十分。

右寺先生:そうですね。十分に不十分だと思います(笑)。

またHTMLとCSSが書ける方は、もうちょっと自分で色んなことをやってみたくなると思うんですよね。もし、Javascriptを学んでいれば、もっとユーザーさんが喜ぶものを作ることができたりすると思います。なので、もう一歩踏み出していただけるといいかなと思います。

コメント:HTMLもあまりできない、初心者だから心配です...。

右寺先生:今回はかなりシンプルな内容になっているので、HTMLの基本だけ抑えていただいて入れば大丈夫です!

コメント:jQuery はやったことあるけど、JSを知らないとよくわからないです...。

右寺先生:この授業を学べば大丈夫です!頑張って勉強して行きましょう!


 

かいせつくん

この話を簡単にまとめるね!


1、Javascript は闇の時代があったが、Google mapsに採用されたことで一気に普及した
2、Javascriptの基本を覚えるとカスタマイズや問題点の修正など様々な応用が効く
3、Javascriptを使いこなせれば、よりユーザーが使いやすいサイトを作ることができる

 

5、Q&A!みんな気になる、あの疑問に先生が回答


かいせつくん

ここでは、「Javascript入門ーはじめてのJavascript」からプログラミングの初心者の方ならではの疑問を授業を受けた方の質問から紹介していくよ!

Q1 :Javascriptは、全部のブラウザに対応してるんですか?




 

 

 

右寺先生:ほぼほぼ対応しているものと言えるでしょう。

ただ、ニンテンドー3DSやPSPなどのゲーム機からWebサイトを閲覧するケースもあるので、その場合はまた別の対応が必要になります。

また、Webブラウザごとに微妙に、仕様が異なることもありますね。これから、Javascriptを学んでいくという方は、この点はあまり意識せずに学んでいっていいと思います!

 

Q2 :そもそも「script言語」ってなんですか?


 

 

 

右寺先生:コンパイラー言語と対比されるのですが、随時言語を機械語に翻訳しながら実行する言語のことを指しますね。

例えばJavescriptの他にも、PhysonやRubyなどもそうです。

一方、コンパイラー言語とは、例えばJavaやC#のように、ソースコードを事前にコンパイル(機械が理解できるようにソースコードを変換しておくこと)する必要のある言語を言いますね。

 

その他のQ

Q3:分数計算できないのかな

Q4:小数点を含んだ計算でIEEE754規格による誤差問題はどのように対応されることが多いでしょうか。

かいせつくん

これらの質問に対する解説は、実際の授業の中で確認してみてね!


 

6、Javascriptを始める準備 / 事前にインストール


かいせつくん

この授業では下記ソフトウェアを使用するよ。事前にインストールすることで、より学びが定着するはず!

1、GoogleChrome


https://www.google.co.jp/chrome/browser/desktop/index.html

人気のWebブラウザです。Windows/Mac両方で利用可能で、Javascriptの開発に便利な機能を持っています。

2、Sublime Text


http://www.sublimetext.com/

人気のテキストエディタです。Windows/Mac両方で利用可能で、Javascriptの開発に便利です。

使い慣れているエディタがあれば、そちらをご利用いただいても構いません。

3、サンプルファイル


この授業では以下のサンプルファイルを使用します。

http://embed.plnkr.co/pLa8yTzK3htdiDRVm8KY/index.html として紹介されるテキストをhtmlファイル化したものです)

2406_downloads.zip

 

かいせつくん

 

今日、紹介した授業はこのような構成で、授業が行われているよ。

ぜひ、気になったらすぐチェックしてみてね。

 

授業チャプター


自己紹介&アジェンダ

Javascriptとは

Javascriptの歴史とECMAScript

Javascriptを学ぶメリット

開発環境の準備

開発に便利な Chrome Dev Tools

プログラムを書いていこう

文字を表示する:console.log

Javascriptを記述する場所:scriptタ

数値の演算(加算、減算、乗算、除算、剰余)

文字列の表示と結合

Q:分数計算できないのかな

Q:PCやスマホなどで色々なブラウザが有りますが、大半のブラウザがJavascriptに対応しているものなのでしょうか?

Q:小数点を含んだ計算でIEEE754規格による誤差問題はどのように対応されることが多いでしょうか。

Q:script言語とはどういったものなのでしょうか?

 
 

この授業をもっと観る


Javascript入門 はじめてのJavaScript


 

かいせつくん

 

Javascriptをもっと学びたい人は合わせてこちらもチェックしてみてね!

Javascriptをさらに学んでみよう!


秋のJavascript祭 in mixi 〜秋のJavaScript収穫祭〜

実践Javascript

ノンプログラマーでも明日から使えるJavaScript簡単プログラム


 

かいせつくん

 

スクーなら動画で、みんなと会話しながら、わかりやすく学べるよ!

 

Schooは、大人たちがずっと学び続ける生放送コミュニティ

365日配信している生放送への参加は無料なので、ぜひチェックしてみてね。

※月額980円で8,500本以上の授業が見放題のプレミアムサービスもあるよ。

今日の生放送

  • このエントリーをはてなブックマークに追加

まとめ記事の記事一覧