HTML/CSS/JavaScriptの練習 実践 雑多な記録３ 基本

Posted on | By slk15user001 | No comments

https://seesaawiki.jp/lifewithslackarmzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf の続き。
練習場
https://oldcygwin.web.fc2.com/
ログインしてからftp
https://web.fc2.com/

practice300.html～practice399.html：
JavaScriptの練習(フレームワーク編)。フレームワークを練習する。
Angularのサンプルプロジェクトを作ってみる： (参考書籍１)
Slack-14.2$ sudo npm install -g @angular/cli
npm WARN EBADENGINE Unsupported engine { package: ‘@angular/cli@12.2.6’,
npm WARN EBADENGINE required:
npm WARN EBADENGINE { node: ‘^12.14.1 || >=14.0.0’,
npm WARN EBADENGINE npm: ‘^6.11.0 || ^7.5.6’,
npm WARN EBADENGINE yarn: ‘>= 1.13.0’ },
npm WARN EBADENGINE current: { node: ‘v10.24.1’, npm: ‘7.24.0’ } }
npm WARN EBADENGINE Unsupported engine { package: ‘@angular-devkit/architect@0.1202.6’,
npm WARN EBADENGINE required:
npm WARN EBADENGINE { node: ‘^12.14.1 || >=14.0.0’,
npm WARN EBADENGINE npm: ‘^6.11.0 || ^7.5.6’,
npm WARN EBADENGINE yarn: ‘>= 1.13.0’ },
npm WARN EBADENGINE current: { node: ‘v10.24.1’, npm: ‘7.24.0’ } }
npm WARN EBADENGINE Unsupported engine { package: ‘@angular-devkit/core@12.2.6’,
npm WARN EBADENGINE required:
npm WARN EBADENGINE { node: ‘^12.14.1 || >=14.0.0’,
npm WARN EBADENGINE npm: ‘^6.11.0 || ^7.5.6’,
npm WARN EBADENGINE yarn: ‘>= 1.13.0’ },
npm WARN EBADENGINE current: { node: ‘v10.24.1’, npm: ‘7.24.0’ } }
npm WARN EBADENGINE Unsupported engine { package: ‘@angular-devkit/schematics@12.2.6’,
npm WARN EBADENGINE required:
npm WARN EBADENGINE { node: ‘^12.14.1 || >=14.0.0’,
npm WARN EBADENGINE npm: ‘^6.11.0 || ^7.5.6’,
npm WARN EBADENGINE yarn: ‘>= 1.13.0’ },
npm WARN EBADENGINE current: { node: ‘v10.24.1’, npm: ‘7.24.0’ } }
npm WARN EBADENGINE Unsupported engine { package: ‘@schematics/angular@12.2.6’,
npm WARN EBADENGINE required:
npm WARN EBADENGINE { node: ‘^12.14.1 || >=14.0.0’,
npm WARN EBADENGINE npm: ‘^6.11.0 || ^7.5.6’,
npm WARN EBADENGINE yarn: ‘>= 1.13.0’ },
npm WARN EBADENGINE current: { node: ‘v10.24.1’, npm: ‘7.24.0’ } }
npm WARN EBADENGINE Unsupported engine { package: ‘open@8.2.1’,
npm WARN EBADENGINE required: { node: ‘>=12’ },
npm WARN EBADENGINE current: { node: ‘v10.24.1’, npm: ‘7.24.0’ } }
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
added 239 packages, and audited 240 packages in 12s
23 packages are looking for funding
\ run `npm fund` for details
found 0 vulnerabilities
\
https://seesaawiki.jp/lifewithslackarmzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20local%20Web%a5%b5%a1%bc%a5%d0%20Node%2ejs
で、node-v12.22.1をmakeできたので試すことにした。
Slack-14.2$ sudo npm uninstall @angular/cli
npm WARN saveError ENOENT: no such file or directory, open ‘/home/ore/examples/javascript/oldcygwin.web.fc2.com/practice300/practice301/package.json’
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open ‘/home/ore/examples/javascript/oldcygwin.web.fc2.com/practice300/practice301/package.json’
npm WARN practice301 No description
npm WARN practice301 No repository field.
npm WARN practice301 No README data
npm WARN practice301 No license field.
Slack-14.2$ sudo npm install -g @angular/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
/usr/bin/ng -> /usr/lib/node_modules/@angular/cli/bin/ng
\> @angular/cli@12.2.6 postinstall /usr/lib/node_modules/@angular/cli
\> node ./bin/postinstall/script.js
\? Would you like to share anonymous usage data with the Angular Team at Google under
Googleâs Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see https://angular.io/analytics. No
\+ @angular/cli@12.2.6
added 1 package from 1 contributor and updated 239 packages in 91.045s
\ New major version of npm available! 6.14.12 -> 7.24.0
\ Changelog: https://github.com/npm/cli/releases/tag/v7.24.0
\ Run npm install -g npm to update!
(警告はあるが、とりあえずうまくいったらしい。多分glibc依存が少ないんだろう)
\
Slack-14.2$ sudo npm install –global npm@7
/usr/bin/npm -> /usr/lib/node_modules/npm/bin/npm-cli.js
/usr/bin/npx -> /usr/lib/node_modules/npm/bin/npx-cli.js
\+ npm@7.24.0
removed 248 packages and updated 257 packages in 12.695s
\
Slack-14.2$ ng new practice301
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE practice301/README.md (1057 bytes)
CREATE practice301/.editorconfig (274 bytes)
CREATE practice301/.gitignore (604 bytes)
CREATE practice301/angular.json (3069 bytes)
CREATE practice301/package.json (1073 bytes)
CREATE practice301/tsconfig.json (783 bytes)
CREATE practice301/.browserslistrc (703 bytes)
CREATE practice301/karma.conf.js (1428 bytes)
CREATE practice301/tsconfig.app.json (287 bytes)
CREATE practice301/tsconfig.spec.json (333 bytes)
CREATE practice301/src/favicon.ico (948 bytes)
CREATE practice301/src/index.html (297 bytes)
CREATE practice301/src/main.ts (372 bytes)
CREATE practice301/src/polyfills.ts (2820 bytes)
CREATE practice301/src/styles.css (80 bytes)
CREATE practice301/src/test.ts (788 bytes)
CREATE practice301/src/assets/.gitkeep (0 bytes)
CREATE practice301/src/environments/environment.prod.ts (51 bytes)
CREATE practice301/src/environments/environment.ts (658 bytes)
CREATE practice301/src/app/app.module.ts (314 bytes)
CREATE practice301/src/app/app.component.css (0 bytes)
CREATE practice301/src/app/app.component.html (24585 bytes)
CREATE practice301/src/app/app.component.spec.ts (971 bytes)
CREATE practice301/src/app/app.component.ts (215 bytes)
\â Packages installed successfully.
\ Successfully initialized git.
\
Slack-14.2$ cd practice301
Slack-14.2$ ng serve
(localhost:4200を見たがfirefoxのVerが低いせいか表示できなかった)
Slack-14.2$ ng build
(dist以下にできたファイルをFirefox/Win10で表示できた。firefox-92.0.1でも見れた)

