heavenshellのブックマーク - はてなブックマーク

ESLintのflat configについてようやく調べた - dackdive's blog

背景 ESLint v9からflat configがデフォルトとなり、将来のリリースで古いconfigの書き方は廃止される予定なのは把握していた。その後本格的に調べないままになっていたが、そろそろまずいかもなと思って概要だけでも調査したメモ。先に簡単なまとめ次のメジャーバージョンv10で古いconfigは廃止だが、そのリリースは2024年末〜2025年初頭移行は @eslint/migrate-config を使いつつ Configuration Migration Guide を参照 flat configとは何か ESLintの新しい設定システム（config system）のこと。 flat config導入の背景 ESLint's new config system, Part 2: Introduction to flat config - ESLint - Pluggab

heavenshell 2024/07/08

リンク

React/Reduxの設計に関する参考記事まとめ - dackdive's blog

最近悩んでいる React/Redux でそれなりの規模のアプリケーションを作るための良い設計について、日頃ネットで気になる記事を漁っていたんだけど、積読がたまってきた＆Twitter やら Pocket やら Qiita に散らばってしまったのでここらで一旦整理します。（★ はその中でも特に読みたいもの） Redux の設計 ★ React Redux Real World Examples 〜先人から学ぶReact Reduxの知恵〜実際に GitHub にあるソースコードを読んで得られた知見について。「Storeはどんな具合に構成すべきか」「Store初期化(hydration)用データの定義はどうすべきか」「Componentはどう整理すべきか」と目次だけ見ても非常に実用的な内容。 ★ erikras/ducks-modular-redux: A proposal for

heavenshell 2017/06/01

リンク

Reactでフォームの項目をどう扱うか問題 - dackdive's blog

メモ。なんの話か React でフォーム項目を簡潔に書く方法がわからない管理されたコンポーネントで書こうとすると、項目の数だけ state と対応するイベントハンドラが必要になる親に渡す必要がある、とかだとさらにしんどい // 基本形 class MyFormCmp extends React.Component { constructor(props) { super(props); this.state = { name: '', }; this.onChangeName = this.onChangeName.bind(this); } onChangeName(e) { console.log(e.target.value); this.setState({ name: e.target.value }); } render() { return ( <form> <inpu

heavenshell 2016/10/24

react.js

リンク

[Vim]SyntasticによるESLintチェックが遅いのでNeomakeに乗り換えた - dackdive's blog

（2017/01/23追記）この後 Flow を導入しようとしたら色々問題が発生したので、Neomake から ALE に乗り換えた。（追記ここまで）（2018/04/15追記）現在、記事を書いた時と設定方法が変わっているようです。こちらの方が最新の手順をまとめてくださっているので、ご参照ください。（追記ここまで） Vim の Syntax Checker として有名なのは Syntastic ですね。最近は JavaScript を書くことが多いので、この Syntastic を使って ESLint のチェックをできるようにしていました。上の記事に書いてある設定を行ったことで、Vim で常に lint チェックをかけられるようになったのは良かったんですが 1 個だけ不満があって、チェックのたびに操作がブロックされてしまうという問題がありました。正直こればっかりは我慢する

heavenshell 2016/10/24

watchdogs.vim も非同期で動くし、https://github.com/w0rp/ale みたいなのもある。

vim

リンク

webpack.config.jsの読み方、書き方 - dackdive's blog

（2017/08/28追記）この記事は webpack v1 系での config について書かれています。 v2 系以降は一部の項目名などに変更があります。 Migrating from v1 to v2 を読んで v2 系への移行を行うか、または私のリポジトリを参考にしてください。 https://github.com/zaki-yama/react-redux-template https://github.com/zaki-yama/redux-express-template （追記ここまで）はじめに webpack を使った JS/CSS のビルドを行う場合、webpack.config.js という設定ファイルを用意してコマンド自体は webpack で済ませることがほとんどだと思いますが公式チュートリアルでも webpack.config.js については少ししか触れ

heavenshell 2016/09/11

リンク

webpack-dev-serverの基本的な使い方とポイント - dackdive's blog

はじめに（2017/08/10追記）この記事では webpack-dev-server を独立したサーバーとして使う場合の方法です。また webpack 1 系の情報になっており少々古いです。最新の設定についてはこちらの GitHub リポジトリを参考にしてください。 https://github.com/zaki-yama/redux-express-template （追記ここまで） JavaScript のビルドに webpack を使っている場合、ローカルでの開発には webpack-dev-server を使うと便利です。通常の webpack コマンドも --watch （または -w）オプションつきで実行することによりファイルの変更を検知して自動でリビルドを行うことが可能ですが、 webpack-dev-server は上記に加えてローカルサーバーも起動してくれ

