JavaScriptの勉強も必要か気になりますよね^^
HTMLとCSSの初心者向けの内容です。
みなさんも、Webサイト作成の練習を進めていく際に「 自分もこんなページを
作れるようになりたいな〜 」といった目標のサイトもあるかと思います^^
そんなとき本の続きやネットだと「 これはJavaScriptで実装できます 」など
書いてあったりすることがあって「 JavaScriptってなんだろう？ 」と思う
ことがあるのではないでしょうか？
結論から言うと、JavaScriptはWebサイト作成の上での説明をすると、
「 動的サイトにできるプログラミング言語です 」と言えます^^
大丈夫です、これから分かりやすく説明します^^
今回は、プログラミングについては記述しませんが「 どういった場面で
使ってるのかな〜 」という例題を紹介しJavaScriptにも興味を
持ち続けて欲しいな〜^^という記事にしていきたいと思います。
【 この記事で分かること 】
(１) JavaScriptが、ザックリどんなものか分かる。
(２) なぜJavaScriptを使うのか？のメリットを考えれるようになる。
(３) サイトを見てくれる人(ユーザー目線)が大事と分かる。
HTMLとCSSの初心者向け｜JavaScriptって何？
そもそもJavaScriptって何でしょうか？
JavaScriptは、ひとことで言うと「 プログラミング言語 」の一種ですが、
実は使用できる範囲が、メチャクチャ広くて素晴らしい言語です^^
Webサイトだと、間違えてページを閉じそうなときに「 本当に閉じても
よろしいですか？ 」などのウインドウをさせたりできます。
今回も、ザックリと覚えていってください^^
今回も「 イメージをザックリ理解して欲しい 」というのが目的なので、
ある程度の理解をしながら読んでもらえたら大丈夫ですよ〜^^
そして、次に大事なポイントとして「 現在は、JavaScriptはWebページの
装飾専門言語ではない 」という考え方です。。
JavaScriptは色々な分野の開発に使われます。
JavaScriptは、開発当時の思想は確かにWebページの装飾を考えらて
開発された経緯はありますが、現在はいろんなところで使われます。
【 JavaScriptの主な利用例 】
(１) Webサイトの装飾
(２) Webサービス(ショッピングや会員ページなど)の開発
(３) Webゲームの開発
(４) スマホアプリの開発
色々な分野で使われていることが、分かってくると思います^^
JavaScriptで作られたサービスを、探そうとしてググってみると、検索結果に
みなさんが利用しているサービスの名前が挙がってきて、驚くと思います^^
このように、意外にJavaScriptを利用したサービスに触れていたりします。
「 JavaScript 」と「 Java 」は全く違う言語です！
これは、全く違う言語なのですが、よく勘違いをされているところでも
あるので、要注意ですf^^;
たとえ話で言うと「 テレビ 」と「 テレビ番組 」との違いくらいは、
違うかと思いますw
これは、かなり多く詳しく説明をしてくれているサイトが多いので、
興味を持った方はググってみてください^^
間違えて学習しないように気をつけましょう！
テレビを部品から開発したり設計するのと、面白いテレビ番組を作るのって、
全く違いますよねf^^;
テレビ局の求人募集に「 面白いテレビが作れる人 」と書いてあっても、
テレビの部品に詳しい人が採用される確率は、ほぼゼロかと思います。
プログラミングも言語を間違えてしまうと、希望したことができなかったり、
就職につながらない可能性がでてくるので、注意してください。
【 この記事で分かること 】
(１) JavaScriptは現在でも人気がある言語である。
(２) Webサイト装飾用という訳でなく、現在は
幅広い方法で使われている。
(３) 「 JavaScript 」と「 Java 」は全く違う言語なので注意する。
HTMLとCSSの初心者向け｜JavaScriptの使用例の紹介
では、さっそくイメージ写真を添付しながらJavaScriptで、どんな
ことができそうかの説明をしていきます^^
逆の考え方をすると「 今は、ここで紹介されたものは不要かなf^^; 」と
思ったら、学習から省けるので効率よく学べると思います♪
JavaScriptの使い方の例｜その１
こういった注意が嬉しい時もありますよね^^
これは、先ほどの項でも紹介した、ページを離脱する際の「 確認のポップ
アップウインドウの表示機能 」の実装です^^
これも、作りたいページやサービスによっては重要かと思います。
会員登録をしていて、最後の方でマウスの操作を失敗して、前のページに
戻ってしまい「 ああ、全部消えちゃった... 」となるのを防げます^^
僕は、これで全部消えたらかなりショックで、買い物をするためなどの
会員登録を、やめちゃったりすることもありますw
ユーザー目線だとどうでしょうか？
これを、みなさんにも上記の僕のようにサイトを使ってくれるユーザーの
立場で考えてみて欲しいんです。
そうすると、こういうサイトの場合は確認ウインドウはあった方が喜ぶユーザーが
多いかと思います^^
ユーザーが喜べば「 良いサイト、サービス 」に育っていきます。
それでは、次の例をご紹介していきます^^
JavaScriptの使い方の例｜その2
スライドショーのサンプル画像です^^
使い方の例の、その２としては「 写真(や記事)のスライドボタン 」を
作ることができます^^
このボタンって「 別に普通で、何がすごいんだろう？ 」って感じかと思いますw
実は、結果的に多くの場合ページ読み込みの処理が早く済むような
仕組みになってて、ストレスの軽減につながることが多いんですね^^
写真のスライドボタンもユーザーに役立ちます
写真も、例えば自分自身で「 SNS映えする写真の撮りかた 」を
調べたり、ネットショッピングなどをしているときにも、「 次の写真も
たくさん見たい^^ 」と思うことがありませんか？
そのときに「 次へ 」のボタンを押すたびに「 読み込み中 」の状態が
続くとストレスがたまったり、別のページに行ったりすると思います。
読み込みが早かったら、みなさんも嬉しいですよね^^
ということは、自分で設計したサイトも動きが早い方が、見てくれる
ユーザー喜んでくれる可能性が高い、といった考えができます。
具体的な仕組みをザックリ説明すると、JavaScriptのプログラム記載に
よって、ページの全部の再読み込みをしなくても済むようになっています。
つまり、写真のところだけを表示するように、プログタムで指示すれば
済むので、実際の表示速度として、体感で早く感じれることが多いです^^
JavaScriptを使わなくても、同じような見た目にさせることもできたり
しますが、ページの再読み込みが発生し遅くなることが多いので、
ユーザーに喜ばれるとは言い難いと思いますf^^;
JavaScriptの使い方の例｜その他の例
JavaScriptといえばハンバーガーですねw
他の代表的な例としては、メニューバーやサイドバーの表示方法や、
「 x 」ボタンを押した時のアクション方法などの違いを、細かく設定が
できるようになります。
(例えばハンバーガーメニュー、ボタンなどと呼ばれるものですね。)
うまく使いこなしているサイトは、動きが良い感じにサイトとマッチして
おり、 オシャレって感じがしますよね^^
【 この項のまとめ 】
(１) JavaScriptを使っているサイトを、意外とみなさんも利用しています。
(２) 記事の内容や構成より「 動きが出せる 」という追加要素のイメージです。
(３) うまく使いこなすと、オシャレに見えます。
＞逆に、無理に多用すると見るのがしんどいサイトになりますので注意！
(４) 「 その動きはユーザーの役に立っているか？ 」をまず考えてみましょう。
HTMLとCSSの初心者向け｜JavaScriptの学習って必要なの？
学習はしておいて損はありません^^
初心者からのJavaScriptの学習が必要かどうか？という質問に対し、
僕は「 必要っちゃ必要かなレベルw 」と答えていますf^^;
ぶっちゃけ、初心者のうちや、Webページの作成のみで副業をゴールと
したいとかの場合、HTMLやCSSのみでも割と問題なかったりします。
意外にJavaScriptを利用してないページも多いです。
もちろん、学習を進めていく上や、レベルが高いサイトを目指していく上で
覚えていくことは必要になる可能性はあります。
でも、JavaScriptが必要になったとしても「 学習して理解する 」までの
レベルに関しては、すぐに必要とは思えないところですf^^;
理由としては、JavaScriptでアプリの開発などをしないのであれば、
細かい勉強をしなくても、ネットで公開されている必要なコードを
利用すれば、大体希望のサイトが出上がるからですw
(＊ネット上のコードは自己責任でご利用ください。)
してくれてたりするよね^^
そういうものを、ありがたく使わせてもらうのも良いね♪
この記事を「 HTMLの学習の参考 」で見てくれているみなさんだと、
JavaScriptの学習よりはHTMLやCSSの学習と合わせて、デザインを
どうやったら見てもらう人が心地よいか？などの学習にあてる方が、
今後の伸びしろにつながっていくと思います^^
【 この項のまとめ 】
(１) JavaScriptの学習は、初心者のうちは「 あまり
意識をしなくて良い 」と思います。
(２) JavaScriptを使わなくても、良いサイトは作れるので
ユーザーが喜ぶデザインを意識してみましょう。
(３) ネットで公開されているコードを利用させてもらうことで
理想のサイトが作れることも多々あります(自己責任で！)
(４) Webサイトの構築も「 見た目より中身で勝負！ 」と
意識するとユーザーに喜んでもらえますね^^
おわりに
一歩ずつ頑張っていきましょう^^
いかがだったでしょうか？
今回は学習中に気になりやすいJavaScriptについて、初心者の
方に向けてザックリと理解してもらいたい内容でした^^
サイトを作るときには、見た目にこだわりたい気持ちも
良く分かります。
でも、絶対に「 内容を１番大事にすること 」を意識してください^^
僕が最初の頃は、見た目ばかり気にして失敗したからですf^^;
今思えば、写真が大きくて多すぎてサイトが重かったり、
カラム表示も理由なく３カラムにしたり見づらいものでした。
つまり、見てくれる人のことを考えてなくて、自分が使える
スキルを無理に全部突っ込んだようなサイトでしたw
やっぱり、そういったサイトは、来てくれたユーザーさんが
再度訪れてくれないと思いますし、事実そうでした(T_T)
サイト作成は見た目より中身にこだわりましょう！
もしかしたら、今回の記事で1番大事なのはココかも
しれませんね^^
僕自身も、もっともっとみなさんに喜んでもらえる内容や、
見やすい表示などを意識して頑張っていきます♪
今回の記事で、みなさんがJavaScriptと、どのように
付き合うか？などの悩みが解決し、スッキリ学習が
できるように祈っております^^