Tailwind CSSにおけるHTMLのコンポーネント化とCSSのコンポーネント化

2024/03/18 7 users CSS Tailwind CSS HTML コンポーネント化

Tailwind CSSにおいて、スタイルの組み合わせを抽象化したいと考えたとき、対処としてはいくつかの方法が考えられる。 もっとも一般的なのは、コンポーネントやパーシャルとして、クラス属性値とHTMLをセットで抽出する方法。 <template> <div> <img class="rounded" :src="img" :alt="imgAlt" /> <div class="mt-2"> <d... 続きを読む

【Vue.js】defineProps はなぜ import 文を書かずに使えるのか【マクロ】

2024/03/07 9 users Vue マクロ script import ref

<script setup> import { ref, computed } from "vue"; const props = defineProps({ count: Number }); const double = computed(() => props.count * 2); const message = ref("Hello, Vue.js"); </script> <template> <div> <p>{{ message }}</p> <p>{{ props.count }}</p> <p>{{ double }}</p> </div> </template> ... 続きを読む

Next.js 13 Template と Layout の使い分け

2023/09/06 14 users layout 再レンダリング 画面遷移 Next.js 複数

Next.js 13には、LayoutとTemplateというよく似た機能が存在します。 この記事では、それぞれの特徴と使い分け方についてまとめてみました。 Layoutとは？ Layoutは複数のページに渡って共有されるUIのことを指します。 特徴としては画面遷移が行われた際に、その状態を保持し、再レンダリングは行われません。またLayou... 続きを読む

写真選択アプリをリリースしました！【個人開発】 - Qiita

2023/05/01 26 users Qiita favicon.ico IMG SRC ユーザ

写真選択アプリをリリースしました！ https://奇跡の一枚.app いい写真を選んでもらうサービスです。写真を選んでもらうとメールにいい写真が届きます。 課金をすることで特定のユーザに選択してもらうことができます(予定) ソースコードです <template> <v-row> <v-col class="text-center"> <h1><img src="favicon.ico... 続きを読む

Maud, a macro for writing HTML

2022/06/07 13 users language github.com Hello HTML

A macro for writing HTML html! { h1 { "Hello, world!" } p.intro { "This is an example of the " a href="https://github.com/lambda-fairy/maud" { "Maud" } " template language." } } Maud is an HTML template engine for Rust. It's implemented as a macro, html!, which compiles your markup to specialized... 続きを読む

海底に住むワームが金属性の牙を持つ理由とは？

2022/04/27 12 users ワーム 海底 Catalyst 金属性 獲物

BloodwormやGlyceraとして知られる環形動物の一部は、長さ1mmほどの小さい銅製の牙を使って獲物を捕らえ、まひ毒を注入することで知られています。これらの種がなぜこのような牙を持つのか、研究により新たな知見がもたらされました。 A multi-tasking polypeptide from bloodworm jaws: Catalyst, template, and copoly... 続きを読む

Pug を HTML に移行して .vue ファイル の template タグ内に ESLint を効かせた話 - SMARTCAMP Engineer Blog

2020/09/03 11 users SaaS Vue SFC Pug eslint

こんにちは！スマートキャンプでインサイドセールスに特化した SaaSを作っているエンジニアの中川です。 上記プロダクトのフロントエンドは Vue.js を用いて開発しているのですが、 その中で SFC 内のtemplateタグで使用していた Pug をやめて HTML に移行した件をこの記事ではお話しようと思います。 また、実際にtempl... 続きを読む

Template String Types でパス文字列を解析してクエリする - Object.create(null)

2020/09/01 12 users Object.create Query foo null 感じ

