JavaScriptを使ってみよう!!
JavaScriptのライブラリを使ってパララックスを実装したけど、JavaScriptに関する基礎知識をほぼ忘れてしまっているのに気が付きました。
という事で、JavaScriptの基本の基本をおさらいしています。
hello javascript worldをブラウザに表示
1 2 3 4 5 6 7 |
<html> <body> <script type="text/javascript"> document.write("hello javascript world<br>"); </script> </body> </html> |
JavaScriptを使う
JavaScriptの文法は二の次にして、JavaScriptを使い倒してしまいましょう。
<script>~</script> の間に JavaScript のプログラムを記述。
<!– –>ってHTMLでは、コメントアウトです。
JavaScriptでコメントアウトする時は、
1つの行内では、//を使うと、それ以降がコメントアウト。複数の行の時は/* */(入れ子はダメ)で挟んだところがコメントアウトされます。
使っちゃダメ=予約語 をチェックしましょう。
変数名や関数名で使えない予約後は次の通りです。
JavaScriptは、変数名、関数名の大文字と小文字は別の文字として扱われます。
- await
- break
- case
- catch
- class
- const
- continue
- debugger
- default
- delete
- do
- else
- enum
- export
- extends
- false
- finally
- for
- function
- if
- import
- implements
- in
- instanceof
- interface
- let
- new
- null
- package
- private
- protected
- public
- return
- static
- super
- switch
- this
- throw
- true
- try
- typeof
- var
- void
- while
- with
- yield
予約語を覚える必要は無いと思いますが、変数名や関数名で使えないワードがあるという事だけ知っておいてください。
JavaScript実践のコツ
JavaScriptの特徴は、PHPやPerlのようなサーバーサイド・スクリプトと違って、クライアントサイド・スクリプトでWebブラウザ上で実行させる事を目的にしたスクリプト言語です。
有名なライブラリーをご紹介します。
これらのライブラリを使えばJavaScriptの文法を覚える必要もなく、サクサクとWebサイトが作れます。
- jQuery
- Vue.js
- Bootstrap
- React
数多くのWebサイトで使われています。小規模なWebアプリケーションで利用されています。
シンプル・軽量。高速です。仮想DOMを使っていて描画を最適化してくれます。
よく使われるスタイルがあらかじめ定義してあります。デザイン性のある高機能なWebサイトが簡単に構築できます。
レスポンシブWebデザインに対応しています。
Button や Form などの UI パーツを使えるようにしたもの。FacebookやInstagramで広く使われています。
まとめ
JavaScriptの文法の細かい事を覚える時間があったら、ネットで検索して実装する方法を調べましょう。
僕は文法など細かいことを気にしすぎて手が止まってしまうよりも、力技(ちからわざ)でやりたいと思っている事を実装するようにしています。
インターネットが普及している現在、Web作成でわからない事は検索すればほぼ解決できるはずです。
お客様が望まれるWebサイトを構築する時、JavaScriptの知識が必要になる部分はそれほど多くありません。(概念などは把握しておきますが・・・。)
Webサイト構築には幅広い知識が求められる事も多いので、リサーチなどマーケティングの知識やコピーライティングの知識、できればプログラミングの知識も必要とされます。
実際に作業をする時、やりたい事を検索しながら実装し時間が空いたら基礎に立ち返るというやり方でも仕事をこなせると考えています。
そのような経験を積み重ねる事でスキルをみがき、お客様に自信を持ってよりよいアイディアを提供していきたいですね。