Posts

Building A Svelte 3 Todo App From Start To Deployment に従いつつ、 rollup の代わりに webpack を使って from stratch で作成してみました。 手順 まずは Svelte アプリの作成をします。 webpack を使った template は sveltejs/template-webpack にありますが、これを参考に以下のコマンドを実行します。 mkdir svelte-todo-webpack cd svelte-todo-webpack yarn init git init yarn add -D webpack{,-cli,-dev-server} svelte{,-loader} {css,style}-loader mini-css-extract-plugin 今回は cross-env, serve, sirv-cli などを使わないようにするため、いくつか変更している箇所があります。 とは言っても、 serve はどこで使っているか分からなかったので、単に webpack の設定を function にして、 --env.NODE_ENV=development という風に渡すように変更しただけですが。……多分。 あとはシュッと ToDo アプリの実装をします。簡単でしたね。 HMR でのエラー TypeError: "todoitem.$on is not a function" というようなエラーがブラウザのコンソールに出ていました。 どうやら HMR に対応していないようなので、 HMR を無効にすることで対応しました。...

このブログに Typescript を導入したとき、 default import でエラーが出ていたので一旦 tsconfig.json に esModuleInterop を追加して対処していました。 ただ、デフォルトの設定を変更するのはあまり好ましくないと感じたので、 microsoft/TypeScript#3337 を参考に、 import React from 'react を import * as React from 'react に 書き換えることで対処しました。 これが esModuleInterop に対する正しい対処方法かは分かりませんが……。

この Gatsby を使っているブログも10ポストを超えてきました。 そこで、普通のブログのようにページネーションを導入しました。 NickyMeuleman/gatsby-paginated-blog を参考に、といっても gatsby-node.js と src/pages/index.js を編集するだけですが……。 commit e871f7e で変更した通りです。 実装を見てみると簡易的なもののようなので、10ページ程度になる前にもうちょっとちゃんとした 実装に変更しないといけないかなと思っています。

UNPKG と tagged template literal を知りました。 IE 非対応……babel 使いましょうという感じですね。

gatsbyを使い始めました で typescript について言及していたので、 typescript を導入してみました。 gatsby-plugin-typescript をインストールして、 props とかの型を適当につけて、tsx に変えればほぼ終了です。 Gatsby の設定ファイルも typescript にしようと思って clarkdave さんの Gist を参考にやってみたのですが、 slug の生成周りがうまくいかなかったので、一旦そのままにしています。 Gatsby の actions なんかを調べながら再挑戦しようと思っています。

CORSのテストができるサイトを見つけました。 monsur/test-cors.org CORSのテストができます。 いやまあ、適当に Axios なんかでリクエスト飛ばせばいい話なんですが……

このブログを作成するときに gatsby-starter-blog を使ったのですが、スタイルを変えていなかったので、 gatsby-starter-default から style.css をコピーしてみました。 そろそろ Gatsby についてもう少し学んでもいいかなと思いました。

少し前まで IDE の補完機能など、コーディングの支援機能を使いながらコーディングすることが、 なんだか IDE にコーディングさせられているようで嫌でした。 これは恐らく私だけが感じていることではなくて、初心者の方のツイートで IDE なしでコーディングする/コーディングできるようになりたい、といった 発言を見かけることがあります。 ただ、これは開発の規模がまだ小さいときに強く感じるものだと思います。 コードベースの規模が大きくなってくると、細かい所まで全て覚えていられないですし、 コーディング量が増えるにつれてミスをする確立も上がっていきます。 そんなときに IDE を使っていると、例え補完機能を(候補が出ても無視して) ほとんど使っていなかったとしても、ミスがあればすぐに知らせてくれますし、 仮にスペルに自信がないなどの場合にも補完機能を使ってスムーズにコーディングを進めることができます。 (もし補完機能を使っていなければ定義されている箇所を確認することになりますし、 早くミスを見つけるためには頻繁にコンパイル等をする必要があります。) コンピュータはコアとなるロジックを実装されるまで知りません。 プログラマーはそのコアロジックの実装に集中することで生産性を高めようとしています。 そのため、既に実装されている部分やライブラリについてはコンピュータの助けを借りて、 新しい部分の実装に集中することができるのです。 もちろん、主体的にプログラミングする必要があります。 いくら候補が表示されているからといって、何も考えずにそれを選んでいると間違うこともあります。 自分で何を実装すべきかをきちんと認識した上で、実際のコード上の表現について 助けを借りる、といった考え方が合っているのかなと思っています。

今まで Android アプリ開発には Android Studio を使っていて、 IntelliJ IDEA と両方使っていたのですが、 Android アプリも Intellij IDEA で開発してみました。 背景 今までも何度か IntelliJ で Android アプリの開発を試みていたのですが、 謎のエラーに悩まされていて、特に Visual Layout Editor が機能しなくて困っていました。 Sync Project with Gradle Files を選ぶと以下のエラーが出ていました。 New Gradle Sync is not supported due to containing Kotlin modules 原因 上記のエラーメッセージで検索すると、皆さんいろいろな方法で解決されているようですが、 私はどの方法でも解決しませんでした。 結論としては、システムの JRE のバージョンが 13 だったことが原因だったようです。 Java - Arch Wiki を参考に、 IntelliJ を Java8(1.8) を使って起動するようにしたら解決しました。 感想 IntelliJ の設定は複雑すぎる気がします…… とはいえ、新しい IDE を使う度に同じことを思っている気もします。 シンプルにすればいいというわけではないですが、エラーメッセージはもう少し詳細に書いてほしいのと、 プロジェクト作成などある程度のことは CLI でもできるようにするなど、 問題の切り分けがやりやすくなればいいなと思いました。

今まではあまり気にしていなかったのですが、gh-pages のデプロイ時に2回パスフレーズを聞かれるのが さすがに気になってしまい、 ssh-agent を使うことにしました。 前に何度か使っていたような記憶があるのですが、システム自体をあまり理解していなかったのもあり、 今の環境をセットアップするときには有効にしていませんでした。 設定 基本的にはGnuPG - ArchWiki に従うだけです。 ~/.pam_environment で SSH_AUTH_SOCK の設定をして、Xorg で使う場合は TTY の設定をします。 感想 ssh-agent と変わらずパスフレーズのキャッシュなどは普通に便利なのですが、 gpg-agent は内部で ssh-key を gpg-key としてインポートしていそうな感じですね。(追って調査します) gpg-key で ssh することも可能なので、行く行くは gpg-key にまとめてしまおうかなと思っています。