※この記事に含まれる内容は TypeScript 4.1 のプレビュー版のものです. 今後仕様が変わり動かなくなる可能性もありますのでご注意ください. 話題の template string types で早速遊んでみます. ゴール .foo[1].bar といった形のパス文字列を型レベルで解析してクエリしちゃいます. こういう感じ: type R1 = Query<{ foo:... 続きを読む

エラーは出ないけど…何か変？？Vue.jsでやりがちな「サイレント・ミス」（ロジック編） - ICS MEDIA

2020/07/16 355 users ICS MEDIA Vue.js エラー Props CLI

Vue.jsは初学者にもとても手厚いサポートを提供してくれるフレームワークです。 たとえば、以下のコードで「リセット」ボタンを押すと「propsのcountは子コンポーネントから変更すべきではない」とわかりやすくエラーを表示してくれます。 <template> <div class="CountViewComponent"> カウント={{count}} <button @cli... 続きを読む

v-onから辿るVueの細道 - メドピア開発者ブログ

2019/09/18 12 users Vue 細道 ハムストリングス 小宮山 探求

みなさんこんにちは、フロントエンドピラティストの小宮山です。 しばらく休養していたランニングを再開し、ハムストリングスの探求に勤しんでいるのが近況です。 v-onの不思議 templateでのv-onの書き方にはいくつかバリエーションがあります。 なんとなく書いてもVueがいい感じに解釈してくれてしまうので普段はあまり... 続きを読む

もうprettierで消耗したくない人へのvueでのeslint設定 - クソ雑魚エンジニアのメモ帳

2019/03/24 71 users Vue lint Prettier package.json

タイトル通り。vscodeとvuejsを使ってのlintの設定をprettierなしでやってみた。 tl;dr 環境 問題点 手順 .vueの構文チェックその１ vscode上での自動フォーマット .vueの構文チェックその２ rulesをカスタマイズ <template>のカスタマイズ <script>をカスタマイズ まとめ。 おまけ tl;dr 対象ファイルとpackage.jsonと.... 続きを読む

Vue.jsのrender関数(JSX)に思いを馳せた結果 - じまろぐ

2018/12/18 18 users jsx Vue Vue.js じまろぐ 主流

この記事はVue.js #2 Advent Calendar 2018の18日目の記事です。 Vue.jsを使った開発では、特別な理由がない限り.vueファイルで記述するのが主流かと思います。.vueの場合、テンプレートの定義は<template>で行うことになるでしょう。 自分も何の疑問が湧くことなく<template>を使っていましたが、ある日ふとrender関数... 続きを読む

Vue.js + Vuex + TypeScript ファーストインプレッション - Shin x Blog

2018/11/15 114 users Vuex サーバサイド Vue.js Shin x 前提

日頃は、サーバサイドの開発が主なのですが、その UI として フロントエンドの開発も行うことがあります。最近話題の Vue.js を試してみたのでその感想などを。 前提 これまで利用した構成 Vue.js 構成 雑感 ちょっと試す、がすぐにできる vue-cli が楽 vue ファイル template ディレクティブ scoped css vue-router / V... 続きを読む

Vue.jsで style scoped な単一ファイルコンポーネントのcssをオーバーライドする

2018/08/14 16 users 単一ファイルコンポーネント ＳＬＯＴ Vue.js Box

https://medium.com/vuejs-tips/override-scoped-css-de4275119b87 単一ファイルコンポーネントを作る時、 style scoped として CSSの影響範囲をコンポーネント内に収めるわけですが、 コンポーネント外部から内部のスタイルを変更したい場合があります。 <template> <div class="box"> <div class="message"> <slot></s... 続きを読む

Vue Native

2018/06/13 274 users Container Apps text Message

Vue Native - The Progressive JavaScript Framework For Mobile Apps< template > < view class = "container" > < text class = "text-color-primary" > {{message}} </ text > </ view > </ template > 続きを読む

Big Sky :: golang の html/template でレイアウトを扱う方法

2018/04/18 36 users golang temp HTML Data content

golang の html/template について書かれたブログ等を色々見ていると、みんなレイアウトとコンテンツの分離に苦労している感があったのでどうやるか書いておきます。 t.ExecuteTemplate(w,  "content" , data) Go の html/template はテンプレートの名称を指定して ExecuteTemplate を実行します。しかし html/temp... 続きを読む

Vue2.x系のハマりどころ templateとコンパイラを完全解説するよ

2017/03/08 225 users コンパイラ

まえおき Vue2.xでは仮想DOMが使われるようになりました。それに伴い、 Vue用のテンプレート を 仮想DOMをレンダリングするための関数 に変換する という処理を コンパイル時に行ってくれる 仕組みが組み込まれています。 そして、お手軽にVueを試したい人、プロダクトにVueを使いたい人、コンポーネント志向でアトミックに実装したい人など、様々な用途に応じたテンプレートの書き方(＆コンパイル... 続きを読む

乾汽船、中期経営計画に面白タイトルを付けちゃう系企業の仲間入り : 市況かぶ全力２階建

2017/02/13 38 users parts.net パク 市況かぶ全力２階建 策定 仲間入り

はじめての中期経営計画ってタイトル面白いなｗ — バク (@bakubaku776) 2017年2月13日 2017/02/13 15:00 乾汽船　 「はじめての中期経営計画～今を生きる、明日を生きる～」策定について http://v4.eir-parts.net/v4Contents/View.aspx?template=ir_material&sid=66170&code=9308 創業19... 続きを読む

template in C - KMC活動ブログ

2015/12/09 9 users エキサイティン KMC活動ブログ hatsusato 副題

2015-12-09 template in C この記事はKMC Advent Calendar 2015 - Adventar 9日目の記事です。 8日目の記事は、sio_puyoさんの超！エキサイティン！(副題:12月8日は何の日？) - KMC活動ブログでした。 はじめに KMC 4回生のhatsusatoです。 今日はC言語の話です。 最近Cをたくさん書いている*1のですが、Cを書いてい... 続きを読む

Microsoft Edge の変更ログ - Windows 10 Insider Preview Build 10547 - Browser

2015/09/21 18 users Browser Element EdgeHTML 変更 更新

2015-09-21 Microsoft Edge の変更ログ - Windows 10 Insider Preview Build 10547 Microsoft Edge Windows 何故か今回も変更が盛りだくさんです。 いつもの参照元 Release version 10547 : Microsoft Edge Dev EdgeHTML の更新 <template> element <p... 続きを読む

react-native - ReactNativeでgulpとreact-jadeを使ってみる - Qiita

2015/04/15 31 users react-native Qiita Gulp Xtend

'use strict'; global.React = global.require('react-native'); let xtend = require('xtend'); let {View, Text} = React; let template = require('./template'); let styles = React.StyleSheet.create(require(... 続きを読む

Xslate の mark_raw は template に書かない - blog.64p.org

2015/03/20 17 users Xslate controller Model 事案 HTML

Xslate の mark_raw は template 側では使わずに、Controller ないし Model で使って欲しい。 ある文字列が、HTML として処理すべきものかどうかは、サーバー側で判断すべき事案であって、マークアップエンジニアが判断すべき事項ではないから、というのが大きい。 「タグがうまく入力できないんですけど」というディレクターからの起票によって、それをマークアップエンジニ... 続きを読む

Web Components(+Virtual DOM)ラッパー書いてみた ::ハブろぐ

2014/10/30 52 users Virtual DOM ハブろぐ jsx React ラッパー

Concept 『Web Components with Virtual DOM』 ahomu/Claylump Motivation Web Components ラッパーを書いてみたいなーと思った React の JSX がイマイチ気にくわない（JSとHTMLを一緒にするなオジサン） <template> に書いた内容を Virtual DOM 生成器に変換すればいいんじゃね というような所か... 続きを読む

天使やカイザーと呼ばれて » オレ流AngularJSを使った設計ポリシー

2014/10/12 214 users カイザー directive 天使 controller 実装

オレ流AngularJSを使った設計ポリシー Chrome MySQL Adminでは、AngularJSを使って実装を行っています。Chrome appsでは、何らかのMVC Frameworkの利用が勧められています。 AngularJSは、Controller、Directive、Template、Serviceなど、いくつかの部品群を組み合わせてアプリケーションを構成することになります。そ... 続きを読む

golang で sql, template, http リクエストのパフォーマンスメトリクスとるライブラリ作った #isucon - sonots:blog

2014/09/29 68 users SQL isucon golang sonots http

2014年09月29日11:45 カテゴリ golang で sql, template, http リクエストのパフォーマンスメトリクスとるライブラリ作った #isucon ruby とかでは newrelic を使うと HTTP リクエストを捌くのにかかった時間に加えて、DBアクセスにかかった時間、テンプレートレンダリングにかかった時間、I/O にかかった時間(外部サービスへの HTTP リク... 続きを読む