heavenshell 2016/07/29

リンク

VimでESLintをグローバルインストールせずに、Syntastic+ESLintでES2015の構文チェックをする - dackdive's blog

（2016/10/24追記）しばらく Syntastic を使ってましたが、Neomake というより快適なプラグインが見つかったので今はそちらを使ってます。（追記ここまで）はじめに vim で ES2015 を書いていると、構文チェックもコーディングと並行して行いたいと感じるようになります。 Syntastic はそのための vim のプラグインで、JavaScript に限らず様々な言語の構文チェックを行うことが可能です。参考：以前 Python 用に設定した時の記事今回は JavaScript の代表的な linter (syntax checker) である ESLint を使い、vim で ES2015 を書くときの構文チェック環境を構築してみます。よく見る設定「vim es6 syntastic」とかでググってよく見るのは以下のように、ESLint をグローバルイ

heavenshell 2016/05/03

vim

リンク

[vim]Syntasticでpython用の設定をする - dackdive's blog

vim で様々なプログラミング言語の文法チェック(syntax check) を自動で行ってくれるプラグイン「Syntastic」ですがそのまま python ファイルに適用すると不要な警告まで色々出てしまい少々うっとうしいです。ので、Syntastic と、今回は syntax checker として pylint を採用したので両者の設定方法を調べてみました。 Syntastic のインストール NeoBundle を使えば、簡単にインストールできます。 .vimrc NeoBundle 'scrooloose/syntastic' また、以下は Syntastic の README に書いてあったオススメ設定だそうですがここではコメントアウトしときます (.vimrc に記述) """ Recommended settings """ see https://github.

heavenshell 2015/02/06

vim
python

リンク

[vim]vimでmarkdownをリアルタイムプレビューできるようにする - dackdive's blog

すでにあちこちで紹介されてるので目新しいことはありませんが vimでmarkdown形式のファイルを編集中にブラウザでプレビューでき、さらに変更がリアルタイムに反映されるように設定しました。ちなみに、以前はこちらの記事にある設定でやってました。（こちらはリアルタイムには反映されません） Vim で GitHub Flavored Markdown をプレビューする - すぱぶろ必要なもの plasticboy/vim-markdown kannokanno/previm tyru/open-browser.vim インストール全部NeoBundleでインストールします。 .vimrc NeoBundle 'plasticboy/vim-markdown' NeoBundle 'kannokanno/previm' NeoBundle 'tyru/open-browser.vim'

heavenshell 2014/09/25

vim
markdown

リンク

[vim]python補完プラグイン「jedi-vim」を快適にする方法(jedi-vim+neocomplete) - dackdive's blog

vimでpythonの開発を行う上で jedi-vimというプラグインが非常に便利だという話はネットで頻繁に目にしますが、自分の環境ではそれほど使い勝手が良くないなあーと思って色々調整してみました。結果的に、その他の補完プラグインとして使っていたneocomplcacheをneocompleteに移行し、もろもろ設定を.vimrcに書いたら今までよりずっと使いやすくなりました。以下、気に入らなかったポイントとその改善策を。その1：補完の時に上に小さな画面が出てきて画面がずれる、動作がぎくしゃくする自分の環境では、補完候補を選択すると画面の上部に勝手にポップアップが表示されます。これが、候補を切り替えるたびに別の内容が表示されるもんだからいちいちウィンドウの高さが変わって画面がガタガタとずれ、見ていていいもんじゃありません。また、そのせいか、「高速に動作する」はずのjedi

heavenshell 2014/09/05

vim

リンク

HMACについて調べてみた - dackdive's blog

過去の記事でBasic認証とDigest認証、MD5って何？って話をまとめたんですがその延長でHMACという認証方式(?)について学ぶ機会があったのでメモ。 HMACとは Hash-Based Message Authentication Codeの略で、メッセージ認証符号(MAC; Message Authentication Code)の1つ。メッセージ認証符号はメッセージ認証コードとも呼ばれている。メッセージを送受信する際に相手が成りすましでないかとか、途中で改竄されていないかどうかを調べることができる。そのために、送受信者の間で「秘密鍵」と呼ばれる第三者が知らないデータを使用する。使うもの秘密鍵(または共通鍵とも呼ばれていたり) メッセージ(データ) ハッシュ関数メッセージ本体と秘密鍵を一定の規則に従って組み合わせハッシュ関数に与え、ハッシュ値を計算する。生成した