遊戯苑 -Yugien-

ウェブページの構造を定義するマークアップ言語。

MathML: 数式をセマンティックに記述し、Webブラウザ上で拡大縮小やアクセシビリティに優れた形で表示・利用できるようにするためのXMLベースのマークアップ言語です。

HTML要素の見た目を整えるスタイルシート言語。

ウェブページに動的な機能やインタラクティブな要素を追加するためのプログラミング言語。

Web Components

Web Componentsとは

ブラウザ標準の仕組みを使って独自のHTML要素を定義・カプセル化し、フレームワークに依存しない再利用可能なUIパーツを作れる技術です。

カスタム要素 (Custom Elements)

<my-element>のような自作タグを定義できる
他のプロジェクトやページに流用しやすい

Shadow DOM

コンポーネントごとにスコープを隔離し、CSSやDOM構造を他から干渉されにくくする
大規模開発での名前衝突防止や保守性向上に貢献

HTML Templates

<template>タグを利用した再利用可能な断片の作成
コンポーネント化と組み合わせて動的に生成／レンダリング

グラフィックス／可視化

SVG (ベクター画像)

テキストベースのXML形式で記述され、拡大縮小しても劣化しないベクター画像をWeb上で扱える標準フォーマットです。

Canvas (ピクセルベース)

JavaScriptからピクセル単位の描画が可能。
ゲームや動的グラフィックスに適する。

WebGL (3D描画)

ブラウザ上で高速な3Dグラフィックスを扱えるAPI。
3DモデルやVR/AR的な表現にも活用できる。

D3.js などの可視化ライブラリ

データを動的にグラフやチャートとして表示する仕組み。

ポイント : 静止画や動的なアニメーション、インタラクティブなグラフなど、視覚表現を強化する領域。

ビルド／ツールチェーン

Webpack, Babel, Vite など

複数のJavaScriptファイルやCSSを一括で最適化・バンドルする。
新しい文法を古いブラウザでも動くようにトランスパイルする機能などがある。

ポイント : 開発を効率化し、最終的に本番公開しやすい形へまとめる裏方的ツール。

サーバーサイド／バックエンド

Node.js, PHP, Python, Ruby など

サーバー上で動作するプログラミング言語。HTTPリクエストを受け取り、レスポンスを返す。
例：

PHP

PHPとは、サーバーサイドで動作し、動的なウェブページやウェブアプリケーションを生成するためのプログラミング言語です。

Python

Pythonとは、読みやすく扱いやすい文法を持ち、幅広い用途で使われる汎用的なプログラミング言語です。

サーバーサイドフレームワーク (例: Express, Django, Rails, Laravel など)

ルーティングやテンプレートエンジン、DB接続などを包括的に支援。
大規模開発を効率化する。

API

API (Application Programming Interface) とは？

ソフトウェア同士が特定の機能やデータをやり取りする際に用いられる、あらかじめ定義された通信手段と規則のことです。

サーバーサイドAPI

例: REST API, GraphQL API など。
クライアント(ブラウザやモバイルアプリ)からのリクエストを処理し、データを返却する仕組み。

外部サービスAPI

例: Google Maps API, Twitter API, Stripe API など。
他社が提供する機能やデータを、自分のサービスに組み込める。

ポイント : Webサービス同士を連携させる「橋渡し」。バックエンドが提供するAPIや外部サービスのAPIなど、フロントエンドから利用するケースも多い。

バージョン管理／ソースコード管理

ソースコードの変更履歴を追跡し、複数人で安全に共同開発を行うためのツール。
ブランチやマージ機能により、並行作業やリリース管理がしやすい。

その他のバージョン管理ツール (Subversion, Mercurial など)

過去には主流だったり、特定のプロジェクトで使われることもある。

ポイント : 変更履歴を管理しながら、チームでの衝突やミスを防止し、生産性を高めるための仕組み。

Text Editor Survey: What text editor are you using?
お使いのテキストエディタを教えてください。

Useful websites and apps

便利なサイトやアプリなど

W3C Markup Validation Service: This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.

VBA: VBAは Excelの操作を自動化するマクロ機能で使われているプログラミング言語で「Visual Basic for Applications」の略になります。