JavaScript入門4

応用練習と、サーバサイドのプログラム

1 マウスに応答させる

マウスクリックした場所に図形を表示させるプログラムを考えてみる。

1. click, mouseup, mousedown などのイベントに応答させる。jQueryで書くなら、

    $(document).click(関数名)
   

   のように書けるだろう。

   • 関数に Eventオブジェクトが渡される。
   • このオブジェクトには座標に関する様々なプロパティがあるが、とりえあず　pageX, pageY を使うといい。

   • このコードを最初に（jQueryの準備が整った時点で）呼ぶなら、

        <script>
        $(()=>{
            $(document).click(関数名)
        })
        </script>
     

     のような呼び方になる。

2. (例えば)div要素を、CSS属性 position:absolute; で作るのが単純。

    $('<div/>')
   

   で生成できる。
   固定的なCSS属性は予めHTMLのstyleタグに 埋め込んでおくといいだろう（もちろんプログラムで与えても差支えないが）。

    $('body').append(生成した要素）
   

   も忘れずに。

   • この要素に、background-color, left, top, width, hegit などの属性をプログラムで与えよう。
     • jQueryでは .cssメソッドが使える。
     • 単位は px で指定する、（変数 x に整数値が入っているとすると）x+'px'のように書くことになる。
     • 色は乱数で生成するのが楽かも知れない。

3. クリアボタンを用意しよう

   • ボタンを clickした時のメソッドで、注意すべきは、最後に

        return false
     

     する必要があること。

   • これは、イベント処理の伝搬を防ぐため。

   • 例えばページ内のdiv要素を全部消してしまうのは（jQueryだと）簡単。

        $('div').remove()
     

• これまでの実施例として２つのHTMLファイルを示しておく （このページにソースを提示はしないので、ブラウザで開いてから 「ソース表示」などで確認してください）。
  • クリックで四角形
  • ドラッグでカラフルな四角形（クリアボタン付）

今後の方向性

• こういうプログラムの動作を、サーバ経由（右図）で、 　 複数端末から（遠隔で）共有してみたい、 と考えたときに、
  サーバ側のプログラムを用意する必要が出てくる （ので、次章でそのための準備をしよう）。

サーバサイドのプログラム（のための準備）

概要

• 各OSごとに、
  　　そのOS環境で使えるアプリケーションを管理するためのアプリケーション（パッケージマネージャ）と、 アプリケーションが集大成されたリポジトリ（倉庫） を持っている（ことが多い）。
  • Windowsに限っては、マイクロソフトが公式なパッケージマネージャを長らく提供してこなかった。
  • そのため、有志グループによる Chocolatey が発達して、 （開発者を中心に）広く使われている。
• プログラムが（前回までのようにブラウザの中ではなく）動かすためには、「言語処理系」と呼ばれるソフトウェア（単に「処理系」とも呼ばれる）が必要。
  • 言語処理系はプログラミング言語ごとに用意されている。
  • 言語処理系はOSには添付されないので別途インストールする必要がある。
• 処理系のインストール方法として、以下のような３つのアプローチがある。
  1. 開発元のダウンロードページからインストーラをダウンロードしてインストール（直接のインストール）
  2. パッケージマネージャ（Windowsだと、Chocolatey）でインストール
     • コマンドプロンプトを（大抵は管理者権限で）開く
     • 当該処理系のパッケージ名を確認（clistコマンド等で）
     • cinst パッケージ名 -y コマンドでインストール

     という３ステップでインストールでき、手軽である。 * Chocolateyリポジトリへの登録が遅れて、 最新版でないこともある *　がその一方で、cup all -y　コマンドで インストール済のアプリケーションを一括で （リポジトリにある中で）最新版に保ってくれる便利さがある。

  3. 多くの言語で、処理系のバージョン管理をするソフトが用意されている。
     • rubyだと rbenv, pik など
     • node.js だと nvm, nodist など
     • これは複数のプロジェクトを抱える専門か向きの方法 なので、初心者はこれを使う必要は今はないだろう。
• 各言語ごとに、第三者が作った有益なプログラム（をパッケージ化したもの）が「ライブラリ」として多数提供されている。
  • プログラミングは、自分で作る<->既存資産を活用する、 の適度なバランスが必要なので、ライブラリの活用方法は 　　　　重要な技術である。
  • ライブラリを管理するソフトウェア（これもパッケージマネージャと呼ばれる）が、言語ごとに用意されているので、 活用しよう。
    • ruby だと gem
    • node.js だと npm

今日の作業

右図も参照のこと。

• 当面はNode.js で作ることにしておこう。
• まずは Node.js をインストールしよう
  • [1] パッケージマネージャ Chocolatey を介してインストールすることをお勧めします。詳しくは ここ参照。

  • choco の動作確認の方法は、（普通のコマンドプロンプトで）

    choco -v
    

  • [2] chocoを入れたら、新たにコマンドプロンプトを開いて、

    choco install nodejs -y
    

    または、省略形のコマンドで

    cinst nodejs -y
    

  • 赤い文字のメッセージが出てなければおそらくOK。
  • エラーが出るようなら、一般のコマンドプロンプトでなく管理者権限のコマンドプロンプトから起動する必要があるかもしれない。

  • choco の動作確認の方法は、（普通のコマンドプロンプトを、いったん閉じて開きなおしてから）

    node -v
    npm -v
    

    など。

• 次に、express.js　も必要になる。
  • ライブラリexpress-generatorを入れると、そのライブラリが依存している沢山のライブラリも連動してインストールされる。

  • [2.5]npm のインストールに先だって、（学内では）proxyの 　　設定が必要になる。

    npm config set proxy http://proxy:3128
    ##  の前後に、　（必要ならば）確認のため
    npm config list
    #### この設定を取り消す方法は、
    npm config delete proxy
    

  • [3] インストールは以下のように行う。

    npm install express-generator -g
    

  • 動作確認の方法：

    express -h
    express -V    ### 大文字のV
    

  • 実際にgeneratorでアプリケーションフォルダを生成するときは、
    • まず、自分の「ドキュメント」フォルダ（の下にある適当な分類フォルダ）に（エクスプローラで）移動してから、
    • （エクスプローラから起動する方法で）コマンドプロンプトを開き、

    • 適当な名前を決めて、（以下の例では app1とした）

        express app1
      

    • そこで表示されるメッセージ（の最後の何行か）に着目し、それに従うと、サーバ起動まで行うことができる。

      install dependencies: > cd app1 && npm install

      run the app: > SET DEBUG=app1:* & npm start

    • && や & はコマンドプロンプトでは、一行に 複数のコマンドを入力するための記号
      • &&は条件つき実行
      • &は無条件に連続実行

    • 以下に各コマンドを解説しておく。

        cd app1
      

      　 は、カレントフォルダを app1 に移す指示。
      （app1 はその時作ったアプリケーション名=フォルダ名に置き換えて使うこと）

        npm install
      

      　 は、必要な依存ライブラリを現在のフォルダの下 （node_modulesフォルダ）に集めてくる指示 （終了まで少し時間がかかる）。

      • 学内で実行するなら、事前に proxyの設定（前述）をしておく必要がある。

      • プログラムの大きな変化がなければ、最初の一回だけ実行するのでいい。

        SET DEBUG=app1:*
        

      　 ここでも app1の部分は自分の状況に合わせて読み替えること。この指示はしなくてもサーバは動作するが、 コンソールに出力される情報（デバッグ出力）の量が変わってくる。
      この指示はコマンドプロンプトを閉じるまで有効。

        npm start
      

      これでサーバが起動する。

      • コマンドプロンプトの窓を閉じれば強制的に終了される。

      • 起動すると（debugが設定されていれば）

        app1:server Listening on port 3000 +0ms

      のようなメッセージが出る（下図左）。
      ここで表示される 3000 がポート番号。

• ブラウザからアクセスしてみる。
  ブラウザのアドレスバー（Ctrl-L または Alt-D）に

    http://localhost:3000
  

  または

    http://localhost:3000/
  

  と入力する。と簡単なWebページが出てくる筈(下図右）。 * 後者のアドレスの方が正式な書き方（前者の入力に対して ブラウザが内部で後者だと解釈して扱ってくれている） * ポート番号の右の、スラッシュ(/) から始まる部分全部 （ここでは / だけ）が、 HTTPのGETリクエストの要求資源として送信される。