ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高

re:dashは、オープンソースとして提供されている新世代のBIダッシュボードです。re:dashは、以下の特徴を持っています。 １）SQL実行結果のスケジューリングとキャッシュ機能 分析用SQLを夜間にスケジューリングして実行し、その結果をキャッシュすることができます。 そのため、日中の結果参照が非常に高速で、待たさせることがありません。 ２）表現力豊かなチャート機能 データ可視化のためのプラットフォーム であるplot.ly(*)をサポートすることで、表現力豊かなチャートを利用することができます。 (*)Plotlyは、D3.js（SVG）とstack.glを土台としたインタラクティブなチャート向けのJavaScriptライブラリで、棒グラフ、チャート、地図、箱ひげ図、ヒストグラムなど20種類のグラフをサポートしており、昨年、オープンソースとして中核となる技術を公開しました。

おはようございます、ritou です。 qiita.com これの初日です。 なんの話か 皆さんは今まで、こんな記事を目にしたことがありませんか？ Cookie vs JWT 認証に JWT を利用するのってどうなの？ JWT をセッション管理に使うべきではない！ リンク貼るのは省略しますが、年に何度か見かける記事です。 個人的にこの話題の原点は最近 IDaaS(Identity as a Service) として注目を集めている Auth0 が Cookie vs Token とか言う比較記事を書いたことだと思っていますが、今探したところ記事は削除されたのか最近の記事にリダイレクトされてるようなのでもうよくわからん。 なのでそれはおいといて、この話題を扱う記事は クライアントでのセッション管理 : HTTP Cookie vs WebStorage(LocalStorage / Sess

知っている人は知っていると思うが、Qiitaではたびたび大量のスパム記事が投稿されている。 深夜24~26時頃に記事一覧を確認してみて欲しい。 スパム記事がわんさか出てくるはず。 登録したてのQiitaユーザは不安よな。1 ———— @dcm_chida 動きます🧐 はじめに これはNTTドコモサービスイノベーション部AdventCalendar2019の1日目の記事です。 我々の部署では日頃から「KDDCUP2」や「論文読み会」に取り組んでおり、若手から中堅社員まで最先端の技術取得に励んでいます。 そうした活動をもっと外部へと発信していこうと始めたのがこのAdventCalendarです。社員一人一人が書いた記事を通して、少しでも多くの方に興味を持って頂ければ幸いです。 さて、僕は4年目社員ですがプログラミング初心者の頃から現在に至るまで、Qiitaにはかなりお世話になりました。 自分

はじめに 少し前から話題になっているが、日本の労働生産性はG7で最も低いらしい。 日本生産性本部資料より https://www.jpc-net.jp/intl_comparison/intl_comparison_2018_press.pdf 日本は人口減少に突入していることもあって、「作業の効率化」や「自動化・省力化」をいうフレーズをあらゆる業種で聞くようになった。 ITエンジニアは、あらゆる職業の中でも最も効率化、自動化をして生産性を高められるといっても過言ではないだろう。プログラマの三大美徳(「怠惰」「短気」「傲慢」)にもあるように、同じことを何度もやらない、楽をするためにがんばるという生産性を意識した感性が重要視されているからだ。 生産性を高めることで、勉強する時間が作れたり、新しいことを経験したりするなどしてさらにスキルアップができ、さらに生産性が上がるという好循環を作り出すこ

この記事は JavaScript Advent Calendar 2019 - Qiita の初日の記事です。 2019年を締めくくるアドベントカレンダーの初日ということで、今年のJavaScriptを簡単に振り返りたいと思います。2020年のJavaScriptについても予習しましょう。 2019年、2020年が何を指しているかは後述します。 カテゴリが「プログラミング言語」なので、React、Vue、AngularやNode.jsなどJavaScriptを使った技術ではなく、JavaScriptの言語機能にフォーカスしたいと思います。 はじめに ES2019 Optional catch binding JSON superset Symbol.prototype.description Object.fromEntries Well-formed JSON.stringify Arr

GraphQLを用いたサイトに
おけるパフォーマンス改善
（ECサイトを題材に）/ Improving online shopping site performance which using the GraphQL

フロントエンドエンジニアのid:ninjinkunです。この記事は一休.comアドベントカレンダーの1日目の記事です。 一休.coｍレストランの管理画面リニューアルプロジェクトにおいて、CSSフレームワークのBulmaを導入しました。結論としては、採用して良かったと思っています。 このエントリではBulmaを選定した理由と、採用後に見えたPros / Consについて述べたいと思います。 なお今回リニューアルした一休.comレストランの管理画面の概要は以下の通りです。 レストラン店舗向けの管理画面 店舗の方と一休スタッフの両方が使う DAUは数千の規模 主な用途は在庫の管理と、プラン（コース）や席の管理 現在は店舗を限定してリリース済み 具体的には以下のような画面で構成されています。 UIフレームワークは必要か？ まずそもそもUIフレームワークは必要かという議論があります。 今回のプロジェ

PHP Conference 2019でのサイボウズのスポンサーセッションです。 #phpcon #Track3 2019/12/6 追記 スライド76~77で、「伝統とは火を守ることであり、灰を崇めることではない」という言葉をGustav Mahler の言葉として引用していますが、Gustav Mahler の言葉である、という明確な出典はありませんでした。

はじめに JavaScriptのコードを一括で変換したり修正したい場合、正規表現などを使い置換しますか？ シンプルなケースであればそれでも問題ないですが、複雑な変換であればASTベースでコードを自在に変換できる「jscodeshift」が便利です。 jscodeshiftを利用すると、以下のようなことができます。 例) functionで書かれた関数をアロー関数に一括で変換 target/arrow-function/index.js const fn = function() { console.log("foo"); }.bind(this); [1, 2, 3].map(function(v) { return v * v; }); Promise.resolve() .then(function() { console.log("foo"); }) .then(function()

訳もなく買って弄り倒したくなるよなこういうの 年末休みの遊びにぴったりやで 元スレ: http://tomcat.2ch.sc/test/read.cgi/livejupiter/1575188448/

福岡のWebアクセシビリティ/フロントエンドエンジニア。株式会社ディーゼロ所属。Webにインクルーシブな未来を夢見てる人。よりセマンティックでアクセシブルなHTMLをマークアップできるように開発者を手助けするmarkuplintというオープンソースツールを個人の活動として開発しています。 これはエンジニアである僕がアクセシビリティを学ぶことによりデザインの知識と理解が深まったという経験談です。もしも今、あなたがデザインに関わっていく上で物足りなさやスキルの向上に伸び悩んでいるのであれば、アクセシビリティの知識がその助けになるかもしれません。広範囲でしかも大袈裟な話に聞こえるかもしれませんが、気になったところからちょっとずつ覗いてみるだけでもいいと思います。 アクセシビリティとは Accessibilityは英語なので人によって訳や解釈が若干異なりますが、これから話すアクセシビリティは、一般

12/3にパシフィコ横浜で開催された「AdobeMAXJapan」に合わせて、Adobe XD用の便利なプラグインが登場しました！ プラグインは通常、英語圏内に特化されたものが多いですが、「Quick Mockup」はなんと日本のデザイン現場向けに特化されたもので、簡単にワイヤーフレームやモックアップが作成できます。 日本のUXデザイン用に開発されたAdobe XD用プラグイン「Quick Mockup」 Quick Mockupの特徴 Quick Mockupのインストール Quick Mockupの使い方・動画 Quick Mockupの特徴 Quick Mocukupは、日本のデザイン現場で使用頻度の高いUI要素のサンプルから簡単にワイヤーフレームやモックアップを作成、さらにスタイル、ステート、コンテンツのカスタマイズで簡易プロトタイプをすばやく簡単に作成できます。 Quick Mo

Help us understand the problem. What is going on with this article? このエントリはCompetitive Programming (1) Advent Calendar 2019　4日目のエントリで、バーチャル幼女プログラマーきりみんちゃんが書いています。 きりみんちゃんはVTuberとしてAtCoderの過去問を解く配信をしたりしています。 競プロ、しっていますか？ さて、みなさんは競技プログラミング/プログラミングコンテストというものをご存知でしょうか。 かなり昔から行われているものではあるので、存在は知っているという方が多いかもしれません。 競技プログラミングをざっくり説明すると、期待される入力と出力が定義された問題が出題され、それをコーディングによって解き用意された自動テストを通すまでの速度などを競うコンテストです

モダンなWebフロントエンドの技術とAMP モダンなWebフロントエンドのフワームワークやツールとAMPについて紹介します。 リクルートテクノロジーズ兼リクルートライフスタイルのASGチームに所属しているフロントエンドエンジニアの可児です。本記事は、リクルートライフスタイルアドベントカレンダー４日目の記事です。 本記事では、リクルートライフスタイルで取り組んでいる新規Webサービスのモダンなフロントエンド開発に関することとして、Next.jsやAMPについて紹介します。 目次 はじめに モダンなWebフレームワーク React/Next.js TypeScript styled-components AMP AMPとは AMPの開発パターン Next.jsとAMP AMPキャッシュ AMP と 非AMP の共存 検索結果カルーセルとSEO AMPの開発における注意点 まとめ はじめに リク

Repositoryによる抽象化の理想と現実/Ideal and reality of abstraction by Repository

ごきげんよう、人間関係でボロボロになって療養中のえるきちです。最近はリハビリにとあるJavaScriptのプロダクトを作っております。近いうちにアルファリリースとかできたらいいな。 今年の秋に技術書典3というイベントが開催されます。7/23が申込期限です。みなさん申し込みましょう。本の内容が決まってない？受かってから考えてもいいんですよ！ 技術書同人誌を書くといいよの話 皆さんもQiitaに記事を書いたりしてるじゃないですか？それと同じです。アウトプットするために、知識や経験をまとめたり調べたりしてブラッシュアップする過程自体経験としてとても有意義です。ブログ記事よりももっと体系的にまとめるので、得られる経験値はblogの比じゃないです。文章の組み立て方、考え方、技術に対する視点、そういったものにいい影響を与える……かもしれません。 商業誌に記事を書くというのもいい経験だと思いますが、同人

D Technologies のゆずしおこと福田涼介です。 2019年12月4日、誰でも”0円”で本格的なアプリを作れる『Appify (アッピファイ)』のα版をリリースします。 Appifyは「単純なコンテンツしか配信できない」「デザインが固定されている」「サクサク動かない」など、既存のクラウド型アプリ開発サービスと違い、アプリごとに最適な機能・UI/UXを実現します。 【Appifyを利用するメリット】 ・ アプリ毎に機能のカスタマイズが可能なので最適なアプリを作れる ・ 初期リリースまでの費用が0円なので開発費を抑えれる ・ 開発から運用まで全てを解決できる ・ エンジニア・デザイナーを雇う必要がなくなるα版にはなりますが興味を持っていただければ、以下のフォームよりご連絡ください。 開発の流れ 作りたいアプリの概要やデザインを弊社に伝えていただくと、それがサクサク動くアプリに変わりま

はじめに あなたのふりかえりを拡張するふりかえりチートシートを公開いたします！ この記事では、技術書典7以降配布している「ふりかえりチートシート」の説明を行います。 ふりかえりチートシートは、ふりかえりの手法84個とその特徴を網羅した一覧表です。下記画像はイメージです。 pdfはBoothで無料DLできます。 DLはコチラ => （DL版）ふりかえりチートシート ふりかえりチートシートとは ふりかえりの様々なシチュエーション（ひとり、チーム、プロジェクト、組織）で利用可能なふりかえりの手法をまとめたチートシートです。 ふりかえりの各手法を「ふりかえりの5つの流れ」と「ふりかえりの8つの型」に沿って分類しています。 B5の2ページ分のpdfファイルで、両面印刷したものをイベント等で配っています。 DLしていただいたものは、ご自由に印刷＆ご利用ください。 ふりかえりチートシートの想定利用対象者