コンポーネントをつくってみる：(参考書籍１)
practice301のプロジェクトファイルをcpしてもよさそうがだ、新しく取ってくることにした。
Slack-14.2$ ng new practice302
\- – –
Package install failed, see above.
The Schematic workflow failed. See above.
前回と環境は同じだが１回目は取ってこれなかった。それでnpmをVerUpすることにした。
Slack-14.2$ sudo npm install –global npm@8
\- – –
Slack-14.2$ rm -rf practice302
Slack-14.2$ ng new practice302
npm WARN EBADENGINE package: ‘@angular-devkit/build-angular@12.2.10’,
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: ‘^12.14.1 || >=14.0.0’,
npm WARN EBADENGINE npm: ‘^6.11.0 || ^7.5.6’,
npm WARN EBADENGINE yarn: ‘>= 1.13.0’
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: ‘v12.22.1’, npm: ‘8.1.0’ }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: ‘@angular/cli@12.2.10’,
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: ‘^12.14.1 || >=14.0.0’,
npm WARN EBADENGINE npm: ‘^6.11.0 || ^7.5.6’,
npm WARN EBADENGINE yarn: ‘>= 1.13.0’
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: ‘v12.22.1’, npm: ‘8.1.0’ }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: ‘@angular-devkit/architect@0.1202.10’,
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: ‘^12.14.1 || >=14.0.0’,
npm WARN EBADENGINE npm: ‘^6.11.0 || ^7.5.6’,
npm WARN EBADENGINE yarn: ‘>= 1.13.0’
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: ‘v12.22.1’, npm: ‘8.1.0’ }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: ‘@angular-devkit/build-optimizer@0.1202.10’,
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: ‘^12.14.1 || >=14.0.0’,
npm WARN EBADENGINE npm: ‘^6.11.0 || ^7.5.6’,
npm WARN EBADENGINE yarn: ‘>= 1.13.0’
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: ‘v12.22.1’, npm: ‘8.1.0’ }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: ‘@angular-devkit/build-webpack@0.1202.10’,
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: ‘^12.14.1 || >=14.0.0’,
npm WARN EBADENGINE npm: ‘^6.11.0 || ^7.5.6’,
npm WARN EBADENGINE yarn: ‘>= 1.13.0’
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: ‘v12.22.1’, npm: ‘8.1.0’ }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: ‘@angular-devkit/core@12.2.10’,
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: ‘^12.14.1 || >=14.0.0’,
npm WARN EBADENGINE npm: ‘^6.11.0 || ^7.5.6’,
npm WARN EBADENGINE yarn: ‘>= 1.13.0’
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: ‘v12.22.1’, npm: ‘8.1.0’ }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: ‘@ngtools/webpack@12.2.10’,
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: ‘^12.14.1 || >=14.0.0’,
npm WARN EBADENGINE npm: ‘^6.11.0 || ^7.5.6’,
npm WARN EBADENGINE yarn: ‘>= 1.13.0’
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: ‘v12.22.1’, npm: ‘8.1.0’ }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: ‘@angular-devkit/schematics@12.2.10’,
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: ‘^12.14.1 || >=14.0.0’,
npm WARN EBADENGINE npm: ‘^6.11.0 || ^7.5.6’,
npm WARN EBADENGINE yarn: ‘>= 1.13.0’
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: ‘v12.22.1’, npm: ‘8.1.0’ }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: ‘@schematics/angular@12.2.10’,
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: ‘^12.14.1 || >=14.0.0’,
npm WARN EBADENGINE npm: ‘^6.11.0 || ^7.5.6’,
npm WARN EBADENGINE yarn: ‘>= 1.13.0’
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: ‘v12.22.1’, npm: ‘8.1.0’ }
npm WARN EBADENGINE }
\- – –
Slack-14.2$ sudo npm install –global npm@7
Slack-14.2$ npm –version
7.24.2
Slack-14.2$ node –version
v12.22.1
Slack-14.2$ rm -rf practice302
Slack-14.2$ ng new practice302
\- – –
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm ERR! Cannot read property ‘pickAlgorithm’ of null
\- – –
Slack-14.2$ sudo npm install –global npm@7.5.6
removed 16 packages, changed 69 packages, and audited 254 packages in 45s
11 packages are looking for funding
\ run `npm fund` for details
7 vulnerabilities (6 moderate, 1 high)
To address all issues, run:
\ npm audit fix
Run `npm audit` for details.
Slack-14.2$ npm –version
7.5.6
Slack-14.2$ sudo npm install –global yarn@1.13.0
added 1 package, and audited 2 packages in 10s
1 high severity vulnerability
To address all issues, run:
\ npm audit fix –force
Run `npm audit` for details.
Slack-14.2$ yarn –version
1.13.0
Slack-14.2$ rm -rf practice302
Slack-14.2$ ng new practice302
\- – –
CREATE practice302/src/app/app.component.ts (215 bytes)
\â Packages installed successfully.
\ Successfully initialized git.
(動かすためには、どうやら最新を持ってくるより先に、どのVerを要求されているのかを調べて
\それを持ってくる事の方が重要らしい。というか前回動いた環境が動かなくなってるとか、また
\もってくる物が変化したということか?。nodeは–forceでやっても上書きinstallできなかった。
\makeするしかなさそうだが、今回はnodeを入れ替えなくともうまくいった)
Slack-14.2$ cd practice302
Slack-14.2$ ng generate component hellow (本来はhelloとやるのを間違えた)
\- – –
Slack-14.2$ ng serve
https://stackoverflow.com/questions/64874221/property-has-no-initializer-and-is-not-definitely-assigned-in-the-constructor
(title:string|undefined;でいけた)
\
Slack-14.2$ file hellow.component.html
hellow.component.html: ISO-8859 text
Slack-14.2$ iconv -f ISO-8859-1 -t utf8 hellow.component.html > hellow.componentu.html
Slack-14.2$ mv hellow.componentu.html hellow.component.html
(文字化けしたので文字コードを変換した。使える文字コードはiconv_–listで調べた)
https://stackoverflow.com/questions/68615939/angular-error-ts2532-object-is-possibly-undefined
(|undefinedは効かない場合があるのか。price!:number;でいけた。今後は!でやる)

