何に関する記事か？ vxe-table というVue.js向けのテーブルUIコンポーネントを紹介する記事です。 かなり高機能・高性能なライブラリなのですが、中国発ということもあり日本語の情報が見当たらなかったので記事にしてみました。 この記事ではコンポーネントの提供する機能のほんの一部しか紹介していません。より詳細な情報は以下のリンクから参照してください。 Link GitHub - vxe-table コンポーネントの概要やインストール手順、サンプルコードなど vxe-table 公式ガイド(英語・中国語) コンポーネントの提供する機能・サンプルコードやAPIリファレンスなど かなりたくさんの機能が提供されているので、是非一度チェックしてみてください！ 誰にとってオススメか？ Element, Vuetify などのコンポーネントライブラリを使っていて、テーブル(グリッド)コンポーネント

Yew is a modern Rust framework for creating multi-threaded front-end web apps with WebAssembly.

エンジニアの伊藤です。 ようやく梅雨が開けたと思ったらすでに立秋。残暑は残るどころか日に日に増している感じさえあります… 🥵 。 この記事では、普段の開発で非常にお世話になっているツール Babel のプラグインを作成する方法と、Babel プラグインの例としての処理時間を計測するプロファイラを紹介します。Babel プラグインに踏み込んでいきたいのですが、理解を助けるためにまず Babel が何をするツールなのかから説明します。 Babelとは Babel の処理の流れ AST (Abstract Syntax Tree) Babel プラグイン Babel プラグイン プロジェクト最小構成 Hello World 「プロファイラ」で何をするのか まとめ Babel プラグイン開発に参考になったサイト おまけ Babelとは フロントエンドの開発を行っている方にはお馴染みな Babel

こんにちは、モンブランです。 知的生産ツール「Notion」に課金して2年目の決済を迎えました（登録して1週間後に年額課金した人です） 今回はNotionを使い始めて1年超になるモンブランが、Notionをどう使っているのかについて書きたいと思います。 以前は有料機能でしたが、現在はアップグレードをして当時の月額有料でしか使えなかった機能の大半が無料でも使えるようになったので、是非お試しください〜！ いざNotionの波へ〜！ NotionとはNotionは、タスク、Wiki、およびデータベースを統合するマークダウンサポートを備えたメモアプリケーション及びサービス。 同社はこのアプリを、メモ作成、プロジェクト管理、タスク管理のためのオールインワンワークスペースと説明している。（Wikipediaより引用） モンブランがNotionでやっていること僕がNotionでやっていることは、こんな感

めっちゃダッシュするイヌさん英語で先に書いてから日本語訳しています ⇒ English version is available here. こんにちは、TAKUYAと申します。InkdropというMarkdownノートアプリを開発しています。このアプリはElectronで作っています。Electronは、NodeJSとChromium(ブラウザ)ベースでクロスプラットフォームなデスクトップアプリが開発できるフレームワークです。このフレームワークは基本的に素晴らしいです。なぜならあなたはネイティブ用のフレームワークを学ぶ必要がなく、JavaScript、HTMLとCSSでアプリが作れるからです。もしあなたがウェブデベロッパーだったら、手軽にアプリが作れるでしょう。一方で、多くの人がElectronの弱い点についても言及しています。それはアプリの起動速度が遅い傾向にある、という点です。僕のア

Architecture Decision Records(ADRs)は、アーキテクチャ上の意思決定をドキュメントとして残す方法の1つです。Release It!の著者であるMichael Nygardのブログによって広まり、ThoughtWorks社のTechnology Raderでも「adopt」になっています。

01_ADR.md アーキテクチャ設計のドキュメンテーション コンテキスト アジャイルプロジェクトのアーキテクチャは、別々に記述され定義されなければなりません。すべての意思決定が一度にされるわけでもなく、プロジェクト開始時にすべての意思決定がされてるわけでもありません。 アジャイル手法では、ドキュメンテーションに反対はしませんが、価値のないドキュメンテーションはいけません。チーム自身の助けになるようなドキュメントは価値がありますが、ちゃんと最新化し続けなければなりません。膨大なドキュメントでは、最新化されなくなることでしょう。小さくまとまりのあるドキュメントは少なくとも更新される可能性はありますよね。 また膨大なドキュメントはだれも読みません。たいていの開発者はソースコードサイズの合計よりも(byte的な意味で)大きな仕様書が書かれたプロジェクトを少なくとも1回は経験したことがあるでしょう

