HTML/CSS/JavaScriptの練習 情報収集、目標設定

いきさつは、最近のプログラミング言語って何が流行ってるの?という興味。
プログラマー 言語 需要、でググった。
2020年で最も需要のあるプログラミング言語、Web系の仕事とその環境
https://qiita.com/dhirabayashi/items/0cbe01f403af7a0223b9
https://codezine.jp/article/detail/17079 2018-2022
https://www.youtube.com/watch?v=GlDoVW9aLcI (2022.12)
https://www.youtube.com/watch?v=VYWLZynhPk0 (2023.07)
https://www.youtube.com/watch?v=3MstiT_SCtk (2024.07)
https://www.youtube.com/watch?v=roYHHrdaSrM (2025.01)
https://www.youtube.com/watch?v=xfPZYUGqbMs (2024.06)
https://www.youtube.com/watch?v=gZSEbSCxAvo (2024.12)
https://www.youtube.com/watch?v=Ziqd8QpmecY (2026.01)

ざっくり、需要があって興味が持てそうな観点から選ぶと、ネットはHTML/CSS/JavaScript、
デスクトップはJavaというところ。
JavaはC++がそこそこ分かるので本当に必要になったらお勉強するとして、JavaScriptはスキマ時間に
Zaurusで遊びながら練習してみようか。最近は電車時間が少ないが。gcjで遊ぶのも捨てがたいが。
(何と、GCJは2016頃に更新が止まっていて最新GCCには実装されていない)
SZ-14の構築また遅れるなぁ。というか、SZ-14にしてFirefoxのJavaScriptエンジン上げないとダメか?
逆にJavaScriptを学ぶことで古いブラウザの安全な使い方がより分かるようになるか?古い
ブラウザを動かすのに使える新たなバッドノウハウを発見するチャンスもあるかも。
古いブラウザで読めないページは落としてきて読めるように書き換えるとか。古いブラウザで読め
るように変換API作るとか。

動機付けと目標設定(その1):(2021.04-2022.03)
普段使わないものは身に付かないし無駄な事はしない(Unixの法則。いやSlackwareの法則か)が
あるから、有用性や動機付けや遊びは必要だよね。
Firefoxに情報を持たせないように、bookmarkはhtmlファイル作ってたまに編集してるので、
これを使ってJavaScriptの練習でもしよう。やりたくなったら。JavaScriptの前にまずCSSだし。

htmlファイルはクソ長いから、catで表示すると画面より長いと折り返して表示されてしまう。
簡単に確認したい時はゴチャゴチャして見づらい。cutを使う。
https://seesaawiki.jp/lifewithslackzaurus/d/%a5%b3%a5%de