コンポーネントを使いこなせ：(参考書籍１)
作ったサンプルは残しておきたい。いちいち取ってくるのメンドクサイからcpする。380MBくらいあるが。
Slack-14.2$ cp -a practice302 practice303
と思ったが、コンポネントを増やしてそこに前回のをcpして編集してみよう。
Slack-14.2$ cd practice302
Slack-14.2$ ng generate component hello2
Slack-14.2$ cp app/hellow/hellow.component.css app/hello2/hello2.component.css
Slack-14.2$ cp app/hellow/hellow.component.html app/hello2/hello2.component.html
Slack-14.2$ cp app/hellow/hellow.component.ts app/hello2/hello2.component.ts
関連ファイルをhello2を表示するように変更した。がまた文字化けする。とりあえずutf8にした。
Slack-14.2$ file *
hello2.component.css: ASCII text
hello2.component.html: ASCII text
hello2.component.spec.ts: ASCII text
hello2.component.ts: UTF-8 Unicode text
(iconvではなく、emacsで最初からutf8なファイルをcpして内容とファイル名を変更した。iconvでうまく
\いかないとnkfを使いたくなるがSlackには入っていない)
続きはこっちでやる
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/HTML/CSS/JavaScript%a4%ce%ce%fd%bd%ac%20%bc%c2%c1%a9%20%bb%a8%c2%bf%a4%ca%b5%ad%cf%bf%a3%b3

