JavaScriptでできること

●アニメーション
ホームページで表示されたときにアニメーションが動き出すなど、CSSだけではできない動きが表現できます。

●CSSの設定・変更
JavaScriptを使ってCSSを設定・変更が可能です。動的に要素のスタイルを変化させる場合に利用できます。

●jQueryプラグイン
jQueryのプラグインを使用する事で、スライドショーやコンテンツの高さをそろえるなど沢山あるプラグインから設定することができ、コードの記述を簡略化出来ます。

●演算子
お問合せフォームなどでの入力した際に間違っていたら警告文を表示したり、ショッピングサイトでの料金計算など様々なことが可能になります。 if文、switch文、for文など組み合わせることでより表現の幅が広がります。

●ユーザーの操作に応じた処理
ナビゲーションにマウスを乗せると下の階層が表示されたり、画像をクリックすると大きく表示されるなど、ユーザーのマウス操作やキーボードの操作に応じた処理が可能になります。

●Cookie
ユーザーのブラウザにCookieを保存することにより、以前入力した個人情報や商品などの閲覧情報などが、次回サイトを見たときに表示させることが可能になります。様々なサイトで使用されています。

●DOMの使用
DOM要素はHTMLタグの階層に沿ったDOMツリーとして扱うことができます。 JavaScriptではこのDOM要素にアクセスし、その内容や属性を書き換えることで様々なインタラクティブ機能を再読み込みを必要とせずにページを書き換えることが可能です。

●Google マップ
Google Maps JavaScript API V3を使うことで、マーカーを変更したり、マップの色を変えたり、任意の線を引くなど様々な表現が可能になります。

もちろん、その他にもたくさんの動きができます。
その為にも、基礎からしっかり学んでいきましょう！

 

JavaScriptの勉強で挫折しないために

Point 01
JavaScriptの勉強を始めるときに、参考書を買って中を見て数ページ進めたところで本棚にしまって、、、そのままってことがありますよね。
わからないことを学ぶときは人間疲れるものです。
基礎から勉強する参考書はとくに「いつ」「どんな場合に」「どうやって」使うかわからないものばかりです。
よくわからないものを学ぶとき、
そんなときは、「学ぶ」をやめて→「遊ぶ」に変えちゃいましょう！

Point 02
勉強するすときは、長い時間できればいいでしょう、でも社会人になるとなかなか時間を取ることも難しくなってきます。
前回勉強してから、今回その続きを勉強するころには忘れてしまってたりします。
その結果、分からないままになって挫折してしまいます。
そんな時は毎日「5分だけやってみる！」
そのことで、忘れないし徐々に分かってきます。

「行動を変えれば、人生が変わる」

この言葉を合言葉に、自分の価値を高めていきましょう。

 

JavaScriptを基礎から学べるいいサイト

JavaScriptの勉強を始めるときに、「よくわからないし、誰か教えてくれたな。」と思います。
そこでお勧めしたいサイトは、「ドットインストール」です。

こちらのサイトの何がいいか
・動画で基礎から教えてくれる。
・一回の動画が「3分」なので、勉強時間が少ししか取れなくても大丈夫。

動画をみて大体の雰囲気が分かってからでも、参考書を始めてもいいと思います。

https://dotinstall.com/

 

どこから始めるか

ドットインストールのページを見ると
「JavaScript入門 (全24回)
主にブラウザに実装されているJavaScriptについて、基本的な使い方を学んでいきます。」
こちらから基本的な使い方を学べます。

ページを開くと一覧で全24回の内容が確認できます。
------------------------------------------------------

#01 JavaScriptとはなにか？ (02:47)
概要
リファレンス
必要となる知識
必要となるツール
index.htmlの作成

#02 はじめてのJavaScript (02:59)
scriptタグ
console.log
JavaScriptコンソール
コメントの書き方
外部ファイル化

#03 変数を使ってみよう (02:59)
変数
データ型

#04 数値を使ってみよう (02:41)
数値の種類
演算子
代入を伴う演算子
単項演算子

#05 文字列を使ってみよう (02:50)
文字列の表現方法
特殊文字
文字列の連結

～

#24 イベントを設定してみよう (01:50)
addEventListener

------------------------------------------------------

動画でしっかり解説して教えてもらえるので、本当に助かります。
覚えるには「自分でコードを書いてみる」ここが一番重要です！

見るだけではなかなか理解してそうで、していません。

 

基本は大体つまらない

どの分野にも当てはまることかもしれませんが、「基本は大体つまらない」です。
JavaScriptの基本を勉強しても、基本だけではサイト制作には使えません。
でも、基本が分かっていれば応用でき自分がやりたいことができます。

では、どうするか。

基本で学んだ事をすぐ、アレンジして自分なりに応用してみます。
「#04 数値を使ってみよう」では、計算方法を教えてくれます。
数字を変えて計算してみたり、「var x;」ではなく「var a;」に変えたり、何も見ないでコード書いてみたり。

「#06 if文を使ってみよう 」でも同じように、
条件分岐の数字を変えてみたり、条件に合った言葉が表示される言葉を変えてみたり。
アレンジしてみます。

自分なりにアレンジして遊ぶことで、楽しんで覚えられます。

 

基本が大体わかってきたら

基本が大体分かってきても、なかなかJavaScriptは書けないと思います。
その時は、簡単なJavaScriptを見て、理解して、書いてみます。

いろんなコードを書いたり、サンプルの書き方を見てみて自分のコードの書き方と違う所があれば、どちらがスマートにかけているか比べてみてもおもしろいですね。
自分なりにアレンジして、より良いコードを書ければ完璧です。

自分の思う動きが表現できれば、より楽しくなると思います。

 

今後のウェブサイト

Webの業界は次から次へと新しい技術や、サービスが生まれています。 モバイルではまだ使用は限定的ですが、サイトの表示速度を今よりも高速で表示するAMP（Accelerated Mobile Pages）というものがあります。 VR使ったサイトも増えてくるでしょう。 そのうちHPの作り方も変わってくると思います。

新しい技術やサービスを自分で使いこなせれば、より一層表現の幅が広がり面白いサイトが作れます！ 幅広く興味をもって行動すること。

「行動を変えれば、人生が変わる」

この言葉を合言葉に、自分の価値を高めていきましょう。