.jsxと.stories.jsを同じディレクトリに置くと怒られる airbnbのeslintを使うと、React Componentは拡張子 .jsx を強制します。 Storybookを使う時、 .jsx と同じディレクトリに .stories.js 置きたい場合があると思いますが、 拡張子が .js なので、story内でReact Componentを使うと怒られます。 ESLint: JSX not allowed in files with extension '.js'(react/jsx-filename-extension) .eslintrc の rules にreact/jsx-filename-extension の設定を追加することで回避することができます。 .eslintrc 1 2 3 4 5 6 7 8 "rules": { "react/jsx-filename-extension": [ "error", { "extensions": [".jsx", ".stories.js"] } ] }

続きを読む

Nuxt.js v2.9.0のリリースノートにあるように、 v2.9.0 からTypeScriptが外部からのサポートになりました。以前からNuxtでTypeScriptを使うときは色々設定したり、 Lintまわりが複雑だったり、コーディングをはじめるまで時間がかかったものの、しばらくすると最新が変わってたり・・・。 今回は2019年11月時点で、Nuxt.js + TypeScriptと IntelliJ IDEA で使えるまでを紹介します。 Nuxtのプロジェクトを作る $ npx create-nuxt-app example よくこのコマンドを見ますが、最新の create-nuxt-app を使うためには、 yarn create nuxt-app を使ったほうががいいかもしれません。 $ yarn create nuxt-app example yarn create v1.17.3 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... info @google-cloud/functions-emulator@1.0.0-beta.5: The engine "node" is incompatible with this module. Expected version "~6". Got "10.13.0" info "@google-cloud/functions-emulator@1.0.0-beta.5" is an optional dependency and failed compatibility check. Excluding it from installation. [3/4] 🔗 Linking dependencies.

続きを読む

Hugoはオープンソースの静的サイトジェネレーターです。とても速く柔軟性があることから人気です。 今回はHugoの導入から使い方、Netlifyでリリースするまでの方法を紹介します。 Hugoのインストール 公式サイトのQuick Startそのままですが、 brew を使ってインストールします。 $ brew install hugo インストールされたかを確認するには、 $ brew version 新しくサイトを作る $ hugo new site website このコマンドを実行すると、 website というディレクトリができます。 テーマを選びます Hugo Themesにたくさんのテーマがあります。どれがいいか迷ってしまいますよね。 今回は blog のタグが付いてるなかから、このブログに使ってるTranquilpeak というテーマを使ってみます。 $ cd website $ git init $ cd themes/ $ git submodule add https://github.com/kakawait/hugo-tranquilpeak-theme.git 他のテーマも導入する方法は一緒なので、他のテーマを使う場合はgithubのURLを変更してください。 themes ディレクトリの中に、 hugo-tranquilpeak-theme というフォルダができてると思います。 公式ドキュメントでは、themes/ananke とコマンドの最後にしてフォルダ名を指定する方法をとってます。 $ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke ルートディレクトリに config.toml というファイルがあると思います。 これが設定ファイルで色々設定していくんですが、submoduleで持ってきたテーマの中にテーマにそった config.toml があると思います。 hugo-tranquilpeak-theme の場合は、 exampleSite の中にあります。

続きを読む

WordPressからHugoに乗り換えました 2009年からWordPressではじめた当ブログですが、Hugoで作り直し、 サブドメインも creator.cotapon.org から blog.cotapon.org に変更しました。 Hugoにした理由 静的ページなので表示がめちゃ速い ホスティングサーバーをNetlifyの 無料 枠で使用 Markdownで投稿できる。Markdown好き！ 管理画面なしで git push で投稿完了 テーマがそこそこある 前のWordPressでのブログは、なんしか表示が遅かった・・・。それだけでもSEO的には不利。 Hugoにして表示速度は圧倒的に速くなりました。 ただ、Hugoは静的ページなので、 ブログ検索（全文検索） と コメント 機能はありません。 全文検索 は Algolia や Bonsai + Elasticsearchを使うことで代用でき、 コメント 機能は、Disqusなどのウェブサービスを使うことで導入することができます。 テーマによっては、これらのウェブサービスのアカウントIDやAPI KEYを設定ファイルに書くだけでよいものもあります。 ブログの引越でやったこと サブドメインとはいえドメインを変えたのと、日本語URLにしている記事があったので書き換えました。 2009年から書いてるブログですが、130ぐらいしか記事がないので、1つ1つ中身を見てURLを変えて、 はてぶされてるページは301リダイレクトの設定をしていきました。 そこそこ大変でしたが、1日10個ずつ地道にやっていきましたｗ NetlifyでDNSの設定をして、blog.cotapon.org が見れるようにするのと同時に、ルートドメインの cotapon.org にリダイレクト設定だけをデプロイしました。 Amazon Route 53なんかを使うと、もっとスマートにできそうですね。勉強せな。 Adsense, Search Console, Analyticsの設定を諸々やってようやく完成。 ブログが速くなったのと、git push でデプロイでき、Markdownでちゃちゃっと書けるだけでもブログを書くモチベーションが上がってきましたｗ 記事を書くペースあげていきたいと思いますので、今後ともよろしくお願いいたします！

続きを読む

buefyはVue.js用にBulmaを軽量化したUIコンポーネントです。Vue用のCSS Framework、UIコンポーネントは色々ありますが、現時点ではBulmaで落ち着いてます。buefyでアイコンを扱う場合、ドキュメントではMaterial Design IconsとFontAwesomeの2択で書かれてます。今回は、個人的に気に入ってるFontAwesomeをbuefyで使うまでの方法をメモして紹介します。 環境 Nuxt.js v2 nuxt-buefy v0.2.3 （現時点でv0.3以上では起動できませんでした） fortawesome v1.0.9 buefyをインストール Nuxt.jsを使う場合は、このページの下の方に書かれています。 command 1 $ yarn add nuxt-buefy ※versionが0.2.3になってるか確認 nuxt.config.js に下記を記載すれば buefy のインストールは終わりです。めちゃ簡単。 nuxt.config.js 1 2 3 4 5 6 7 8 9 10 11 12 { modules: [ // Simple usage 'nuxt-buefy', // Or you can customize ['nuxt-buefy', { css: false, materialDesignIcons: false }], ] } FontAwesomeをインストール command 1

続きを読む

タイトルがわかりにくくて申し訳ないんですが、エディターがIntelliJで、Vue, NuxtをTypeScriptでコーディングする環境の際、 vue-class-component のNuxt版、 nuxt-class-component を使えばNuxtでTypeScriptでコーディングできるんですが、メソッド内で this.$route を参照する際に下記のように implements をつけます。 js 1 2 3 4 5 6 7 8 9 10 11 12 13 <script lang="ts"> import Vue from 'vue'; import {Route} from 'vue-router'; import Component from 'nuxt-class-component'; interface WithRoute { $route: Route; } @Component export default class Index extends Vue implements WithRoute { created() { console.log(this.$route.params); } } </script> そうすると、以下の画像のようなエラーが出ました。

続きを読む