参考情報：
ドキュメントオブジェクトモデル（DOM）
https://rfs.jp/sb/javascript/02js/dom.html
DOMはjQueryなどのフレームワークやライブラリと比べると決して扱いやすいとは言えませんが、外部ファイルの読み込みが必要なく、オーバーヘッドの削減にもなります。昔のようにクロスブラウザ問題もほぼなくなっているので、状況に応じてDOMを直接扱うことも選択肢のひとつにできると良いでしょう。
JavaScript: フレームワーク React/Vue/Angularについて
https://qiita.com/gumiTECH/items/13eb7da8224bf93c67b5
動的にページを構成するコンテンツの典型は、シングルページアプリケーション(SPA)です。jQueryや標準JavaScriptで動的にDOMを組み立てようとすれば、新たなデータを処理したとき、変更すべきDOMの現状を調べたうえで、つぎの状態がどうなればよいか決め、DOM構成をそのとおりに変更するといった流れになるでしょう。データの数が多くなると、構成の組み合わせはさらに増えます。それに伴って高まるのがバグの可能性です。
3つのフレームワークは、DOMをテンプレートで定め、データとバインディングします。そして、データに応じてDOMの構成をどうするかは、テンプレートに書き加えるのです。つまり、DOMの構成がデータの処理から切り離されます。さらに、フレームワークが変更すべきDOMだけを探し、差分をレンダリングすることで、最適化します。
さらに、アプリケーションの機能は小分けして、それぞれのデータの処理とテンプレートをまとめたものがコンポーネントです。小さなコンポーネントをいくつも組み合わせて、ひとつのシステムがつくられます。コードはコンポーネントごとに確かめればよいので、読みやすく、メンテナンスもしやすくなるのです。
「Angular」「React」「Vue」の3大フレームワークに集約
https://logmi.jp/tech/articles/323856
Angular vs React vs Vue – どのフレームワークを使うべきか？
https://www.uxpin.com/studio/jp/blog-jp/angular-vs-react-vs-vue-%E3%81%A9%E3%81%AE%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%92%E4%BD%BF%E3%81%86%E3%81%B9%E3%81%8D%E3%81%8B%EF%BC%9F/
2021年に学ぶべきトップ5のJavaScriptフレームワーク
https://ichi.pro/2021-nen-ni-manabu-beki-toppu-5-no-javascript-fure-mu-wa-ku-128300503374065
\
npmのuninstallコマンドを忘れがちなのでメモ – Qiita
https://qiita.com/mamosan/items/6f1cf71ccd82216fe25b
npm よく使うコマンドまとめ – Qiita
https://qiita.com/standard-software/items/2ac49a409688733c90e7
\
https://stackoverflow.com/questions/69567381/getting-cannot-read-property-pickalgorithm-of-null-error-in-react-native
https://github.com/lydell/urix#deprecated
\
https://qiita.com/r18j21/items/78d8501888839b13c770

参考書籍：
Angular超入門 2019.06
https://www.shuwasystem.co.jp/book/9784798057736.html
Angular webアプリ開発 スタートブック 2018.04
http://www.sotechsha.co.jp/pc/html/1197.htm
https://qiita.com/isso_w/items/d5ed993dbafe44870397
Angular アプリケーションプログラミング 2017.08
https://gihyo.jp/book/2017/978-4-7741-9130-0

Category: Web系の練習

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です