ベーシック アドベントカレンダー 6日目。 こんにちは。@rigani_c です。今日も寒いですね。それでは本題です。 ファイルパスで View と CSS を付け合わせて薄いスコープを作る設計、ファイルパススコープについての記事の続編です。 CSS on Rails に治安が訪れます。 本記事は Rails 6.0.1 + Sprockets 4 な環境で動作検証しています。 タイトルで『こうするといいよ』とか言ってるけど、まだ運用してないので破綻したらごめんなさい。 ファイルパススコープ ファイルパススコープとは、ベーシックで考案・運用している CSS のスコープ設計です。 運用が容易な単純なルールと、書き直しやすさを重視しています。 次の手順で、View ファイルと CSS ファイルを対の関係にします。 View ファイルごとのルート要素に、自身の app/views/ 以降のファイ

Hi. rigani_c です。 本記事では Rails における弊社 CSS チームの CSS 設計を、私の思想と併せて話します。 Sprockets を使うケースを想定しています。Sprockets は Rails 6 でもデフォルトのはず。。 また、これは未検証の設計です。 今後開発していくサービスにて導入予定の設計ですので、 大きな破綻がある可能性 があります。導入後に人柱報告しますね。 『壊れにくい CSS 設計』は全ての傷が致命傷となり得る CSS を壊れないように運用していくのは極めて困難です。 CSS は雑に書いても目的のスタイルを作れちゃいますから、設計を理解しているメンバーがプロジェクトから離れると CSS の壊死は始まり、着実に広がっていきます。 ???『なるほど完璧な設計っスねーっ 運用されないという点に目をつぶればよぉ～』 クラス名を繋ぎ合わせてプロジェクト全体に

本日、「board connect for Hubspot （β版）」をリリースしました。 企画・設計は弊社、開発はストラテジット社になっております。 業務設計をメイン業務とし、Salesforceやkintoneの導入時の設計、スタートアップ向けバックオフィスの構築・運用を提供するBrownies Ｗorksの提供を行っている弊社ですが、基本的には「世の中にすでにあるSaaSの機能をフル活用する」ことを重視しています。 それが今回は初めて、必要最低限の連携機能ではありますが、オリジナルのアプリケーションを作りました。 このnoteでは本アプリの機能や開発した背景などについて書いていきます。 1.board connect for Hubspotの機能本アプリの機能は「Hubspotの顧客情報と案件情報をboardに連携する」ただそれだけです。それだけではあるのですが、顧客のステージに応じ

もともとは動的なWebサイト開発のために仕方なく(※もちろん人による)書かされていた感のあるJavaScriptですが、ES6以降の進化はめざましく、表現力の高さは他の言語に全く引けを取らないようになりました。 V8エンジンによるパフォーマンスの恩恵も相まって、私はWeb用途以外にもちょっとしたスクリプトを書く時などにも積極的にNode.jsを活用しています。 一方でかつてのJavaScriptのイメージから食わず嫌い的に避けてしまったり、そもそもJSや周辺エコシステムの進化に関心がない人も多く見られます。 そこで今回は「どうすればNode.jsの敷居を低くして、便利さを知ってもらえるか」の観点から役立ちそうな知見をまとめてみました。 動的型付けなのにかなり早い 詳しくは各ベンチマークの結果を見ていただければ分かりますが、Node.jsは動的型付け言語としてはかなり実行速度が早い部類に入り

そもそもVue.jsのライフサイクルとは？ Vueインスタンスが生成されていから破棄されるまでの流れのこと。 基本的にはページが遷移するたびに破棄されデータなどが初期化され新たに生成される。 なぜいちいち破棄しなければならないのか？ ページごとに値が残っていては、Vueとして、サービスとして機能しないから。 Vue公式のライフサイクルの説明 Vueのライフサイクルは公式で以下のように図解してある。 Vue.js公式・ライフサイクルダイアグラム だが英語だし、初見だと少し分かりにくかったので自分なりに補足などしてまとめてみた。 用語確認 初期化 最初の状態に戻すこと。もしくは最初の状態を整えること。 (https://wa3.i-3-i.info/word12961.html) マウント Vueの形式で書かれたコンポーネントなどの仮想表現を最終的なUI表現に出力するプロセス。 リアクティブデ