SlideShare a Scribd company logo
MPAなWebフレームワーク、
Astroの紹介 (その1)
執筆者:トビウオ
SPAとMPA
• SPA (Single Page Application)
画像は「いらすと屋」
空っぽのHTML
SPAとMPA
• MPA (Multi Page Application)
※PHPなど、Webサーバー側
で多くの処理を行うパターン
は今回考慮しない
なぜMPAなのか?
• SPAは高度なUIを作り込みやすい
https://ja.react.dev/ より引用
なぜMPAなのか?
• SPAはJavaScriptが動かないと何
も出てこない
空っぽのHTML
なぜMPAなのか?
SPAはJavaScriptでDOMを
書き換える時間が掛かる
MPAは書き換える前からある程度
Webページが表示できる=高速
Astroとは
• MPAでWebサイトが作れるフレームワーク
• 普通のHTML/CSSのような素直さ
• 変数などが使える便利さ
Astroとは
• srcディレクトリ内にコードを書く
• astroファイルは概ねHTMLファイル
• Reactなど、他のライブラリとの統合
が容易
astroファイルを書いてみよう
• ファイルパスがURLに対応している
• /
• /memos
• /books/content
• /help/faq/001
astroファイルを書いてみよう
• 普通にHTMLを書け
ば、その通りに動作
する

More Related Content

More from iPride Co., Ltd.

AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
iPride Co., Ltd.
 
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作りAWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作り
iPride Co., Ltd.
 
AWS (Amazon Web Services) を勉強してみる その3 2024/03/01の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる その3 2024/03/01の勉強会で発表されたものです。AWS (Amazon Web Services) を勉強してみる その3 2024/03/01の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる その3 2024/03/01の勉強会で発表されたものです。
iPride Co., Ltd.
 
AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
iPride Co., Ltd.
 
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
iPride Co., Ltd.
 
AWSで全てのパブリックIPv4アドレスが有料になった件について 2024/02/09の勉強会で発表されたものです。
AWSで全てのパブリックIPv4アドレスが有料になった件について 2024/02/09の勉強会で発表されたものです。AWSで全てのパブリックIPv4アドレスが有料になった件について 2024/02/09の勉強会で発表されたものです。
AWSで全てのパブリックIPv4アドレスが有料になった件について 2024/02/09の勉強会で発表されたものです。
iPride Co., Ltd.
 
AWS CDKを使おうとしたら普通に悪戦苦闘した話 2024/02/02の勉強会で発表されたものです。
AWS CDKを使おうとしたら普通に悪戦苦闘した話 2024/02/02の勉強会で発表されたものです。AWS CDKを使おうとしたら普通に悪戦苦闘した話 2024/02/02の勉強会で発表されたものです。
AWS CDKを使おうとしたら普通に悪戦苦闘した話 2024/02/02の勉強会で発表されたものです。
iPride Co., Ltd.
 
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものですAWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
iPride Co., Ltd.
 
AWS SAM入門 2024/01/26の勉強会で発表されたものです【アイ・プライド】
AWS SAM入門  2024/01/26の勉強会で発表されたものです【アイ・プライド】AWS SAM入門  2024/01/26の勉強会で発表されたものです【アイ・プライド】
AWS SAM入門 2024/01/26の勉強会で発表されたものです【アイ・プライド】
iPride Co., Ltd.
 
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
iPride Co., Ltd.
 
ChatGPTを用いてCDKを勉強
ChatGPTを用いてCDKを勉強ChatGPTを用いてCDKを勉強
ChatGPTを用いてCDKを勉強
iPride Co., Ltd.
 
OpenID Connectについて
OpenID ConnectについてOpenID Connectについて
OpenID Connectについて
iPride Co., Ltd.
 
画像生成AIの問題点
画像生成AIの問題点画像生成AIの問題点
画像生成AIの問題点
iPride Co., Ltd.
 
AI入門
AI入門AI入門
MVCになぞらえて理解するReact
MVCになぞらえて理解するReactMVCになぞらえて理解するReact
MVCになぞらえて理解するReact
iPride Co., Ltd.
 
AIについて学んだこと ~ 生成AIとは? ~
AIについて学んだこと ~ 生成AIとは? ~AIについて学んだこと ~ 生成AIとは? ~
AIについて学んだこと ~ 生成AIとは? ~
iPride Co., Ltd.
 
OAuth2.0について
OAuth2.0についてOAuth2.0について
OAuth2.0について
iPride Co., Ltd.
 
ゼロトラストについて学んだこと
ゼロトラストについて学んだことゼロトラストについて学んだこと
ゼロトラストについて学んだこと
iPride Co., Ltd.
 
Recoilライブラリを 触ってみる
Recoilライブラリを 触ってみるRecoilライブラリを 触ってみる
Recoilライブラリを 触ってみる
iPride Co., Ltd.
 
ReactでuseEffect()を減らしたい話
ReactでuseEffect()を減らしたい話ReactでuseEffect()を減らしたい話
ReactでuseEffect()を減らしたい話
iPride Co., Ltd.
 

More from iPride Co., Ltd. (20)

AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
AWS_Bedrock入門 このスライドは2024/03/08の勉強会で発表されたものです。
 
AWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作りAWS Lambdaと AWS API Gatewayを使ったREST API作り
AWS Lambdaと AWS API Gatewayを使ったREST API作り
 
AWS (Amazon Web Services) を勉強してみる その3 2024/03/01の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる その3 2024/03/01の勉強会で発表されたものです。AWS (Amazon Web Services) を勉強してみる その3 2024/03/01の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる その3 2024/03/01の勉強会で発表されたものです。
 
AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
AWS (Amazon Web Services) を勉強してみる おさらい 2024/02/16の勉強会で発表されたものです。
 
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
可用性・セキュリティを考慮して AWSでDrupalを構築する 2024/02/09の勉強会で発表されたものです。
 
AWSで全てのパブリックIPv4アドレスが有料になった件について 2024/02/09の勉強会で発表されたものです。
AWSで全てのパブリックIPv4アドレスが有料になった件について 2024/02/09の勉強会で発表されたものです。AWSで全てのパブリックIPv4アドレスが有料になった件について 2024/02/09の勉強会で発表されたものです。
AWSで全てのパブリックIPv4アドレスが有料になった件について 2024/02/09の勉強会で発表されたものです。
 
AWS CDKを使おうとしたら普通に悪戦苦闘した話 2024/02/02の勉強会で発表されたものです。
AWS CDKを使おうとしたら普通に悪戦苦闘した話 2024/02/02の勉強会で発表されたものです。AWS CDKを使おうとしたら普通に悪戦苦闘した話 2024/02/02の勉強会で発表されたものです。
AWS CDKを使おうとしたら普通に悪戦苦闘した話 2024/02/02の勉強会で発表されたものです。
 
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものですAWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
AWS (Amazon Web Services) を勉強してみる 2024/01/26の勉強会で発表されたものです
 
AWS SAM入門 2024/01/26の勉強会で発表されたものです【アイ・プライド】
AWS SAM入門  2024/01/26の勉強会で発表されたものです【アイ・プライド】AWS SAM入門  2024/01/26の勉強会で発表されたものです【アイ・プライド】
AWS SAM入門 2024/01/26の勉強会で発表されたものです【アイ・プライド】
 
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
Drupalでフォームの代わりにSPA (React) を表示させる話 2023/12/15の勉強会で発表されたものです。
 
ChatGPTを用いてCDKを勉強
ChatGPTを用いてCDKを勉強ChatGPTを用いてCDKを勉強
ChatGPTを用いてCDKを勉強
 
OpenID Connectについて
OpenID ConnectについてOpenID Connectについて
OpenID Connectについて
 
画像生成AIの問題点
画像生成AIの問題点画像生成AIの問題点
画像生成AIの問題点
 
AI入門
AI入門AI入門
AI入門
 
MVCになぞらえて理解するReact
MVCになぞらえて理解するReactMVCになぞらえて理解するReact
MVCになぞらえて理解するReact
 
AIについて学んだこと ~ 生成AIとは? ~
AIについて学んだこと ~ 生成AIとは? ~AIについて学んだこと ~ 生成AIとは? ~
AIについて学んだこと ~ 生成AIとは? ~
 
OAuth2.0について
OAuth2.0についてOAuth2.0について
OAuth2.0について
 
ゼロトラストについて学んだこと
ゼロトラストについて学んだことゼロトラストについて学んだこと
ゼロトラストについて学んだこと
 
Recoilライブラリを 触ってみる
Recoilライブラリを 触ってみるRecoilライブラリを 触ってみる
Recoilライブラリを 触ってみる
 
ReactでuseEffect()を減らしたい話
ReactでuseEffect()を減らしたい話ReactでuseEffect()を減らしたい話
ReactでuseEffect()を減らしたい話
 

Recently uploaded

【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
ARISE analytics
 
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
sugiuralab
 
ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT vol112 発表資料)
ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT  vol112 発表資料)ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT  vol112 発表資料)
ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT vol112 発表資料)
Takuya Minagawa
 
実体験に基づく、成功するスクラム vs 失敗するスクラム 何が違う? 2024年6月22日
実体験に基づく、成功するスクラム vs 失敗するスクラム 何が違う? 2024年6月22日実体験に基づく、成功するスクラム vs 失敗するスクラム 何が違う? 2024年6月22日
実体験に基づく、成功するスクラム vs 失敗するスクラム 何が違う? 2024年6月22日
Hideo Kashioka
 
気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす
気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす
気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす
Shinichi Hirauchi
 
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
Yuki Miyazaki
 
生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI
生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI
生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI
Osaka University
 
20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro
20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro
20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro
Seiya Shimabukuro
 
iMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptxiMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptx
kitamisetagayaxxx
 
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
Osaka University
 
Kotest を使って 快適にテストを書こう - KotlinFest 2024
Kotest を使って 快適にテストを書こう - KotlinFest 2024Kotest を使って 快適にテストを書こう - KotlinFest 2024
Kotest を使って 快適にテストを書こう - KotlinFest 2024
Hirotaka Kawata
 
なぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDD
なぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDDなぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDD
なぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDD
ssuserfcafd1
 

Recently uploaded (12)

【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
 
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
 
ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT vol112 発表資料)
ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT  vol112 発表資料)ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT  vol112 発表資料)
ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT vol112 発表資料)
 
実体験に基づく、成功するスクラム vs 失敗するスクラム 何が違う? 2024年6月22日
実体験に基づく、成功するスクラム vs 失敗するスクラム 何が違う? 2024年6月22日実体験に基づく、成功するスクラム vs 失敗するスクラム 何が違う? 2024年6月22日
実体験に基づく、成功するスクラム vs 失敗するスクラム 何が違う? 2024年6月22日
 
気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす
気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす
気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす
 
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
 
生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI
生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI
生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI
 
20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro
20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro
20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro
 
iMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptxiMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptx
 
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
 
Kotest を使って 快適にテストを書こう - KotlinFest 2024
Kotest を使って 快適にテストを書こう - KotlinFest 2024Kotest を使って 快適にテストを書こう - KotlinFest 2024
Kotest を使って 快適にテストを書こう - KotlinFest 2024
 
なぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDD
なぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDDなぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDD
なぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDD