Nuxt, ElementUI, Storybook 構成で始めようとしたときに、StorybookにElementUIを適用させるのにちょっと手こずったので手順を残しておきます。 最終的なソースです。 howdy39/nuxt-storybook-element-boilerplate: Nuxt, Storybook, ElementUI, Boilerplate Nuxtプロジェクトを element-ui で作成
![Nuxt, ElementUI, Storybook 構成のVueプロジェクトの始め方 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b291635ce92358ff7875dbe348c8abdcf20409c9/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9TnV4dCUyQyUyMEVsZW1lbnRVSSUyQyUyMFN0b3J5Ym9vayUyMCVFNiVBNyU4QiVFNiU4OCU5MCVFMyU4MSVBRVZ1ZSVFMyU4MyU5NyVFMyU4MyVBRCVFMyU4MiVCOCVFMyU4MiVBNyVFMyU4MiVBRiVFMyU4MyU4OCVFMyU4MSVBRSVFNSVBNyU4QiVFMyU4MiU4MSVFNiU5NiVCOSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MzcxY2VmNDg1YTFlZDUyYzYxNDliZWMxMGM1NDhiOTg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBob3dkeTM5JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz03NDNkNjQzMDdmZWY4OGUzNTU0NjE3Zjk1Njk1NDljYQ%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Df8b80b3be1f780edfa3799ecd979b2f3)
Nuxt, netlify, Firebase を使ったWebサービス開発と個人開発における技術選定のポイントJavaScriptsentryFirebaseNetlifyNuxt 技術構成はこんな感じで作りました。 Nuxtというよりかは個人開発における技術選定のポイントを主体に解説した記事です。 これから個人開発をやろうとしている人の参考になれば幸いです。 どんなWebサービス? Google Calendar の表示/非表示を一括で切り替えるWebサービス。 ※ゲームとかでよくある装備マイセットのGoogleカレンダー版です。 G Suite を導入している企業だとカレンダー画面が会議室や他のユーザーの予定で溢れてしまいます。 TV会議ができる会議室のセットや同じチームメンバーのカレンダーセットをつくり、セットごとの予定をカレンダーのTOP画面で目視で確認できるようになります! 触っ
const puppeteer = require('puppeteer'); let page; async function getBrowserPage() { // Launch headless Chrome. Turn off sandbox so Chrome can run under root. const browser = await puppeteer.launch({ args: ['--no-sandbox'] }); return browser.newPage(); } exports.getTrends = async (req, res) => { if (!page) { page = await getBrowserPage(); } await page.goto('https://qiita.com'); const result = await
gas-clasp-starter という Google Apps Script を ローカル環境で開発するためのテンプレートを作りました。 2018年に登場した、google/clasp をベースに webpack, TypeScript, TSLint, Prettier, Jest を利用したテンプレートになっています。 GAS って新しい構文で書けないしソース管理もできないから微妙 もっと便利に利用できないかな みたいな方に読んでもらえれば幸いです。 本記事では、gas-clasp-starter を使うことによるメリットや、利用する際の流れを解説します。 ブラウザ上のスクリプトエディタで開発するのではだめなの? 小さなコードならスクリプトエディタで十分です。 ただし、ある程度のコードになる場合はローカル環境に切り替えたほうが良いでしょう。 GAS は JavaScript ベース
次の記事でGASをローカル環境で開発するためのテンプレートを作りました。 Google Apps Script をローカル環境で快適に開発するためのテンプレートを作りました - Qiita ローカル開発ができるようになったら、次にほしいのはCI/CD環境ですよね。 テストが通らないコードをマージしたくないですよね。 マージされたと同時に自動でデプロイしたいですよね。 上記のテンプレートに Circle CI を設定したサンプルリポジトリを作ったので参考にしてみてください。 howdy39/gas-clasp-library ※このリポジトリはGASのライブラリ使用時のサンプルでもあります。(SlackAppを使っています) 本記事では Circle CI 使用時のCI/CD環境の構築手順を解説をしていきます。 clasp の仕組み 設定する前にまず clasp の仕組みを理解しましょう。
RESTful な URL にしよう 元記事 GET /tickets - チケットのリストを取得する GET /tickets/12 - 指定したチケットの情報を取得する POST /tickets - 新しいチケットを作成する PUT /tickets/12 - チケット #12 を更新する PATCH /tickets/12 - チケット #12 を部分的に更新する DELETE /tickets/12 - チケット #12 を削除する Google GET /events - 予定のリストを取得する GET /events/12 - 指定した予定の情報を取得する POST /events - 新しい予定を作成する PUT /events/12 - 予定 #12 を更新する PATCH /events/12 - 予定 #12 を部分的に更新する DELETE /events/12 -
2017/05/18 APIの高速化方法について追記記事を書きました。 GoogleスプレッドシートAPIの高速化 GoogleI/O 2016でSpread Sheet API v4がリリースされました。 動画はこちらです。 盛り上がるのはAndroidなどデバイスにかかわる話だったり新サービスだったりするのですが、私が一番盛り上がったのはこのリリースだったりします 簡潔に書くと 今までの貧弱だったAPIがものすごく強化されシステムに組み込めるレベルになりました。 本記事ではスプレッドシートをプログラムから操作する方法と、実際に何ができるのかを解説していきます。 サンプルとして以下の様なスプレッドシートを作成します。 スプレッドシートAPIとは その名の通りGoogleスプレッドシートをWebシステムやスマホアプリなどプログラム経由で操作することが可能なAPIです。 元々バージョン3があ
2016/9/8 ※cssnextに含まれる機能についての記事を書きました。 cssnextから学ぶ次世代CSS PostCSSを知っていますか? 筆者はどこかで聞いたことあるぐらいで 次のCSS? またSassみたいなやつ作ったのか もうSassで終わりにしようぜ(覚えるの辛い) といった負のイメージから勉強してみたのですが、だいぶ想像と違いました。 Sassの代替というよりかはCSSのエコシステムを構築するための共通基盤、といったところでしょうか。 本記事はタイトルにもあるようにPostCSSを使ってCSSをモダン化する流れで書きました。 「Sassすら使っていない」「このCSS界隈のライブラリよくわからない」という方こそ是非読んでみてください。 PostCSSとは 2015年4月頃以前はこんな感じ SassやLESSを筆頭にプリプロセッサとPostCSSを内部的につかっていたcssn
cssnextとは策定中のCSS仕様を先立って使えるようにするツールのことです。 ひとことで言うとCSS版Babelです。 CSSを変換する仕組みはPostCSSのプラグインとして有志によって作成されています。 cssnextはそのプラグインをまとめたプラグインパックと呼ばれるものです。 ※古いブラウザに対応させるためのフォールバック機能を提供するプラグインも含んでいます。 本記事は策定中のCSSの知識をつけることが目的です 参考リンクなど cssnext(PostCSS)の背景や使い方は先日記事を書いたので是非見てみてください Step by Stepで始めるCSSモダン化(PostCSS) playgroundでcssnextが実際にどのように変換するのかを試せます。 機能一覧 本記事で紹介する機能一覧を出すのに使ったcssnextのページです。 postcss-cssnext fea
ESLintはJavaScriptを静的に検証するツールです。 わかりやすく言えば、チームメンバー間で統一された美しいコードを生成するためのツールです。 設定ファイルを書いておけば自動で変換することも可能です。 ESLintを始めよう! JavaScriptのLintツールにはjslint, jshint, JSCSなどがあります。 2016/11 時点で npm trendsで比較した結果が以下の画像です。 http://www.npmtrends.com/jslint-vs-jshint-vs-jscs-vs-eslint 半年前はjshintと並んでいましたが、わずか半年の間にダブルスコアをつけています。 jshintは開発が鈍化しています。 またJSCSの開発チームはESlintに移行することを決めました。 以下に記載した有名ライブラリは開発時にESLintを使っています。 jQu
JavaScriptのリファレンスといえばMDNですよね。 JavaScriptで調べものをする際に、真っ先に見る方も多いでしょう。 そんなMDNですが読めていますか? 例えばArrayのページを見てみましょう。 さらっと書かれているprototype JavaScriptを理解するにはプロトタイプチェーンを知る必要がある 本記事の目的 プロトタイプチェーンを理解する MDNをより読めるようにする JavaScriptのObjectやArrayなどの基本型の構造を理解する 確認環境や記述について Chrome 52のコンソールで動作確認 ES5で記述 説明のしやすさを重視、プロトタイプをあらわすのに__proto__を使って記述 まずはオブジェクトについてみていく シンプルなオブジェクトを作る
※webpack1系の記事です。 1→2への移行ガイドを見る限り破壊的な変更点はそんなにありませんが、preLoadersやpostLoadersがなくなっていたり、差が出ていますのでご注意ください。 https://webpack.js.org/guides/migrating/ webpackを手を動かしつつ学べる初学者向け資料を作成しました。 公式のチュートリアルもあるのですが、webpackが使用されているOSSのボイラープレートを見る限り、世の中の使われ方に沿ってないかも?と思い書きました。 これから始める人の手助けになれば幸いです。 また最終形のソースをupしてあるので詰まったら見てください。 webpackとは webpack で始めるイマドキのフロントエンド開発の説明が良かったので引用させていただきます。m(_ _)m webpack は WebApp に必要なリソースの依
Karmaを使うことでフロントエンドの単体テストを楽しくかつ機能的に行うことができます。 ステップを通して少しづつ理解できるように執筆しました。 また、最後に重要だろうと思われる補足内容を記載しました。 Karmaの導入に一役買えれば幸いです。 テスト全体の流れについては以前書いた記事フロントエンドにテストを導入を参照してください。 Karmaとは ブラウザ上で 単体テストを実行するためのテストランナーです。 テストを実行するだけでなくファイルの変更監視や結果のレポートを出力してくれたりと単体テストに必要な機能が一通りそろっています。 特定のフレームワームに依存しておらず汎用的に使えるツールで、プラグインを使った機能の拡張が強力です。 前提 Nodejs,npm,chromeが導入済みであること 流れ Karmaは4つの大きな機能(プラグイン)が存在します。 Step 3 〜 Step 6
2016-8-8 ※webpack単体の記事を書きました。よろしければこちらもどうぞ step by stepで始めるwebpack 2016-5-16 ※karma単体の記事を書きました。よろしければこちらもどうぞ step by stepで始めるKarma 本記事は画面のJavaScriptのテストとかまったくやったことない方 Mocha?webpack?karma?それぞれの解説記事はよく見るけど全体像がよくわからんという方向けです。(数日前の自分です) 全体を通して導入の流れを解説した記事があると全体像が理解しやすいのではと思い書いてみました。 前提 Nodejs,npm,chromeが導入済みであること 流れ Step 表題 目的
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く