useParams URLからparamsを受け取って、値を取得することは多々あると思います。 今回はそんな場面で使えるuseParamsをご紹介します。 いくつか方法があるかと思いますが、一番シンプルに値を取得できるやり方なのではないでしょうか。 実装方法 こちらがuseParamsの実装例です。公式ドキュメントよりお借りしました。 useParamsをインポートし、ファクション内で、変数に代入して、そのparamsの値を文字列に入れて表示させるといったものになっています。 import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter as Router, Switch, Route, useParams } from "react-router-dom"; function BlogPost() { let { slug } = useParams(); return <div>Now showing post {slug}</div>; } ReactDOM.render( <Router> <Switch> <Route exact path="/"> <HomePage /> </Route> <Route path="/blog/:slug"> <BlogPost /> </Route> </Switch> </Router>, node ); 参考

備忘録ついでに書いておきます。 無料で簡単にJSONを返してくれるAPIを作りたかったので、GAS（Google Apps Script）を利用してみました。全体的な流れとしては、weblioの英和辞書で、検索した単語の意味一覧をJSONで返すAPIを作り、それをローカルのJSから取得します。 GASでスクレイピング まずはGASへアクセスして新規プロジェクトを立ち上げましょう。そして、スクレイピングするために「Parser」というライブラリを導入します。「ライブラリの追加」から、スクリプトIDに「1Mc8BthYthXx6CoIz90-JiSzSafVnT6U3t0z_W3hLTAX5ek4w0G_EIrNw」で検索して追加することができます。 次に、スクレイピングする対象であるweblioの構造を見ていきます。 まず、URLに注目するとhttps://ejje.weblio.jp/content/(単語名)で、調べたい単語の意味一覧にに飛べるようです。 また、ページのソースを見ると、<div class=level0>のタグの中に意味が格納されていることが分かりました。 構造が大体わかったので、実際にスクレイピングしてみます。 function doGet(e) { // スクレイピング対象のurlを定義 let url = `https://ejje.weblio.jp/content/${e.parameter.word}`; // HTMLの取得 let html = UrlFetchApp.fetch(url).getContentText(); // 要素の抽出 let data = Parser.data(html) .from('<div class=level0>') .to('</div>') .iterate(); } ${e.parameter}でGETリクエスト時のパラメータを受け渡すことができます。渡す際はURLの末尾に?word=(検索したい単語)を追加してアクセスします。 html要素の抽出はUrlFetchApp.fetch(url).getContentText();で行い、同一のタグが複数ある場合はParser.data(html).from(タグ名開始).to(タグ名終了).iterate()で配列にまとめることができます。 スクレイピングしたデータをJSONにして返す 前項のdataではまだ、不要なタグや配列の形式のままになっているので、正規表現で不要部分を削除する作業と、データを後で扱いやすいようにするためにオブジェクト形式にしてキーを追加する作業を行いたいと思います。 まずは正規表現を使ってタグを消し、リストにまとめていきます。 const dataList = [] for (const content in data) { dataList.push(data[content].replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'')); } 次に、dataListをオブジェクトにして一つずつキーを追加していきます。 const newDataList = dataList.map((word, key) => ({key, word})); 最後に、JSON形式に変換して返します。 const json_data = JSON.stringify(newDataList); return ContentService.createTextOutput(json_data).setMimeType(ContentService.MimeType.JSON); 保存したら「新しいデプロイ」から「ウェブアプリ」を選択し、アクセスできるユーザーを「全員」にして保存してください。 すると、このようなURLが発行されます。 コピーして末尾に?word=englishを追加して飛んでみます。 無事、「english」の意味だけ抽出されました！（品詞名のノイズが入っていますが…） Javascriptから取得してみる 意味を抽出してJSONを返してくれるAPIは完成したので、今度はローカルのJSからフェッチしてみます。※下ではReactを使用していますが、関数部分は生のjsでも同じはずです const [answerList, setAnswerList] = useState([]); const [word, onChangeWord] = useState(''); const url = 'https://script.google.com/macros/s/xxxxx/exec'; // urlに検索したい単語の文字列を追加してjsonをフェッチする const fetchAnswer = async () => { const submitUrl = url + '?word=' + word; return fetch(submitUrl) .then(res => res.json()); } // 検索ボタンを押したときにfetchAnswer関数を実行し、リストに入れる const onPressFetch = () => { (async() => { setAnswerList(await fetchAnswer()); })(); } // 省略 <View> <Input onChangeText={onChangeWord} value={word} /> <Button title="検索" onPress={onPressFetch} /> </View> Inputに入力された文字をパラメータとしてGASに渡し、GASが返却したJSONをfetchAnswerでフェッチしています。フェッチしたものをリストに入れて良い感じに表示すると下のようになりました！

