初心者のJavaScript 初めの始め [ ARTEMIS ]

2008.02.06 改

はじめに

◆難しいの一言が難しくしている ?
このページは、はじめてプログラムという物に触れる方に向けて解説していきます。なるべく初心者の立場に立って書いて行きます。プログラムと言うと、難しい物だとか理系じゃないと・・・とか思っている人もいるようです。が、それは高度なプログラムの話。 htmlにちょっとした化粧をするつもりで使うjavascriptは、基本的な『理屈と仕組み』を理解すればとっても簡単な物です。
『もし～ならこうする。そうじゃなかったらこうする。』とか文章をまとめ上げていく能力と、パズルを解いていくのが楽しいと思えれば、それだけで適正性は十分です。

◆目より手で書く
覚える為に一番大事な事は、読む事ではなく書く事とく実験する事です。
解説に沿ってサンプルソースなどがありますが、これを読んで理屈がわかった時点で次へ進まずに必ず、自分で htmlファイルを作り自分の手で書き動作確認をしてみて下さい。この時にコピーもしちゃ駄目。必ず自分の手で打ち込んで下さい。
また、少し理解が進んできたら、サンプルの一部を自分なりに変更してみたりしながら『ここをこうしたらこうなる』と言うような実験も試みて下さい。初心者はこの手間をするかしないかで、その後の伸びは全然違ってきます。
javascriptと言う物はローカル(あなたのマシン)内で動く物ですのでテストはやりたい放題です。誰にも迷惑もかかりません。ソースをミスってマシンが爆発するような事はありませんから。

◆エラーは友達、大歓迎？
エラーが出たり全く動かなかったり、そんな事は書いていると頻繁に起こります。(笑) 『何で動かないんだよぉ～』って、むしゃくしゃする事もしょっちゅう。初期の頃は単純な記述ミスが多かったり、わかったつもりでいい加減に書いていたりそんな原因がほとんどです。
エラーが出て原因を解決した人は、何故エラーが起きたかと言う事がわかった分1つ上達している事になります。だから、エラーは上達している目印？みたいな物かもしれませんね。サンプルソースをコピーしてそのまま流してしまった人にはエラーは起こらない、だから覚えない。エラーが出たら『ラッキー』って思っちゃって下さい。自分がどういうエラーを起こしやすいかを知る事も自分の癖を知るのに都合が良いです。

◆顔見えないし
ある程度自分で試行錯誤してもわからない時は、わかる人に聞いちゃう。 javascriptがわからない事くらい恥じでも何でもないので、身近にわかりそうな人がいたら聞いてしまいましょう。顔が見えるわけじゃないし気軽にね。
身近にいない人は、教えてGoo(OKwave系)やヤフー知恵袋などでも聞けます。私もたまにOKwaveの方には回答しています。『何をしようとしているのか』『何がうまく行かないのか』をなるべく細かく書いて下さい。自分のサーバーに問題のファイルをアップして私が確認できるようにしてもらえると話は早く進みます。
初心者のいけない所は、ほんの2行程度の質問で自分の仕様としてる事がわかってもらえると言う甘え。どうせ顔が見えないのだから、物凄い素人質問だとしてもできるだけ詳しく質問を書いてくださいね。

◆順序としては
javascriptはオブジェクト指向(意味わかりませんね)の言語です。 htmlファイル内のタグやidなどあらゆる部品を全て『物』として捕らえて、それらを操作する物だと思って下さい。だから、基本的なhtmlタグを理解できている事が大切です(ほんとに基本です)。 formオブジェクトの操作をするのに、form関連タグを知らないのでは操作もできません。
htmlタグの解説まですると長くなるので、省きますから事前にきちんと学習しておいてください。 javascriptを覚えながら一緒に覚えて行っても構いませんけども、とりあえずhtmlを使って簡単なホームページくらいは作れる力が必要です。超簡単なHTMLが理解できない人にJavaScriptを理解するのはちょっと無理です。
ちなみにXHTMLとかXMLとかではなくHTMLで十分です。個人のページであればXHTMLにこだわる必要なんてあまり無いですから。

◆焦らない事
静的なHTML表示に対して動的なJavaScriptは非常に魅力的に感じたりします。目に見えるあれこれをやりたくて覚える人もいると思います。プログラムにまだ不慣れな人は、そういった派手なDHTMLを扱う事よりも、まずJavaScriptのコアの部分、基本的な文法や方法論などを身につける必要があります。基本的な事がわかってしまえば、後はどういうオブジェクトがあってどういうメソッドがあって、、と言うのを知るだけで、どんどん世界が広がります。まずは、基本的なプログラムを覚えましょう。

