processing:p5js:02.cssとhtmlとjs

cssとhtmlとjs

プログラムを記述していく前に、cssとhtmlファイルとの関係を把握しておこう。 Before writing a program, let's understand the relationship between css and html files.

Before writing a program, let's understand the relationship between css and html files.

If you don't understand these three roles, you will be bothered by why you have to edit three files to create one application. It's a hassle when all you had to do was edit one file in Processing.

It is true that editing multiple files is a hassle. When js was originally introduced, it was only used in conjunction with html, and now with the addition of css, I feel that it is hard for people who have gone back in time from the 90s. First of all, I'll give a general explanation of its role.

  • CSS
    • The part related to the appearance of the screen. Basically, it is the setting of the appearance, and is more of a configuration description than a program.
  • HTML
    • The main file (like the main function). More of a configuration description than a program.
  • JS
    • The part related to functions. Mainly program description.

That's about it. Of course, adding functional elements to css, writing js on html, setting css from JS, etc. is a crazy design, so it is best not to actively use these functions. Please follow the above rules unless you have no choice but to use them due to technical limitations. In the past, even with these rules in place, it was common to write everything in an html file.

p5js also has functions like createInput and createP to generate tags in html, but unless you need to dynamically generate html elements (dom elements), please use select and approach the tags you want to have functionality from the js side. However, unless you need to generate html elements (dom elements) dynamically, use select to approach the tags you want to function from the js side. This page is also based on such a design guideline. There may be some cumbersome descriptions in some places, but I have tried to make them easy to understand. When you get used to it, you may want to adopt your own way of writing or the way introduced in other websites.

  • Use select to manipulate existing DOM (tag elements written in html from the beginning).
  • To dynamically generate DOM, use the createHogehoge function to create the dom in js.

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

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

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

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

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

  • 既存DOM(最初からhtmlに記述しているタグ要素)の操作にはselectを使う
  • 動的にDOMを生成する場合は、createHogehoge関数を利用して、js内でdomを生成する

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

  • processing/p5js/02.cssとhtmlとjs.txt
  • 最終更新: 2020/12/22 15:14
  • by baba