2020-01-01から1年間の記事一覧
今回、THREE.jsを使用した3Dオブジェクトやpixi.jsを使用した2Dオブジェクトなどの開発時に利用したdat.GUIについてのやり方を紹介します。 今回使用するもの NPM version: 0.123.0 www.npmjs.com version: 0.7.7 www.npmjs.com CDN https://cdnjs.cloudflar…
vue-vcliの作成 @vue/cliをインストール 参考 cli.vuejs.org npm install -g @vue/cli # OR yarn global add @vue/cli プロジェクトを作成 参考 cli.vuejs.org コマンドで作成したい場合 vue create hello-world GUIベースで作成したい場合 vue ui を実行す…
フロントエンドの開発時にESLintやPrettierなどのnpmパッケージを使うほど大きなプロジェクトではない（もしくは使うことができない）環境でも簡単に使用できるwebサービス一覧です。 コード変換 Prettier prettier.io jsのコードの整形を行なってくれるサー…
「storybook + tailwind + nuxt one webpack config」を参考に「storybook + tailwind + nuxt」の環境構築を行ったときのメモです。 dev.to 使用している技術 Nuxt.js Vue.js HTML JavaScript(not TypeScript) Scss tailwindcss バージョン メインで使用して…
imgタグ、sourceタグ、pictuireタグなど画像を表示するだけでもいろいろなものがあるので、それを管理しやすいように、pugでmixinを作成したので、その時のメモ 結果 まず、はじめに結果から 通常の画像ディレクトリ webpの画像ディレクトリ pugのコード //-…
既存だと出力時にbodyの下に <script src="/assets/js/bundle-e57c2548e14548c673e0.js"></script> headの下に <link href="/assets/css/bundle-e57c2548e14548c673e0.css" rel="stylesheet"> のように出力されるので、出力される場所の変更・ハッシュ値の変更などを行う 既存の状態 変更前のhtml <html lang="ja"> <head> </head></html></link>
マークダウン記載したファイルから PDFの作成 HTMLファイルにマークダウンを読み込んでWebページに表示 の対応を行ったので、その時に対応したことのメモです。 マークダウンファイルからPDFの作成 使用したパッケージ www.npmjs.com インストール $ npm i m…
個人用のプロジェクトでのビルドを「gulp + webpack」からwebpackのみに変更したので、その時に対応したことのメモです。 環境 pug stylus TypeScript gulpファイルを消そうと思った理由 1. 自分の環境ならwebpackのみで変換できる gulp上で行っていることが…
SPのtouchアクションに合わせて自由に要素を動かすことができるスニペットを作成したので、作成したときのメモ。 制作物 See the Pen PoPzOQY by miwa_shuntaro (@miwashutaro0611) on CodePen. 制作手順 ボタンの要素を作成 <button type='button' class='buttonIcon jsButton'></button> .buttonIcon { position: fixed…
storybook-dark-mode を追加することでstorybookでダークモードの対応を行うことができるので、その時に対応メモ。 実行結果 ライトモード ダークモード パッケージインストール¥ $ yarn add -D storybook-dark-mode or $ npm i -D storybook-dark-mode gith…
pugのlintを導入したので、その時のメモ pug-lintインストール インストール $ yarn add -D pug-lint or $ npm install -D pug-lint www.npmjs.com .pug-lintrcを作成 $ touch .pug-lintrc .pug-lintrc設定 ルール記載 書き方例 { "validateIndentation": 2 …
個人のフロントエンドのテンプレートでnpmパッケージのアップデートをよく行うので、アップデートの方法などのメモ コマンド上でのバージョンアップ手順 npm-check-updatesのインストール グローバルにインストール $ npm -g npm-check-updates www.npmjs.co…
テキストを1文字ずつアニメーションさせるときに手動でspanを囲わないで行いたいときに 成果物 See the Pen テキストアニメーション by miwa_shuntaro (@miwashutaro0611) on CodePen. 行ったこと 1. HTMLの作成 .txt: テキスト全体 .line: 改行させるための…
gulpfile.jsからgulpfile.tsに変更した時のメモ version gulp: ^4.0.2 ts-node: ^8.6.1 typescript-require: ^0.2.10 gulpfile.js 基本的に変更はしていませんが、念のため gulpfile.jsの内容 const { src, dest, watch, parallel } = require('gulp') const…