使う前に

top

◆外に出る前には鏡をみてね
私的ホームページ製作者は自分の趣味で作っているだけだとしてもある程度、公の場所に出すわけですから可能な限り確認をして欲しいと思います。メジャーなブラウザとしてinternetexplorer と FireFox(netscape)があります。あなたがどちらをメインにしていても構いませんが、確認だけは両方でして欲しいと思います。外に出かける前には鏡を見るくらいのエチケットと同じです。 htmlでも結構違いが出るのでjavascriptを埋め込む場合はなおさらですね。古いブラウザでの確認はできない場合がありますから、確認済みのブラウザを書いておくのも目安としていい事だと思います。

◆厚化粧に注意
javascriptを覚え始めると、無理してでも使いたがる方がいらっしゃいます。また、付け加え付け加えの繰り返しで気づくとスクリプトだらけとか、簡単にできる事をわざわざ難しい方法でとか。。。本来、機能やデザインを高める為に使う物でも下手に多用しすぎると返って機能やデザインの低下を招きかねません。また、予期せぬエラーも多々出る事もあります。私も初期の頃使いすぎてエラー連発って事もありました。ビジターにとってエラーってとっても不快ですよね。エラーが出るくらいなら使わない方がましかもしれません。
検索から飛んだページでいきなりエラーが出たら、私はそのページがどうしても見たいページな場合以外は次の検索結果の方に飛んでしまいます。今はセキュリティの問題で複雑な事をやろうとすると、警告で引っかかったりします。できるだけスリム化してJavaScriptは使わずに、必要な機能だけ使うように心がけましょう。

◆火ぐらい通して
最近はブログの流行で個人ページをつくる人も減りました。個人ページで時折見かける(最近はさすがに減った)物で次のような物がありました。
『今 ○時○分○秒です』『あなたのブラウザは netscape navigatorです』
javascriptではビジターのマシンの時間を取れます、またブラウザ名なども取出す事ができます。でも、これってそれを使って何かをする材料だと思いませんか？『だから？』って続きが全く無ければ何の意味があるのか・・・(^^;
全く調理もせずに材料だけ出されても・・・・・・・・。とっても悲しく思う時があります。時計はパソコンについていてますし時間くらいわかっています。自分が使っているブラウザくらい知っています。何の為にその機能を使うのかを明確に自分の中で目的をはっきりさせましょう。
ただ、絶対駄目とは言いきれません。例えば、ブラウザ別の表紙やコンテンツを用意している方などは『あなたのブラウザは○○です。○○へお入り下さい。他のメニューはエラーが出る場合があります。』とか、『今○時です。本日発送の注文は○時までの受付になります。』の様に、ただ表示するだけでもそれが情報としての利用価値があり、役に立つと言う目的があるのであれば全く問題ないでしょう。『何の目的でそれを使うのか？』は必ず意識しましょう。

準備するもの

top

◆紙と鉛筆
javascriptを勉強していくのに紙と鉛筆の代わりにブラウザとエディタを用意します。エディタはwindowsならnotepad(メモ帳)で構いません。

１．空のhtmlファイルを用意して下さい。
２．このhtmlファイルをエディタとブラウザの両方で開いて下さい。
これで okです。エディタで上書き保存をしてブラウザでリロードすればすぐ反映されますので書き換えながら、テストしながら、という形で進んで下さい。

できれば秀丸エディタのような便利なエディタがあると楽です。
ブラウザは私はIEがメインですが初心者にはFireFoxのエラーコンソールはかなり強い味方になります。コーディングのメインブラウザはFireFoxをお勧めします。

とほほのＷＷＷ入門さんのJavascript、HTML、CSSのリファレンスをいつでも開ける状態にしておくと便利です。このリファレンスさえあれば初心者には十分です。

少し上達してきたら
JScript リファレンス
Mozilla Developer Center

さらに
Microsoft HTML&CSS (英語)
Mozilla Developer Center (英語)

次→

専用ページから申し込むと
So-netより高い３万円CB

案ずるより産むが易し
使ってみれば疑問も解決

XREA+ (plus) 206円/月
( お試し7日間 )

CORE SERVER 428円/月
( お試し15日間 )

ロリポップ 270円/月
( お試し期間10日間 )

ヘテムル 1620円/月
( お試し期間15日間 )

さくら 129円/月
( お試し期間2週間 )

無駄な高額ドメイン管理料金払ってませんか？

バリュードメイン
ムームードメイン

お客さんに振込手数料を払わせていませんか？イーバンク銀行同士なら振込手数料無料。オフィスで簡単振込みイーバンク銀行　ビジネス口座