2018/07/31SHAREツイートシェアはてブPocketLINE今回はJavaScriptのための入門講座です。今では、ほとんどのWebサイトでJavaScriptが使われています。WebデザイナーでもJavaScriptができるようになると仕事の幅が広がります。まとめJavaScriptを書く準備JavaScriptを書く準備をします。テキストエディタの用意JavaScriptを書くためのテキストエディタをインストールしましょう。インストールしている人は飛ばしてください。Code日本語で使えて、面倒な初期設定も必要ありません。エディタは他にも色々あるので、時間がある時に調べてみてください。Chromeを使って解説します。HTMLファイルの作成まずは、別ファイルを作らずHTMLファイル内に直接記述して説明します。sampleというフォルダを任意の場所に作成して下さい。デスクトップでも構いません。テキストエディタで新規ファイルを作成し以下のコードを記述して、index.htmlというファイル名でsampleフォルダに保存します。</script></body></html>HTMLファイルに直接書かずに、別ファイルで読み込む方法は後述します。Chromeに直接ドロップしてください。これで「テスト」と書かれたページが表示されたはずです。JavaScriptの基本まずは、Consoleの使い方を解説します。Chrome上で右クリックして「検証」をクリックすると、下のような画面が現れます。画像の指示にあるように、「Console」と書かれたタブをクリックしてください。すると、以下のような画面に切り替わります。次に、この画面に何かを出力していきます。Wordしてみようindex.htmlを以下のように編集してください。</script></body></html>保存して、Chromeを再読み込みしてください。すると、以下のように表示されるはずです。World');Consoleに何かを出力させたい時に、console.logを使います。World’のようにクオーテーションで囲まれた部分は文字列と言います。World”のようにダブルクオーテーションでも大丈夫です。以下のようなコードはエラーになります。World」が文字列として認識されないからです。行の終わりには;(セミコロン)を記述します。次に覚えて欲しいのは、JavaScripの変数についてです。ここからはHTMLの記述は省略して、<script>〜</script>内のコードだけを書いていきます。World';console.log(text);varというのは、新たに変数を宣言するための記述です。「textというのは変数です」という宣言です。World’という文字列を代入しています。JavaScriptにおいて、「=(イコール)」に等しいという意味はなく、代入という意味になります。Wold’という文字列が格納された変数textを宣言した」ということになります。World’をConsoleに表示させます。変数にある値は、後から変えることができます。Worldが出力されるこのコードのように、変数の中身は後から変更することができます。後にある同じ行の記述は無視されて実行されません。このように、実行されないようになっている箇所をコメントアウト言います。一行だけコメントアウト/*複数行のコメントアウトここに書かれいてる文章は全て実行されません。*/何かメモを残したい時や、一時的にコードを使用したくない場合に利用します。数値JavaScriptでは、数値と文字列は異なります。12JavaScriptの「+」は、数値だったら計算を行い、文字列だったら連結します。「1」と「2」が数値か文字列かで出力結果が異なるのです。数値の計算(算術演算子)お次は、数値を使った計算の仕方です。剰余(余り)実際に計算すると、以下のようになります。算術演算子と言います。行う代入演算子は、=以外にもあります。y特に、加算代入や減算代入はよく使います。if文は使用頻度が高いので、しっかり使い方を覚えておきましょう。}で囲まれた部分をブロックと言います。if文では、括弧の中身を評価して、当てはまる場合(true)の時にブロックの中を実行し、当てはまらない場合(false)は実行しません。以下のように書くと、trueの場合とfalseの場合で処理を実行させることができます。console.log('10以下です')}ifの中を評価して、trueであれば上のブロックを実行し、falseの場合はelseの後のブロックを実行します。console.log('10より小さいです')}===は等しい場合にはtrueをfalseを返します。if()の中を評価します。それでもfalseだった場合はelseの文を実行します。上のコードで使われている<が、二つの値を比較する比較演算子です。比較演算子には色々な種類があります。二つの値が等しいか比較するのが投下演算子です。‘2’」がtrueを返します。型も含めた厳密な比較には、イコール三つで比較します。二つの値の大小を比較するのが関係演算子です。trueJavaScriptを別ファイルで読み込むHTML内に直接JavaScriptのコードを記述する方法を紹介しましたが、実際のコーディングでは別ファイルにしてそれをHTMLで読み込みます。sampleフォルダの中に、jsというフォルダを作ります。テキストエディタで新規作成して、以下のコードを記述します。console.log('JavaScriptファイルを読み込みました!');これを、「script.js」という名前で「js」フォルダ内に保存します。body要素の最後に、JavaScriptを読み込むための記述をします。src="js/script.js"></script></body></html>これで、外部のJavaScriptファイルを読み込むことができます。実際にHTMLを保存して、ページをリロードしてConsoleを見れば、「JavaScriptファイルを読み込みました!」という文字列が出力されているはずです。まとめここに書いた内容は基礎中の基礎ですが、とても重要なことばかりです。JavaScriptを使えるようになるには、最低限マスターしておきましょう。多くの文法は他のプログラミング言語に似ているので、マスターすれば他言語も覚えやすくなります。一度できるようになればJavaScriptはとても便利で、様々な利用の仕方ができる言語です。JavaScriptが使える場面はとても広がりました。慣れてくると奥の深さにハマってしまうと思います。なるまで頑張って学習してみましょう。他にもこんな記事を書いています。コメントをキャンセルメールアドレスが公開されることはありません。