今さら聞けないHTML　2022年02月07日

簡単な HTMLParser のソースコードを読んでみる [Javascript]

HTML を極めるって、どういうことなんですかね？
勉強で、簡単な HTML Parser を読んでみていたので、そのメモ。
間違いなどありましたら、ご指摘お願いします。

## HTML パーサーとは？
HTML ドキュメント は、そのままの形式では描画されません。描画されるには、一度 HTML ドキュメントを機械が読み込める形式に変えてから、それをレンダリングエンジンというプログラムに通すことで、描画が行われます。
ここでは、「HTML ドキュメントを機械が読み込める形式に変える」部分を[簡単なコードに落とした例](https://github.com/developit/htmlParser/blob/master/src/htmlParser.js)があったので、そのソースコードを読んでみます (ファイルはこの1ファイルだけです)。また、このコードを書いた Googler は preact という 軽量版の react を書いた人でもあります。

## ソースコード
では、早速読んでみましょう。
このコードでは継承などが多いので、まずは、そのデータ型の整理からしてみましょう。

【jQuery】今いるディレクトリに該当するナビゲーションだけスタイルを変えたい

#背景
前回、一部ディレクトリだけWordPressでできてるサイトでヘッダーフッターを一括管理する方法を書きました。

https://qiita.com/kg_nuts_kg/items/9bbbf8270c4206031932

これってヘッダーはどのページからも同じものを呼び出します。
で、こういうデザインのヘッダーメニューってよくあると思うんです。

「会社紹介」のページにいるときは、メニューの「会社紹介」のところだけスタイルを変えたい！！！
どうする？ページごとに違うマークアップのメニューを呼び出す？しんどいですよね。
じゃあヘッダーのマークアップはそのままで、jQueryの力を借りて勝手にスタイル変えてもらいましょう！！！

#HTMLのメニュー部分のマークアップ
ヘッダーメニュー部

req.bodyに変数を用いる方法

#req.bodyに変数を用いる方法
`req.body.○○`の○○の部分に変数を用いようとした際に少し詰まったので、備忘録として投稿します。

“`Node.js
//req.bodyの後に入れたい変数を宣言
var bangou
for (let i = 1; i < 10; i++) { //自分の場合はreq.body.bangou_1~10の中身がyesの時だけに処理を通しています。 bangou = "bangou_"+i; //req.body[変数]("."は記述しない)と記述することでreq.bodyの後に変数を用いることが出来ます。 if(req.body[bangou] === "yes"){ console.log("通過"); }else{ continue; } } ``` #結論 以上のコードの7行目のように記述することでreq.bodyの後に変数を用いることが可能でした。

完全未経験初心者によるHTML＆CSS学習レッスン初級編メモ

#はじめに
SNS黄金期にGREEやアメブロ,wikiサイトで軽くHTMLを使っただけの初心者による覚え書きです。

##メモ

|やりたいこと |プロパティ |
|—|—|
|高さの調整| height |
|幅の大きさ |width|

“`言語:例
h1 {
　height:80px;
width:200px;
}
“`

参考にした記事
https://qiita.com/zakuroishikuro/items/f33929eab9d55c5bd073

Vueのhtml要素を参照する方のrefについて気づけなかった挙動について

# はじめに

　前回に引き続きVueのお話。これもまた挙動で悩んでいた問題。

　Composition APIでも引き続き有効なHTML要素自体を参照するref。Option APIの頃と違い、使い方はかなりスッキリしている。

“`javascript:test.js
const hogeelement = ref(null);
“`

“`vue:test.vue

“`

Option APIの頃は、やれ$refとしなきゃいけないとか少し気をつけないといけなかったが、Composition APIのほうだと他のリアクティブな変数と同様にref()（Vue.ref()）で使いたい名前で定義するだけ。

# 問題

　HTML要素自体を参照するref。なぜか参照できない問題にぶち当たった。
　リアクティブにも気をつけていたし公式のリファレンスを見て使い方間違っていないと確認したはずなのに。
　多数のプロパティといくつか参照が必要な要素があったのでオブジェクトに内包してまとめて管理して使いたかった

大学時代に2回プログラミングを挫折した僕が、たった三ヶ月でサービス開発できるようになった話

こんにちは！
僕は今、Be-conn Inc.という会社（4月法人登記）でプロダクトを制作するため日々コーディングしています。
使用言語はJS(React)でバックエンドはfirebaseを利用しています。

その他にも個人的に、
Hatakaku: 業務状況改善App
Kiseki: エンジニアの卵用辞書App
を制作しています！

と、自己紹介はこの辺にして、本題に入っていきたいと思います。
まずは、私のエンジニアになるまでの道のりについてです。

#挫折①
大学二年生の頃、とあるドラマ（リッチマンプアウーマン）を見て、「おお、エンジニアかっけえ。」となり、初心者あるあるのprogateでHTML,CSSを学びました。しかし、インプットメインかつ、作りたいものがない中での勉強は身にならず、
結局、一ヶ月かけてカッコ悪いサイトをいくつか作って挫折しました。
これが一度目の挫折でした。

#挫折②
次に大学四年の時に、ITベンチャーでデザイナーをやっている友人から、アイデアがあるならやってみれば？と言われ、当時はまっていた素数計算のアプリを開発しようとswiftの勉強を始めました。
今

一部ディレクトリだけWordPress導入したサイトの、共通部分二重管理問題を解決する

#背景
もともと静的HTMLで作ったサイトに、更新コンテンツなど一部ディレクトリだけWordPressを導入するってケース、あると思います。
フルで全ページWordPressで作ったサイトでは、ヘッダーやフッターなどの共通部分はWordPressテーマだけで管理できますよね。
でも、一部ディレクトリだけWordPressだと、そうはいかない。
ヘッダーフッターなど共通部分に更新が入ったら、HTML内の該当部分を編集して、WordPressテーマのheader.phpとfooter.phpも編集して…って効率がよろしくない。ミスもありそう。
一括管理したい！！！！
ということで、一括管理できるようにしました。

#ファイル構成
こんな感じの構成のサイトだとしましょう。

“`
.
├── index.html
├── about
│ └── index.html
├── assets //画像やCSSはここに格納
└── wordpress // wordpressディレクトリ
└── wp-content
“`

#手順
###PHPが動くようにする
まず、index

便利な開発ツールを探しまくる旅人になることにしました！！

最近めっちゃ思うのがもちろん技術力は大事だけど、ツールを知っていること、使いこなせる
ことがめっちゃ大事だと思いました。

– tableタグを勝手に作ってくれるツール(https://tabletag.net/ja/)
この四角の図みたいなやつをいじれば勝手にHTMLをつくってくれる
CSSも勝手につくってくれる


(今更ながら、)HTMLについて解説してみた(学習まとめ)

#初めに(前書き)

今回は、今更ながら、「HTML」について解説していきたいと思います。
Qiitaの読者の方々には退屈な内容だとは思いますが、どうぞお付き合いください(笑)。

#本題(本文)
「HTML, Hyper-Text-Markup-Language」は、初めスイスの「CERN」と呼ばれる研究機関で考案・開発されました。
ここで、学術の研究論文というのは、一つの論文に対して、複数の他の論文の索引や参照が含まれているので、論文を電子化した上で、各論文の間を行き来して、ある論文を読んでいるときに別の論文を素早く参照・閲覧できる仕組みが求められるようになります。
※これが世にいう「ハイパーリンク, Hyper-Link」というヤツですね。このハイパーリンクが埋め込まれた文書が「ハイパーテキスト, Hyper-Text」です。
※HTMLは、このハイパーテキストを記述するためのマークアップ言語なのです。
そんなときに、同CERNのティム・バーナーズ＝リー博士が考案・開発したのがHTMLというわけです。また「URL」「HTTP」も博士によるものです。
そして、今では当然の技術・

Google SpreadSheetを簡易CMSとして使ってみた

## 背景
WEB制作に関して、CMS化するほどでもないけど、サイトの外部で簡易データベース的な管理をしたいという要望があったため、Google SpreadSheetを簡易データベースとして使用するコードを書きました。
## 注意点
– SEOを考えると、CMS化するなりして頑張ってサイト更新した方がいいかもしれないです。
– Google Apiを使用しますが、これに更新が走ると動かなくなることがあります。定期的にチェックしましょう。

## 手順
### Google SpreadSheetをJSONで取得する
こちらの記事を参考に。APIキーなどを発行します。

【最新版】Google SpreadSheetのデータをJSONで取得する手順

スプレッドシートのデータの形は、1行目にデータの項目名、2行目以降に実データが入っていると仮定します。
ここではこんなデータということにしましょう。
これをHTMLに出力します。
![スクリーンショット 2022-02-04 22.22.09.png](https://qiita-image-store.s3.ap-northe

ダークモード対応のsvg(favicon)を簡単に作れる「Hybrid SVG Maker」を作りました（技術編）【結局JS】

## きっかけ

先日、IEがお亡くなりになるのを期にし、ダークモード対応のSVGを作ろうと思い、[ライダーロゴメーカー](https://pexr.net/fonts/maker.html?font=KHONGO&text=%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%BC)というのを作る機会がありました。(ロゴメーカーを作りたいのではなく、faviconをやってみたいがためにロゴメーカーを作ったわけです。)

その時、ふと思ったのはこの作業はいずれ『**デザイナーとエンジニア(特にフロントエンド)との戦争になるなぁ**』と。
だた、それを見過ごすのも『ダサいなぁ』と思い[Hybrid SVG Maker](https://pexr.net/hsm/)なるものを作りました。

こんな感じの↓ツールです。

Windows 簡単Jsonフォーマット

###Windows環境でライブラリ不要・ソフト不要でJsonを成形する。
拡張子はhtmlまたは、htaで保存
そのほか一切不要です。

“`json.html







成形