ブログ

技術記事や制作の裏話などを発信しています。

Astroのクライアントディレクティブとは？初期表示を爆速にする基礎知識

Astroのクライアントディレクティブとは？初期表示を爆速にする基礎知識

# Astroのクライアントディレクティブって何？ [アイランドアーキテクチャに関する記事](https://www.kurotech.net/blog/article/?slug=astro-3)にて、動的に機能する要素に付与する属性として、クライアントディレクティブがあるということに言及している。実際に自分が作成したサイトのコードを例として出しつつ、概要を説明したが、そこまで深い話はできてい

#Astro
「JavaとJavaScriptって何が違うの？」に100点満点で答えるための雑学

「JavaとJavaScriptって何が違うの？」に100点満点で答えるための雑学

# JavaとJavaScriptの名前の由来 `Java` や `JavaScript` という単語は聞いたことがあるけど、違いが全く分からないという凄く狭い需要に応える記事を書こうと思いたった。しかしながら、そもそも「 `Java` と `JavaScript` は何が違うの？」という疑問を持つ貴方は、どういう状況なのだろうか？ `Java` と `JavaScript` はどちらもプログ

#JavaScript #Java
Astroの環境構築はどうやる？初心者向けCLI導入と既存プロジェクトへの手動セットアップ

Astroの環境構築はどうやる？初心者向けCLI導入と既存プロジェクトへの手動セットアップ

# Astroの環境構築をするために プログラミングを習得しようと思い立った時、まず壁として立ち塞がってくるのが環境構築である。「コードを書きたい」と思ったとしても、そもそもそのコードを打ち込むための準備が必要という単純な話であるが、この準備で何人が心砕けたことか。 しかしAstroに限って言えばコマンドだけで環境構築は完結している。Astroの[公式ドキュメント](https://docs.

#Astro
DOMって結局なに？ HTMLテキストが「動かせる画面」に変わる仕組み

DOMって結局なに？ HTMLテキストが「動かせる画面」に変わる仕組み

# DOMって何？ DOMという言葉を聞いたことはあるだろうか？ ウェブ開発業界に身を置いている者であれば、HTMLを勉強しているという者であれば、知っているべき技術的要素である。サイトの動作を軽くすることを追求し、突き詰めようとした時、どうしてもこのDOMについて理解していることが求められるからだ。 そんな実は重要な技術 DOMに関して、分かりやすい良い感じの一言説明を探していたが、[ウィ

#HTML
Astroのフロントマターとは？できること（前準備）と書いてはいけないNG行為

Astroのフロントマターとは？できること（前準備）と書いてはいけないNG行為

# フロントマターとは Astroコーディングの基本としてまず押さえておくべきことは、ファイルが大きく3つの構造に分かれていることである。それぞれの概要については、[こちらの記事](https://www.kurotech.net/blog/article/?slug=astro-8)にまとめてある。以下はその結論から引用した。 1. **コンポーネントスクリプト**： TypeScriptに

#Astro
「言われるがままコマンドを叩く」を卒業！ npmを最強の相棒にするための基礎知識

「言われるがままコマンドを叩く」を卒業！ npmを最強の相棒にするための基礎知識

# npmについて知るべきか 何も経験ないけれど、これから個人開発をしようと思い立った。 最強のウェブサービスのアイデアを思いついたとする。その天才的な発想を実現するために、まず「何を使えば実現できるのか」を調査して使用する技術を選定することが求められる。そこで綿密な調査の結果、使用すべきフレームワークが決まったとする。その次は、そのフレームワークとやらをインストールし、開発するために必要な環

#JavaScript
HTML・CSS・JSを1ファイルに凝縮！ .astro ファイルを構成する3つの要素とは？

HTML・CSS・JSを1ファイルに凝縮！ .astro ファイルを構成する3つの要素とは？

# Astroコンポーネントの構造 Astroコーディングの基本としてまず押さえておくべきことは、ファイルの拡張子は`.astro` であること。そして、ファイルが大きく3つの要素に分かれていることの2点である。下記はファイルを構成する3つの要素である。 1. コンポーネントスクリプト 2. コンポーネントテンプレート 3. コンポーネントスタイル 従来のウェブサイトは「HTML」「CSS」

#Astro
共通レイアウトはslotにお任せ！Astroでサイト全体の統一感を保つ方法

共通レイアウトはslotにお任せ！Astroでサイト全体の統一感を保つ方法

# slotを知りたい 多数のページを抱えたサイトを構築していく際に、デザインの課題として上がるものの一つが**統一感**だと思う。サイトのコンセプトに合わせたデザインとしての一貫性が、サイトとしての完成度を押し上げる。しかしページ数が増えれば増えるほど、機能が増えれば増えるほど、その統一感を守ることは難しくなってくる。 そこで出てくる解決策の一つが共通部品を切り出しての管理であり、そこで便利

#Astro
HTMLの書きやすさで動的処理を実現！Astroテンプレート構文の3大拡張機能

HTMLの書きやすさで動的処理を実現！Astroテンプレート構文の3大拡張機能

# HTMLとは？ 「HTMLはプログラミング言語か？」という論争がある。 個人的な感覚として、ウェブサイトの構造を説明してくれるドキュメントなのでプログラミング言語ではないと思う。HTMLはそもそもHyper Text Markup Languageの略であり、「マークアップ言語」を自称しているのでその認識は間違っていないように思う。 さて、Astroはそんなマークアップ言語であるHTML

#Astro #HTML