なるほど時々Zaurusにページ保存してるこのWikiもよく見てみると、ほぼ、HTML/CSS/Java
Scriptでできてる。デザインを選択するとWikiが自動生成してるんだろうな。
$ ls SZ-12_20210411/*
SZ-12_20210411/JavaScriptの練習.html
SZ-12_20210411/JavaScriptの練習_files:
ad ad_002 ads.css adstir.js
analytics.js audience bt_apply.gif common.css
default-16.png gtm.js icon_edit.png itm.js
jquery-1.js jquery.js jquery_002.js jquery_003.js
jquery_004.js jquery_005.js qrcode.js rainman.gif
rainman.js showad.html smartphone_view.js smp_neutralgray2r.css
spacer.gif style.css wikier.js wikisense.js

ならばお勉強ついでに、(手作り)ホムペデビューしてみるか。
無料ホームページ サーバー、でググった。
https://freehp.ojaru.jp/ (悩むなぁ、そもそも用語がさっぱり分からん)
wordpress とは何か、でググった。
1から作りたいのでwordpressには興味はないが、HTML/CSS/PHP/JavaScriptの説明が分かりやすい。
4. カスタマイズで使う4つの言語 – サルワカ
https://saruwakakun.com/html-css/wordpress/whatis-wp

https://freehp.ojaru.jp/info06word.html
当サイトにおける「CGI」とは、CGI/SSI(PHP、Perl、Rudy、Pythonなど)といった、無料ホームページの レンタルサーバー上で、利用者毎にアップロードし、動作させるプログラムを指します。CGI(Common Gateway Interface)。
CMSとは、コンテンツ・マネジメント・システムの略称で、Webサイトをブラウザ上で管理・更新できるシステムのことを指します。
ブログなど、文字や画像だけ用意すれば自動でレイアウトが出来上がる仕組みもCMSのひとつです。
SEOとはSearch Engine Optimization(検索エンジン最適化)の頭文字を取った言葉で、Webサイト検索結果ページの表示順位を、より上位に表示させるために工夫することを指します。
seesaa wiki ベース、でググった。
https://freesoft-100.com/homepage/rental/wiki.html
Wiki(ウィキ)とは、Webサイトをブラウザー上で管理・編集できるシステムです。
Wikiシステムを導入することで、ローカルでの編集、FTPでのアップロードやコミットなどの操作を覚えることなく、レンタルブログのように手軽にコンテンツを投稿でき、ウィキ記法を使って簡単にサイトを編集できます。
Wikipedia のように不特定多数の人で編集することも可能です。
(今更ながらアップロードできるのは、画像ファイル / PDF / 音声ファイル、だけだったのか。
binファイルとかUpする気はなかったけど)
https://wa3.i-3-i.info/word11962.html
SSIとは、HTMLファイルにプログラムを埋め込む技術だよ。最近ではあんまり使われないよ。「Server Side Includes」の略だよ。
わざわざSSIを使わなくてもPHPとかで似たようなことができてしまいます。(てことは多分Perlでも、というかテキスト入れ替えるだけでいいならsedでもできるんじゃ)
https://tech-camp.in/note/technology/55829/
XHTMLとは、XMLのルールで記述されたHTMLのことを指します。
XMLとは、eXtensible Markup Languageの頭文字をとったもので、SGML(HTMLの前身のマークアップ言語)をベースとして作られました。
XML は HTML とどのように異なりますか?
https://aws.amazon.com/jp/what-is/xml/
HTML は、ほとんどのウェブページで使用されている言語です。ウェブブラウザは HTML ドキュメントを処理し、マルチメディアページとして表示します。W3C は、ウェブが長期的に成長できるようにするためのプロトコルとガイドラインを策定する国際的なコミュニティです。W3C は、ウェブサイトデベロッパーが整合性と質を実現するために実装する HTML と XML の両方の標準を確立しました。
HTML ファイルと XML ファイルは非常に似ていますが、いくつかの重要な違いがあります。
HTML の目的は、データの提示と表示です。他方で、XML はデータを格納および送信します。
HTML には事前に定義されたタグがありますが、XML ではユーザーは独自のタグを作成および定義できます。
HTML と XML の構文には、目立たないが、重要な違いがいくつかあります。例えば、XML では大文字と小文字が区別されますが、HTML では区別されません。<book> ではなく <Book> としてタグを記述すると、XML パーサーはエラーを表示します。

自前(オンプレ)、IasS、PasS、SasS、BaaS – Slackware-14.2 メモ
https://shirakawa.weblike.jp/blog-page/2021/12/21…
(最近の身近なネットインフラや仕組み、開発環境を調べた) (2021.12)
(最近、BaaSというのが出てきたらしい)(2025.07)

ヘッドレスCMSとは、コンテンツ内容を管理する部分であるバックエンドの機能だけを持ち、見た目のデザイン部分やCSSなどを持たないCMSの事を言います。 ヘッドレスの「ヘッド」がコンテンツの閲覧や表示する部分(ビュー)を指しています。 ヘッドレスCMSとは閲覧・表示する機能のないCMSなのです。
https://depart-inc.com/blog/blog-20355/ https://codezine.jp/article/detail/15054

ホムペサイト探し選択基準:
https://seesaawiki.jp/lifewithopenzaurus/d/ (前回のサイト探し選択基準)
無料であること。
個人情報とつながりすぎていないこと。できれば匿名で使えること。
学習兼用なのでHPビルダーは参考以外に使わない。ブラウザへの機能依存は作る内容で少なくできる。
サイトがなくなってもBackUpを使って引っ越す。サイトはもう一つのBackUp。
広告は気にしないが、ファイルをUpするかもしれないので容量は多い方がいい。
Firefox最新に安全な接続できないって言われたサイトは使わない。
https://おすすめレンタルサーバー徹底比較ガイド.com/post-1137
FC2にするかな。Seesaaのメインはゲーム、FC2のメインはエロ。その片隅でマッタリ。(2021.04)
https://web.fc2.com/

SeeSaaでもできるんじゃないの?一応、seesaa ftp、でググってみたが、残念、練習できず。
https://faq.seesaa.net/article/422864639.html
FTP、CGI、PHPの利用できますか?
Seesaaブログでは、FTPを利用した接続は対応しておりません。
また、CGI、PHPの利用環境も提供しておりません。
(とはいえ、無料でクセがなくてCGI(PHPその他含む)を使える所なんて、見つからなかったけど。
\練習だけなら、ZaurusにCGIをインストールすればできるかな?。機能不足で静的なコンテンツ
\でもZaurus上に落としてきたら動的コンテンツになるかな?。Apacheとかも必要か?)

PHPやDBやWordPressを無料で使えるサーバをもう少し探してみるか。(2022.01)
https://www.kooss.com/hp/freeserver.html

無料レンタルサーバー php mysql、でググった:(2022.03)
https://おすすめレンタルサーバー徹底比較ガイド.com/post-1248
http://server.bb-navi.com/index2.html
(ファイルをUpする練習と実際の運用感を知りたいが、無料や格安だとssh使えないのは仕方ないか、
無料だとPHPも旧Verしかないとか。220円か250円にするかぁ?)
https://fc2-rentalserver.com/guide/specs/
https://web.fc2.com/fc2html/wordpress.html (PHP,Rubyできなそうなので却下)
https://lolipop.jp/ (shellが使いたくなった時に安く移行できそう)
https://www.star.ne.jp/
https://www.xfree.ne.jp/server/
go言語はさくらやロリポのスタンダードプランでも使える? (レンタルサーバー GoLang、でググった)
https://ja.stackoverflow.com/questions/34199/go%E8…
lolipoにするかな。WPとPHPとJS(TS)の練習物置き場にするか。Goは使えないけど。
https://user.lolipop.jp/?mode=login
https://qiita.com/yuuki_okubo/items/54f62f7acb94e2… (lolipopサーバーをプログラマが使いやすくするネタ)
半年くらい前からFC2が無料WPを始めた。HPとWPだけなら最安。https://web.fc2.com/ (2023.04)
GoやNode.jsが使える無料クラウドを探した (2024.07)
https://shirakawa.weblike.jp/blog-page/2024/07/23…
レンタルサーバ業者が提供しているドメイン名(サブドメイン)を使いまわす(ドメイン買わない) (2026.01)
https://shirakawa.weblike.jp/blog-page/2026/01/23…
自前でサーバ立てる(がIPアドレス買わない)
https://shirakawa.weblike.jp/blog-page/2026/01/23…
サーバーレスとは?仕組みからメリット・落とし穴まで解説 (2026.02)
https://www.youtube.com/watch?v=Wouz-M3klIQ

動機付けと目標設定(その2):(2022.04-2023.06)
とりあえず、ターゲットをWeb系(非常駐)副業かバイト(あるのか?)にした場合、
PHPの基本を理解した後で、RubyとPythonどっちを先にやるか問題があるなぁ。さらに、なおかつ
HTML/CSSもおさえつつ、となる。Goはその後。JSはさらにその後かよ。実はJS、今の副業には
要らねーレベル?。SPAとか副業でなんかやらねー、とか。やるとしたら主食でガッチリとか。
副業・フリーランス案件の多いプログラミング言語ランキング
https://exidea.co.jp/blog/study/it-skills/programm… https://exidea.co.jp/blog/job/job-change/programmi…
https://gakumado.mynavi.jp/first-step/programming-…
(なあんだ、結局全部要るじゃないか。スクールは要らないな、タケーし、時間は十分あるし。
\とりあえず、PHP->Ruby->Python->Goで行くか。Goは当面いいか必要になったらで。PHP練習 2022.03)

(やっぱ、jQueryやBackbone.jsとかをやらないと何故React/Angular/Vueなのかが分からなそうだ。2022.05)
(Backbone.jsの後は、サボっていたHTML/CSSの基本を1回マジメに基礎から練習した。2022.09)
(予感はしてたがやっぱりPythonやらなくちゃならなくなった。ナンテコッタ。2022.11)
https://shirakawa.weblike.jp/blog-page/2022/04/22…
(その後、HTML/CSSの基本を1回マジメに基礎から練習した。の2週目。2022.11)
(Gimpで絵を描いたり、XD/Win10のInstallしたり、GimpでXD,Psファイル見たり。2022.12-2023.04)
https://appmaster.io/ja/news/kodeingudao-chang-tot… (Coding Dojo とは ググ 2023.04)
(案外、自分の実感からしてこれが合ってるかもしれないな。組み込みでもPythonもやるとか。
と思ったが、アセンブラ?それは無いだろう。このランキングは需要とは関係無いな)

2週目の途中でYoutubeを見てHPをWordPress化した。WPの自作テーマの基本を練習した。(2023.04)
PHPの練習で作った物をLaravel化したくなったので、Backbone.jsでやったMVCを復習する。
先にBackbone.jsで作ってみるのもいいかも。その後にSassやろう、タスクランナーも。Web制作
系ばかりで飽きてきたし。Rubyは当面いいか必要になったらで。その前に、ES6のJSの取りこぼしを
https://shirakawa.weblike.jp/blog-page/2022/06/19… の参考書籍2で拾っておこう。(2023.05)
やっぱ、Web開発系はBackendがREST_API化して、Frontendが主戦場?になって行くような気がする
ので、復習が終わったらVueかReact練習するか。がしかし小規模はPHPな気がするなあ。
独立するならWeb制作、雇われるならReact/Go、バイトやるならPHP、みたいな?。管理はNotion?。

動機付けと目標設定(その3):(2023.07-2024.08)
ターゲットをWeb制作系(非常駐)副業に絞る。
(とは言っても、システム構築もするし練習に飽きたらプログラミング系に寄り道しそうだ)
上リンクの参考書籍2を終えたところで、やっぱWeb制作系に戻る事にした。(2023.06)
Psからのコーディング演習やろう。Winは重いからイマイチなんだが。PsよりGimpの方が軽そうだし。
256GB_SSDを買った。コーディング演習終わるまでWin10に切り替えrebootするか。
デザインの仕事が来るとは思えないのでGimpでいい。Psはやめた。コーダ仕事が来たら思い出そう。
React&Nextの練習を始めた。(2023.09-2023.12)
が事情により途中から、GoとSQLiteでサーバを作って5ページ物のHPを動かす事にした。(2024.01)
(自作生コンテナ+Webサーバ)/組み込みLinuxで一定の成果を残せたので、サボっていたCSS設計を学習する。(2024.03)
途中でGoを復習しつつAIでNode.jsに変換し実行してみるのを、CSS設計練習と平行する。(2024.07)
平行するつもりだったが面白いので、GoLang->Node.jsばかり練習してしまった。PHP->Node.js
練習終了。(2024.08)

動機付けと目標設定(その4):(2024.09-2025.04)
ターゲットをWeb開発系まで広げる。AIを活用して。
これまでのPHPを総復習し、最終章を終わらせ、教材のECシステムをLaravelに変換した。
WooCommerceやEC-CUBEを、実際のECシステムの参考にしようとしたが、でかくて複雑そうなので、
Laravel Ecommerce (Lunar)を入れて、ヘッドの入れ込みと改善を目指すがUI/UXデザインで頓挫。(2024.10)
EC-CUBEをLaravel化する事で、最初はUIを流用し、後から改造してゆく。(2024.11-2025.01)
薄々感じていたが、Web系アプリ作成の仕事が二極化している件、地方はやっぱJS/PHPだわ。
Laravel化に時間かかりそうな事と、DLしてきたEC-CUBE4.3に動かない所もあって、先にそっちを
Debugして、そっち(正式版、Symfony版)で運用を目指す事にした。(2025.04)
というか、EC-CUBEの使い方知らないで改造できるわけないか。で学習し使ってみる。

動機付けと目標設定(その5):(2025.05-2026.02)
これまで書いてきたWeb物(Slack-15)をSeesaaWikiからWordPressに引き継いだ。(2025.05)
EC-CUBE4.3でECサイトを始めようかと思ったが、やっぱり面白くない。楽しくない。自分で作りたい。
デザインが多少淡白でも。それにはWebのセキュリティーを学習して、PHPやサーバの設定に組み込ま
なければならない。後から試しにAIにデザイン頼んだらまあまあだった。(2025.09)

動機付けと目標設定(その6):(2026.03-)
今渡こそ1から手作りECサイトを作る。

以降がさっぱり進まず予定のまま。
決済システムを加える。他のECサイトやを参考に改善する。
自社開発(個人開発)という体裁で格安PHPレンタルサーバで、ECサイト運営を始める。
余裕があれば、Adonis.jsに変換。Node.jsの無料サイトがあればサンプルとして実施。
余裕があれば、Railsに変換。Rubyの無料サイトがあればサンプルとして実施。


参考URL:
ftpコマンドについて詳しくまとめました 【Linuxコマンド集】
(ftpでもchmodが使えるか、ならWPやPHPの練習にはsshなくても問題ないか)
Webアプリ JavaScript天国、でググった:
JavaScriptを中心としたWebアプリ開発の栄枯盛衰まとめ――LiveScriptからAngularJS/React.jsまで 2015/07/15
HTMLとJavaScript、でググった:
(いろいろなお勉強サイトが出てきた)
JavaScript | MDN – Mozilla
Progateから実務までにやるべきことと具体的手順【Web制作完全独学ロードマップ】(2022.09)

参考書籍:
Software Design 2020年9月号 Vue.js講座 JavaScriptフレームワークの潮流がわかる (第2特集でちゃかりUnixコマンドやってる)
https://seesaawiki.jp/lifewithslackzaurus_15_0/d/
(Vue.jsはjQueryと共存できないらしい)
Software Design 2019年10月号 “速い”Webアプリケーションの作り方[フロントエンド編]レンダリングのしくみからHTML/CSS/JavaScriptの書き方まで
https://gihyo.jp/magazine/SD/archive/2019/201910
Software Design 2018年9月号 Webアプリ+機械学習の即戦力 君は使わずにいられるか? TensorFlow.js
https://gihyo.jp/magazine/SD/archive/2018/201809
Software Design 2016年10月号 Webサーバはなぜ動くのか?HTTP,CGI,サーブレット,Node.js,Railsを一挙解説
https://gihyo.jp/magazine/SD/archive/2016/201610
フロントエンドエンジニア養成読本 2014.08 (ブラウザの仕組みとかも書いてる。最近はUA詐称しても見破られるな)
https://gihyo.jp/book/2014/978-4-7741-6578-3
Software Design 2008年3月号 古く,そして新しい言語の現在(いま)JavaScript最前線 (Ajaxは既に登場した)
https://gihyo.jp/magazine/SD/archive/2008/200803
JavaScriptハンドブック 1998.10
https://iss.ndl.go.jp/books/R100000002-I000002881145-00

コメントを残す

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