processing:p5js:02.cssとhtmlとjs

cssとhtmlとjs

プログラムを記述していく前に、cssとhtmlファイルとの関係を把握しておこう。

前提として、この3つの役割を理解しておかないと、一つのアプリケーションを作成するためになんで3つもファイル編集せなあかんのだ。というモヤモヤを抱えてしまいます。Processingのときはファイルを一つ編集すればいいだけだったのに、面倒くさいではないかと。

確かに複数ファイルを編集するのでその手間は生じてしまいます。元来jsの登場時期はhtmlとの連携だけだったので、さらにそこにcssまで加わって90年代からタイムスリップした人にはきついなと感じます。まずは、その役割を大雑把に説明します。

  • CSS
    • 画面の体裁に関わる部分。基本的には見た目の設定で、プログラムというよりは設定記述。
  • HTML
    • メインとなるファイル(main関数みたいなもの)。プログラムというよりは設定記述。
  • JS
    • 機能に関わる部分。プログラム記述がメイン。

という具合です。もちろんcssに機能的な要素を加えたり、html上にjsを記述する、JSからcssを設定するといった具合にめちゃくちゃな設計なのでこのあたりの機能は積極的に利用しないのが吉です。技術的な制約で止む終えず利用する以外は上記のルールを守ってください。昔はこのような決まりがあっても、全部htmlファイル内に記述するとか当たり前のように横行していました。

p5jsでも createInputやcreateP みたいな形でhtml上のタグを生成する機能がありますが、この機能を多用するのではなく、あくまでselectを使って、機能をもたせたいタグに対してjs側からアプローチするようにこころがけてください。このページでもそのような設計指針に基づいています。ところどころで面倒くさい記述をしている箇所もあるかと思いますが、わかりやすさを重視した記述にしています。慣れてきたら自分なりの書き方や他のウェブサイトで紹介されている書き方を取り入れても良いかと思います。

すでに皆さんはProcessingを利用して画面上に何かを描画する、ということには慣れてきたかと思います。一方でp5.jsでは html要素をあわせて扱うことができるようになるので、html要素の扱いを中心に紹介していきます。ちなみにjsからhtml要素を扱うための仕組みのことをDOM(Document Object Model)と読んでいます。検索ワードなどで利用してください。DOMをアプリケーション用のGUIとして扱うことで、様々なプラットフォームで動作する汎用性の高いアプリケーションプロトタイプを実践してきます。

  • processing/p5js/02.cssとhtmlとjs.txt
  • 最終更新: 2020/05/02 10:54
  • by baba