Make組ブログ

Python、Webアプリや製品・サービス開発についてhirokikyが書きます。

JavaScript

JavaScriptのClipboard APIでリッチテキスト(書式付きテキスト)をコピーする

クリップボードにリッチテキストをコピーする方法を説明します。今回はとくにClipboard APIという現在推奨された方法で実装します。 「リッチテキストをコピー」というのは、ペーストしたときにWYSIWYGエディターへ書式が有効なまま入力されることを言ってい…

JavaScriptのグローバルマッチする正規表現でtest()、exec()すると状態が残る

今日はちょっとしたメモ書きです。 JavaScriptでグローバルマッチの(gオプションを付けた)正規表現で、 正規表現.test() をすると実行した状態が残ります。 > const FOO_REGEX = new RegExp('fo+', 'g') > FOO_REGEX.test('fooooo is foo') true > FOO_REG…

highlight.jsで行ごとに区切りつつハイライトする

現在のhighlight.jsではこのstateを引き回す書き方は非推奨となっており、今後廃止される予定です。 highlight.js というコードハイライトをするJavaScriptのライブラリーがあります。 highlightjs.org このライブラリーで、「行ごと」にHTML要素を分割しつ…

Vue.jsでAPIにないフィールドはモデルにも作らないプラクティス - モデルとViewModelの区別の仕方

前回の記事はこちらです。先に読まれておくことをオススメします。 blog.hirokiky.org モデルに置く値、ViewModelに置く値の区別をつけよう Vue.jsで開発するときに、モデルに置くべき値とViewModelに置くべき値を区別できればかなりキレイに設計できます。 …

JavaScript (ES6) でAPIから受け取ったデータをモデルに入れるプラクティス

フロントエンドのJavaScriptで、バックエンドのAPIからの結果をモデルに入れるプラクティスについてまとめます (より良い方法があったら教えてください)。 まず、以下のようなレスポンスがAPIからあると想定します。 { "id": 1, "username": "hirokiky", "…

Spacemacsでvue-modeかつflycheckする

emacs(Spacemacs)+ vueファイルをずっと模索している。 というのもjs2-modeがmmm-modeに対応しないので、JSを書くときにjs-modeで不便だったりする。 web-modeを使っても似たようなものなので、なんとかしたいこの頃。 模索中の設定 .spacemacs に以下追加…

CodeMirrorでphrasesオプションを使ってUIを日本語化できるようになったという話

2018年8月25日にリリースされたCodeMirrorの5.40.0から、検索ダイアログなどのUIを日本語化できるようになりました。 New features New method phrase and option phrases to make translating UI text in addons easier. github.com 何が嬉しいのか CodeMir…

Webpack (v4) で複数のJavaScriptファイル、CSSファイルを分けてビルドする

webpackは便利ですが設定などは慣れが必要です。 僕は面倒なので、毎度自分の過去のプロジェクトからコピーして使っています。 その内容から抜粋してブログの記事にしています。 想定としてはSinglePageApplicationとしてはアプリを作らずに、フレームワーク…

framesetタグの間でjs使うとうまくいかなかった。

<frameset rows="50%, *"> <frame src="http://d.hatena.ne.jp/hirokiky/"> <script type="text/javascript"> <!-- document.write('<frame src="http://d.hatena.ne.jp/hirokiky/">'); document.close(); --> </script> </frameset> これだとフレーム下側のサイトが表示されなかったので、 ごとjsで出力したらうまくいった。