どうもこんにちは。suginokoです。暑いですね。夏ですね。 今回は勉強がてら作った『質問スロット』をただ作ったよ、っていう記事です。(技術的には大したことない・・・) 勉強がてら作りたかった 普段 弊社 のwebフロントのレギュレーションとしてReactを使って開発を行っておりますが、Reactに限らず他のフレームワーク(以下FW)使ってみたいとか、他の技術も使ってみたいなということで最初はReactのFWであるNextJSを選定。GASについては存在を上司に教えてもらったこともありますし、使ってみよう！ということで。 また、弊社ではたまに、社員をごちゃまぜにしてフリートークを行う時間が設けられることがあったりするんで、『質問スロット』使えばコミュ障な私でも会話できるかな・・・？とか考えた結果生まれたものです。 開発環境 Next.js v10.2.0 React v17.0.2 TypeScript v4.3.2 GAS(Google Apps Script) v8 それぞれの専門用語等 Next.js Google Apps Script（GAS）とは？できることから始め方までの基本 GASの設定 GASでのやりたいこととして以下のことを設けました。 * Google スプレッドシート使って質問項目を記入する * 質問カテゴリはシートごとに分ける * 質問カテゴリを選択できる形にしたいので、それぞれの質問シートのデータは配列で取得したい スプレットシートに質問事項を書く こんな感じで書いて、App Scriptに紐づけて連携し、GASもスクリプトエディタで質問事項を取得するスクリプトを書いていきます。 GASを書く questionFunction.gs ※v8なのでconstやらletやら使って書いてもよかったと思います。(NextJSとので連携でうまくいかなくてそのままにしてた・・) GASのAPIにcallbackというqueryを入れた時はjsonpで取得できる形です。(NextJSでは必要なかったけど) function doGet(e) { var callback = e.parameter.callback; var sheetData = getSheetData(); var out = null; if (callback) { var text = callback + '(' + (JSON.stringify(sheetData, null, 2)) + ')'; out = ContentService.createTextOutput(text); out.setMimeType(ContentService.MimeType.JAVASCRIPT); } else { out = ContentService.createTextOutput(); out.setMimeType(ContentService.MimeType.JSON); // JSONPをセット out.setContent(JSON.stringify(sheetData)); } return out; } function getSheetData () { var sheets = SpreadsheetApp.getActiveSpreadsheet().getSheets(); var arr = []; for (let i = 0; i < sheets.length; i++) { var name = sheets[i].getName(); var sheet = SpreadsheetApp.getActive().getSheetByName(name); var rows = sheet.getDataRange().getValues(); var keys = rows.splice(0, 1)[0]; var questions = rows.map((row) => { let obj = {}; row.map((item, index) => { obj[String(keys[index])] = String(item); }) return obj; }); var data = { sheetTitle: name, questions }; arr.push(data) } return arr; } getSheetData()でシートの情報を取得します。 apiを叩くときにGETメソッドだとdoGet関数が動きます。(POSTだとdoPost()) ここではスプレットシートのデータをJSONで受け取る形で作りました。 こちらでデプロイをすると「ウェブアプリ」というURL(APIとして使う)が出力されるのでこちらを使います。 NextJSの設定 fetchを使って取得します。 NextJSの場合はSSG(Static Site Generation＝静的サイト生成)で作れるので、この仕組みを利用して取得します。 (Reactの場合はuseEffectで取得するしかなさそうな感じだったな。。) SSGを実現するためにgetStaticPropsというものを使います。 getStaticPropsというのはこのアプリケーションをビルドするタイミングでデータを取得しに行って、getStaticPropsから送られるpropsを使って、データを取得していくものです。 const QuestionSlot: FC = memo((props) => { // getStaticPropsで返されたpropsを受け取ります ... }) export const getStaticProps: GetStaticProps<any> = async () => { 　// GASのデプロイ時に生成されるURL 　// redirect: 'follow'入れないと取得できないっぽい const res = await fetch('https://script.google.com/hogehoge/exec', { redirect: 'follow' }) const json = await res.json() return { props: { json }, revalidate: 300, // 5分に1回更新 } } 受け取ったJSONデータは(少し内容は省略) { "json": [ { "sheetTitle": "仕事編", "questions": [ { "question": "今の仕事で面白いと思っていることはなんですか？" }, { "question": "これからやってみたい仕事はなんですか？" }, { ] }, { "sheetTitle": "プライベート編", "questions": [ { "question": "最近の休みの日は何をして過ごしていますか？" }, { "question": "プライベート何が一番やってて楽しいですか？" }, ] } ] } 完成したもの ※デザインとかうまくできたらよかったのですが・・・ド下手な絵ですみません・・ おまけ NextJSではなく、Reactを使う場合(NextJSもReactベースだけども)はJSONP使わないと取得できなそうだな・・という感じでした。 (例えば初回useEffect時にAPI叩くとCROSでエラーになる) JSONPだとセキュリティ的によろしくないので、うーん・・・と考えさせられますし、TypeScript使っているので、それで弾かれているんでは？と試行錯誤しました。 また、getStaticPropsでAPI取得するとNetworkに繋いだAPIのURL出ないんですね。これはNextJSの素晴らしいところな気がします。 案件でGAS使うことはないかな？というところはありますが、個人で勉強がてら開発する分には色々実験できてよかったかなと思いました。

皆さんこんにちは！ 梅雨が明け、暑さは最高潮ですね。 僕は夏のじめじめがとても嫌いで、冬の方が断然好きですね。 前置きはさておき 今回はReactの環境構築のテンプレートをご紹介するので、ぜひReactで開発を行うことが多いという方やこれからReactの環境構築を行いたい、またReactの環境構築を忘れたという方々すべてにコピペだけで環境構築を行えますので、ぜひストックして頂けると幸いです。 特に詳しい説明などはしませんのでご了承ください。 それでは、コピペだけで環境構築を行っていきましょう！ プロジェクトの作成（TypeScript付き） npx create-react-app app-name --template typescript Prettier導入 npm i -D prettier package.json { // 省略 "prettier": { "printWidth": 120, "semi": true, "singleQuote": false, "tabWidth": 2, "trailingComma": "all" } } Material-ui導入 npm i @material-ui/core @material-ui/icons @material-ui/styles Tailwindcss導入 npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 npm install @craco/craco package.json "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", } touch craco.config.js craco.config.js module.exports = { style: { postcss: { plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, } npx tailwindcss-cli@latest init tailwind.config.js module.exports = { // purge: [], purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } src/index.css @tailwind base; @tailwind components; @tailwind utilities; /* Tailwindcssを導入すると、hタグのフォントサイズが変わるのを防ぐ */ h1 { font-size: 48px; line-height: 1; } h2 { font-size: 36px; line-height: 1.333; } h3 { font-size: 24px; line-height: 1; } h4, h5, h6 { font-size: 16px; line-height: 1.5; } これだけでReactの環境構築は完了です！ 下の番外編ではRouterの設定やMaterial-uiのテーマ設定などを行います。 興味のある方、導入したい方は引き続きご覧ください。 番外編 Routerの設置 npm i @types/react-router-dom touch ./src/history.js ./src/ScrollToTop.tsx ./src/Routing.tsx src/history.js import { createHashHistory } from "history"; // OR import { createBrowserHistory } from "history"; export default createBrowserHistory(); // OR export default createHashHistory(); createBrowserHistoryとcreateHashHistoryはお好きな方をお選びください。 特に理由が無い方は、createBrowserHistoryを選ぶと良いでしょう。 ページ遷移の際にスクロール位置がトップに行くように設定 src/ScrollToTop.tsx import { withRouter } from "react-router-dom"; import { useEffect } from "react"; import * as H from "history"; type Props = { history: H.History; }; const ScrollToTop: React.FC<Props> = ({ history }) => { useEffect(() => { const unlisten = history.listen(() => { window.scrollTo(0, 0); }); return () => { unlisten(); }; }, [history]); return null; }; export default withRouter(ScrollToTop); src/Routing.tsx import { Router, Route, Switch } from "react-router-dom"; import history from "./history"; import ScrollToTop from "./ScrollToTop"; const Routing: React.FC = () => { return ( <Router history={history}> <ScrollToTop /> <Switch> <Route exact path="/" component={Home} /> </Switch> </Router> ); }; export default Routing; src/App.tsx import Routing from "./Routing"; const App: React.FC = () => { return ( <div> <Routing /> </div> ); }; export default App; Material-uiのテーマ設定 touch ./src/Theme.ts src/Theme.ts import { createMuiTheme } from "@material-ui/core/styles"; export const Theme = createMuiTheme({ palette: { primary: { main: "#2196f3", }, secondary: { main: "#009688", }, }, }); src/App.tsx import { ThemeProvider } from "@material-ui/core"; import Routing from "./Routing"; import { Theme } from "./Theme"; const App: React.FC = () => { return ( <div> <ThemeProvider theme={Theme}> <Routing /> </ThemeProvider> </div> ); }; export default App; 環境変数 touch .env /.env # development REACT_APP_HOST = "localhost" # production REACT_APP_HOST = "www.example.com" example.js console.log(process.env.REACT_APP_HOST) ビルド時の注意点 本番環境の構築を行う際に、ページがが真っ白になる場合があります。 その理由は2つあり、ビルドしたファイルが他のファイルを読み取る際に絶対パスになっている、もしくはヒストリー（history）の設定に不備がある。 なので、以下のどちらかの方法を試してみてください。 package.json { "homepage": "./", } src/history.js import { createHashHistory } from "history"; export default createHashHistory(); このようにしてReactの環境構築をコピペだけで行うことができます。 結構説明を端折ったので、もし説明して欲しい部分があればコメントで質問してください。 以上、「【２０２１年最新版】React＋TypeScript＋Prettier＋Material-ui＋Tailwindcssの環境構築をコピペだけで行う」でした！ Thank you for reading

Reactで作ったSPAのポートフォリオをFirebase Hostingでデプロイしたので、その方法をメモ firebaseのプロジェクトを作成する まず、Firebaseのwebサイトからプロジェクトを作成します。 1.ログイン 以下のようにログインが求められるので、Googleアカウントでログインします。 2.プロジェクト作成 ログイン後にプロジェクト一覧のページが表示されるので、「プロジェクトを追加」ボタンから新規プロジェクトを作成します。 ・プロジェクト名 - 自分の好きな名前で大丈夫です。 ・プロジェクトID - 他のプロジェクトと被ってはいけないので、入力したIDが既に存在している場合はプロジェクト名から自動的にサジェストされます。 firebaseCLIのインストールと設定 1.コマンドライン上でfirebaseCLIのインストールを行います。 $ npm install -g firebase-tools 2.インストールできたら、CLIでfirebaseへログインします。 $ firebase login このコマンドを実行すると、ブラウザが立ち上がってfirebaseのログイン画面が表示されるのでログインします。 Reactアプリを作成する 1.Node.jsのインストール Reactを使うためにはNode.jsがインストールされている必要があります。 ・Windowsの方はこちらの記事が参考になるかと思います。 ・MacでHomebrewが入っている場合は以下のようにインストールできます。 $ brew install nodejs # nodeのバージョン確認 $ node -v # npmのバージョン確認 $ npm -v npmとはNode.jsのパッケージ管理ツールであり、Node.jsをインストールすると自動的にnpmもインスロールされます。 先ほどのコマンドでNode.jsとnpmのバージョンが表示されれば、正常にインストールできています。 2.パーケージのインストール npmを用いてcreate-react-appというパッケージをインストールします。 $ npm install -g create-react-app ここまでできたらReactアプリの作成準備完了です。 3.Reactアプリの作成 以下のコマンドでReactアプリを作成します。 ここでのアプリ名は必ずしもfirebaseで作成したプロジェクト名と一致している必要はありません。 $ npm create-react-app アプリ名 ターミナルにHappy Hacking!と表示されていればアプリが作成できています。 cd アプリ名　で作成したアプリのディレクトリへ移動し、以下のようにstartコマンドを実行します。 $ npm start 以下のようなReactのロゴが表示されているページが表示されれば正常にローカルサーバーが起動できています。 これでReactアプリの作成は完了しました。 FirebaseHostingへデプロイする 1.作成したReactアプリをビルドする ターミナルで以下のコマンドを実行します。 $ npm run build アプリのディレクトリ内にbuildというフォルダが追加されていればOKです。 2.firebaseの初期設定 ターミナルで以下のコマンドを実行します。 $ firebase init ターミナル上で色々質問されるので、以下のように答えます。 Which Firebase CLI features do you want to setup for this folder Hosting: Configure and deploy Firebase Hosting sitesをスペースで選択してenter Please select an option Use an existing projectを選択 Select a default Firebase project for this directory本記事冒頭部分で作成したfirebaseプロジェクトのIDを選択 What do you want to use as your public directory? buildと入力する Configure as a single-page app (rewrite all urls to /index.html)?作成したアプリはSPAなのでyを入力 Set up automatic builds and deploys with GitHub?yesにするとgithub上でマージした時などに自動的にデプロイしてくれるようです。どちらを選んでもOKです。 File build/index.html already exists. Overwrite?yesを選択すると勝手に新しくindex.htmlを作って上書きしてくれます。nを入力 以上で設定は終わりです。あとはデプロイするだけです。 3.firebaseにデプロイ デプロイするために必要なのはコマンド1つだけです。 $ firebase deploy 実行後、ターミナルに表示されるHosting URLをブラウザで開くとデプロイされたReactアプリが確認できます。 (projectIDの部分が、作成したプロジェクトのIDになっていると思います。) === Deploying to 'projectID'... ...(省略)... ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/projectID/overview Hosting URL: https://projectID.web.app 参考にさせていただいた記事 ReactでFirebase HostingとFirestore - Qiita Node.jsをインストールする - Qiita

「Astro」について触れてみる Astroについての記載が全くなかったので、自分なりに公式のページを見ての内容をまとめる。 今後も何か触れる機会があれば記述していきたい。 詳細については公式ページへ ※あくまでもベータ版とのこと Astroとは ●特徴 Javascriptのフレームワークを組み合わせることやHTML＋Javascriptを組み合わせることができる ビルドしたページはhtmlに変換されるためJavascriptを使用しない オンデマンドコンポーネントのため、Javascriptが必要なページについてもアクセス時に読み込まれる TypescriptやCSS,CSS Modules,Sassなどのnpmパッケージをサポートしている SEO対応によりシンジケーションの手間が省ける ●個人的にいいなぁと思った点 ReactやVueにも対応しているため、フレームワークからフレームワークへの技術移行が容易になる ポートフォリオを作成する際にReactもVueもかけますというアピールが一つのプロジェクトで行える HTMLのみになるため初期読み込みが高速になるよう（どれぐらい早いのかは不明） 様々なJavascriptに対応しているとプロジェクトへの入り口が広くなる コンポーネントは技術上位者が作成し、初心者はHTMLのみでページを作成するなど役割分担がしやすい snowpackを使用したモジュールバンドル 実際に触ってみる ●動作環境 Macbook:Big Sur version11.4 Node.js:v14.17.0 npm:6.14.13 ●構築 まずは公式ページに記載されている通りに実行する 今回は「qiitaAstro」のプロジェクト名で進めていく。 # create your project >> mkdir SampleAstro >> cd SampleAstro >> npm init astro npx: installed 11 in 2.21s Welcome to Astro! (create-astro v0.5.0) If you encounter a problem, visit https://github.com/snowpackjs/astro/issues to search or file a new issue. > Prepare for liftoff. > Gathering mission details... ? Which app template would you like to use? › - Use arrow-keys. Return to submit. ❯ Starter Kit (Generic) Blog Documentation Portfolio [Starter Kit]を選択していく ? Which frameworks would you like to use? › Instructions: ↑/↓: Highlight option ←/→/[space]: Toggle selection a: Toggle all enter/return: Complete answer ◉ Preact ◉ React ◉ Svelte ◉ Vue 使うフレームワークは全てを選択するため、全て選択してEnterを押下 ✔ Which frameworks would you like to use? › Preact, React, Svelte, Vue > Copying project files... ✔ Done! Next steps: 1: npm install (or pnpm install, yarn, etc) 2: git init && git add -A && git commit -m "Initial commit" (optional step) 3: npm start (or pnpm, yarn, etc) To close the dev server, hit Ctrl-C Stuck? Visit us at https://astro.build/chat 必要なファイルが用意されたら[Next steps]に記載されている通りにコマンドを実行するのもよし。 今回はドキュメント通りに以下のコマンドを実行していく。 # install your dependencies >> npm install # start the dev server and open your browser >> npm start ・・・（省略）・・・ [HH:MM:SS] [snowpack] Ready! [dev server] Server started in 16197ms. [dev server] Local: http://127.0.0.1:3000/ [HH:MM:SS] [snowpack] watching for file changes... 上記の指示通りにhttp://localhost:3000を開くと実行画面が表示される。 ●フォルダ構成 上記で構築した場合のフォルダ構成になります。 ├── node_modules ├── public │   ├── assets │   │   └── logo.svg │   ├── favicon.svg │   ├── robots.txt │   └── style │   ├── global.css │   └── home.css ├── src │ ├── components │ │   ├── PreactCounter.jsx │ │   ├── ReactCounter.jsx │ │   ├── SvelteCounter.svelte │ │   ├── Tour.astro │ │   └── VueCounter.vue │ └── pages │ └── index.astro ├── .gitignore ├── .npmrc ├── astro.config.mjs ├── package-lock.json ├── package.json └── README.md ●各コンポーネント プロジェクトの準備時点で各フレームワークでのコンポーネントでのカウントアップが作成されているので見ていく components/PreactCounter.jsx import { h } from 'preact'; import { useState } from 'preact/hooks'; export default function PreactCounter({ children }) { const [count, setCount] = useState(0); const add = () => setCount((i) => i + 1); const subtract = () => setCount((i) => i - 1); return ( <div id="preact" class="counter"> <button onClick={subtract}>-</button> <pre>{count}</pre> <button onClick={add}>+</button> </div> ); } components/ReactCounter.jsx import React, { useState } from 'react'; export default function ReactCounter({ children }) { const [count, setCount] = useState(0); const add = () => setCount((i) => i + 1); const subtract = () => setCount((i) => i - 1); return ( <div id="react" className="counter"> <button onClick={subtract}>-</button> <pre>{count}</pre> <button onClick={add}>+</button> </div> ); } components/SvelteCounter.svelte <script> let count = 0; function add() { count += 1; } function subtract() { count -= 1; } </script> <div id="svelte" class="counter"> <button on:click={subtract}>-</button> <pre>{ count }</pre> <button on:click={add}>+</button> </div> vue/components/VueCounter.vue <template> <div id="vue" class="counter"> <button @click="subtract()">-</button> <pre>{{ count }}</pre> <button @click="add()">+</button> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const count = ref(0) const add = () => count.value = count.value + 1; const subtract = () => count.value = count.value - 1; return { count, add, subtract } } } </script> components/Tour.astro --- import { Markdown } from 'astro/components'; --- <article> <div class="banner"> <p><strong>?‍? Seasoned astronaut?</strong> Delete this file. Have fun!</p> </div> <section> <Markdown> ## ? Project Structure Inside of your Astro project, you'll see the following folders and files: ``` / ├── public/ │ ├── robots.txt │ └── favicon.ico ├── src/ │ ├── components/ │ │ └── Tour.astro │ └── pages/ │ └── index.astro └── package.json ``` Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. Any static assets, like images, can be placed in the `public/` directory. </Markdown> </section> <section> <h2>? Want to learn more?</h2> <p>Feel free to check <a href="https://github.com/snowpackjs/astro">our documentation</a> or jump into our <a href="https://astro.build/chat">Discord server</a>.</p> </section> </article> <style> article { padding-top: 2em; line-height: 1.5; } section { margin-top: 2em; display: flex; flex-direction: column; gap: 1em; max-width: 70ch; } .banner { text-align: center; font-size: 1.2rem; background: var(--color-light); padding: 1em 1.5em; padding-left: 0.75em; border-radius: 4px; } pre, code { font-family: var(--font-mono); background: var(--color-light); border-radius: 4px; } pre { padding: 1em 1.5em; } .tree { line-height: 1.2; } code:not(.tree) { padding: 0.125em; margin: 0 -0.125em; } </style> ●コンポーネントを使用したページについて 以下のファイルにてそれぞれのコンポーネントをインポートしてページを作成している pages/index.astro --- // Component Imports import Tour from '../components/Tour.astro'; // You can import components from any supported Framework here! import PreactCounter from '../components/PreactCounter.jsx'; import ReactCounter from '../components/ReactCounter.jsx'; import SvelteCounter from '../components/SvelteCounter.svelte'; import VueCounter from '../components/VueCounter.vue'; // Component Script: // You can write any JavaScript/TypeScript that you'd like here. // It will run during the build, but never in the browser. // All variables are available to use in the HTML template below. let title = 'My Astro Site'; // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{title}</title> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="stylesheet" href="/style/global.css"> <link rel="stylesheet" href="/style/home.css"> <style> header { display: flex; flex-direction: column; gap: 1em; max-width: min(100%, 68ch); } </style> </head> <body> <main> <header> <div> <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo"> <h1>Welcome to <a href="https://astro.build/">Astro</a></h1> </div> </header> <Tour /> <!-- - You can also use imported framework components directly in your markup! - - Note: by default, these components are NOT interactive on the client. - The `:visible` directive tells Astro to make it interactive. - - See https://docs.astro.build/core-concepts/component-hydration/ --> <PreactCounter client:visible /> <ReactCounter client:visible /> <SvelteCounter client:visible /> <VueCounter client:visible /> </main> </body> </html> ●レンダーする設定 以下のファイルにてAstroプロジェクトについての設定を保持している 下記の[renderes]に記載されているフレームワークについてレンダリングされるようです。 astro.config.mjs export default { // projectRoot: '.', // Where to resolve all URLs relative to. Useful if you have a monorepo project. // pages: './src/pages', // Path to Astro components, pages, and data // dist: './dist', // When running `astro build`, path to final static output // public: './public', // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing. buildOptions: { // site: 'http://example.com', // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs. sitemap: true, // Generate sitemap (set to "false" to disable) }, devOptions: { // port: 3000, // The port to run the dev server on. // tailwindConfig: '', // Path to tailwind.config.js if used, e.g. './tailwind.config.js' }, renderers: [ "@astrojs/renderer-preact", "@astrojs/renderer-react", "@astrojs/renderer-svelte", "@astrojs/renderer-vue" ], }; 感想について 個人開発ではとても良いかと思いました。 ポートフォリオを作る上でもReactが人気ですが、Vueの方がとっつきやすさはあると思うので、最初のうちはVueでいくつか作った後にReactにも挑戦をしたポートフォリオを作成することもできますし、snowpackの恩恵で開発時の待ち時間も減らせることでしょう。 まだまだ、ベータ版であり正式リリースについてはまだ先のようですが、これからの個人開発にはastroをしばらく使用しながら腕を磨いていきたいと思います。 そろそろ何かサービスを作って運用してみたいとも思っていますので、astroで作ったプロジェクトでもチャレンジしてみたいと思います。