某社で自分が React/Redux + TypeScript などの講習をやってみた結果、TypeScript 入門用資料が必要だと思って書いたやつです。 このドキュメントのターゲット TypeScript で書かれたプロジェクトに参加する人 TypeScript を導入するために、その事前知識が必要な人 このドキュメントの読み方 ES2015 for Beginners ES2015 for ES5 Programmers ES Modules 非同期表現: Promise と async/await TypeScript エコシステム編 自分が React/Redux などの講習でいろいろやってみた結果、 ES2015 と TypeScript を同時に教えると、初学者は何がどの概念に由来するかの区別が出来ずに混乱します。なので、ES5 -> ES2015, ES2015 -> Ty
Ajax/JavaScriptライブラリをまとめておきます。（順不同） | 基本 | 統合 | 表示系 | GUI部品 | イメージ | PGM連携 | ブラウザ | Flash | その他 | | 部品集 | リンク | 編集履歴 | ・基本ライブラリ ・・・Ajax開発のベースになるもの ↑TOP prototype.js 超メジャーなAjaxライブラリ prototype.js の開発者向けメモ prototype.jsリファレンス prototype.jsリファレンス(JavaScriptist) prototype.js逆引きサンプル集 Prototype 1.5.0 Cheat Sheet Prototype 1.5 PDF － API/サンプル/解説 Prototype.js Documentation － まとめサイト Prototype 1.6.0へのアップグレード実例紹
入社からの半年間でコードレビューで指摘されたことのまとめ - 30歳からのプログラミング
実務未経験でプログラマとして入社して半年以上が経った。 コードレビューで指摘されたことを備忘録としてまとめておく。 自分なりにまとめたものなので、レビュアーが言いたかったこととニュアンスや解釈がずれている可能性はある。 初歩的な内容ばかりで我ながらうんざりする。 せっかく優秀な同僚ばかりなのだからもっと高度なことを学びたいが、こういう初歩的なことが出来ないのが俺の現状なのだから、仕方ない。 そもそもPullRequestを送ったこともなかったわけだし。入社初日は、一人でPullRequestの出し方を練習していた。 それを考えればまあ、こんなものだろうか。 当たり前のことをちゃんと当たり前に出来るようになって、早く、次のステージに進みたい。 PullRequest(PR) PRのタイトルは分かりやすいものに。必要に応じてチケットの番号なども入れる。 コミットやPRは出来るだけ粒度を細かくす
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
Nikon D40 / Kyoto. パソコンで使えるポップアップ辞書環境についての続報です。以前記事を書いたように、かつてはDokopop＋PDICを愛用していたけれど、Firefox3ではDokopopが使えないため、Fast Look up Alcに移行したという話を前回書きました。しかし、辞書を引くためにいちいち単語を選択反転させなければならないのは煩わしく萎えてしまうので、Fast Look up Alcはほぼ利用しなくなりました。あれからいろいろと試行錯誤した結果、現在自分はこのようなポップアップ辞書環境に落ち着いています。1．Firefox3で利用する場合、2．PDFファイルを読むときに利用する場合という二つのケースを想定し、Dokopop＋PDIC、Mouseover Dictionary、Babylon、Lingoesという4つの手軽に利用できるポップアップ辞書ソフトをあ
「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ｜ハイクラス転職・求人情報サイト AMBI（アンビ）
scalar型を新しく定義するためにはscalarキーワードを使います。例えば、Date型を新しく定義するには次のようにします。 scalar Date スキーマではこれだけですが、実際に使う際はGraphQL処理系に対してさらにシリアライズとデシリアライズを定義することになります。 GraphQL組み込みのscalar型は先にあげたものだけなので、例えばバイナリ、日付と時刻、HTML/XML、BigIntなどを必要に応じて追加することになるでしょう。ただしその場合、サーバーサイドとクライアントサイドでシリアライズ・デシリアライズの実装を一致させる必要があります。 Enum enum（イナム）はscalar型の一種で、特定の値のみを持つ型です。例えば、組み込みscalar型であるBooleanをenumで宣言すると次のようになるでしょう。 enum Boolean { true false
サイボウズで学んだこと - IT戦記
はじめに 2010 年 9 月 15 日を持ちまして、サイボウズ・ラボを退職いたしたました。 報告も兼ねて、久しぶりにブログを書いてみたいと思います。 （写真はゆうすけべーさんです） この会社に入って、たくさんの学びと思い出がありました。 その一つ一つをまとめていければ、素晴らしい記事になるのかもしれませんが、僕は文章が苦手です。 ですので、うまく退職のエントリを書き上げることができません。 言葉にできない。そんな感じです。 なので、このエントリはサイボウズ・ラボやサイボウズ本社の仲間たちへのありがとうの気持ちをこめて、自分らしく最後まで JavaScript のことを書きたいと思います。 サイボウズでの最後の仕事 僕にとって、サイボウズでの最後の仕事は「JavaScript で新しいユーザーインタフェースを作ること」でした。 そして、その中で始めて複数人による大規模な JavaScrip
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
home blog labs about contact プログラミング・開発 > プログラマでも出来るWebデザイン (X)HTML CSS テンプレート デザイン 画像 作成： 2007-01-08T01:58:41+09:00 更新： 2009-04-29T09:48:31+09:00 年始早々に大幅リニューアルした当ブログですが、リニューアルのお知らせでも書いた通り、 今回のデザインリニューアルに当たっての作成過程や、使ったツールを書いていきます。 デザインセンスの無い私にとって、今回のリニューアルは良く出来たと自負しているので、 お題はプログラマでも出来るWebデザイン。 前提として、CSSでコーディングが出来て、ある程度HTMLは設計出来る、でもデザインは・・・orz な人を対象にしています。 使用したツール・サイト一覧 作成過程は後半に書くとして、今回使用したサイト・ツールで
パフォーマンス改善ハンドブック ウェブページにおけるパフォーマンスに関する問題の見つけ方や考え方の事例をまとめた Webフロントエンド パフォーマンス改善ハンドブックを公開しました。 URL: https://dwango-js.github.io/performance-handbook/ このハンドブックでは過去に行ったWebフロントエンドのパフォーマンス改善の事例を中心に紹介しています。 注意点としてWebフロントエンドは常に変化しているため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを用い、映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのWebフロントエンドを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれていま
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
ロゴの自動生成サービス「Free Logo Generator Online」が今までにないレベルで高機能だった話と、これはデザイナの仕事を奪うのかどうか。｜榊原昌彦
ロゴの自動生成サービス「Free Logo Generator Online」が今までにないレベルで高機能だった話と、これはデザイナの仕事を奪うのかどうか。 このツイートをしたところ、大きな反響をいただきまして、かるく解説記事を書いておきます。 どういうサービスなの？オンラインでネットショッピングをつくることができる有名サービス「Shopify」のはじめたロゴ自動生成サービスです。13のビジネス分野、18のデザイン属性から自分にあったものを選択し、ロゴに入れる文字をタイプするだけでロゴを自動生成することができます。また、生成したロゴのフォント、色、アイコン、レイアウトの調整も可能ですので、自動生成といいながらほぼあなただけのロゴを自動生成することができます。 使い方ログイン不要です。https://hatchful.shopify.com/ にアクセスして、右上の「GET STARTED」
Androidアーキテクチャことはじめ ― 選定する意味と、MVP、Clean Architecture、MVVM、Fluxの特徴を理解する｜ハイクラス転職・求人情報サイト AMBI（アンビ）
Androidアーキテクチャことはじめ ― 選定する意味と、MVP、Clean Architecture、MVVM、Fluxの特徴を理解する Androidアプリの開発において悩ましいアーキテクチャの選定。本記事では選定する意味を改めて整理し、 MVP・Clean Architecture・MVVM・Fluxといった最新の実例を紹介します。 はじめまして。Androidエンジニアの藤原聖（ふじわら・さとる／@satorufujiwara）です。 現在は株式会社サイバーエージェントで、エンジニアリングマネージャーを兼任しています。2017年で35歳になり、定年を迎えました（プログラマの定年については「体型を支える技術」などを参照）。 Androidアプリ開発には2010年から携わっていますが、今現在の関心事は何といっても公式開発言語に採用されたKotlin。そしてもう一つが、Androidの
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! - paiza times
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
// Good: choose between two options as appropriate (see below). import * as ng from '@angular/core'; import {Foo} from './foo'; // Only when needed: default imports. import Button from 'Button'; // Sometimes needed to import libraries for their side effects: import 'jasmine'; import '@polymer/paper-button'; Import paths TypeScript code must use paths to import other TypeScript code. Paths may be r
［積み上がるアップルのキャッシュ：asymco］ アップルが大量の現金資産を保有していることはよく知られている。 質の高い Q&A サイトとして注目を浴びている Quora が注目すべき解説をしている。アップルがこのキャッシュを実に戦略的に使っているというのだ。 Quora: “What would make sense for Apple to use its $51+ billion in cash for a strategic acquisition?” by Anon User: 01 July 2011 ＊ ＊ ＊ 戦略的買収はどうか？ 問： 510 億ドルのキャッシュをアップルが戦略的買収に使ってはどうか？ What would make sense for Apple to use its $51+ billion in cash for a strateg
IAEA のレポート http://www-pub.iaea.org/MTCD/publications/PDF/TRS422_web.pdf 食物連鎖を通じた放射性セシウムの移動（捕食者への時間遅れの汚染蓄積） チェルノブイリ事故で汚染されたキエフの貯水湖では、餌となる小型魚(上)のセシウムの値は事故の後すぐに上がったのですが、捕食魚（下）のセシウムの値は翌年になって跳ね上がりました。食物連鎖を通じて、上位捕食者に時間遅れで放射性物質が伝わったのです。Chernobyl’s Legacy: Health, Environmental and Socio-Economic Impacts チェルノブイリの事故後で、日本近海の表層海水の汚染のピークは１月後、スズキの汚染のピークは半年後、マダラの汚染のピークは９ヶ月後でした。（海生研ニュース No.95 p7より引用）。 福島周辺海域では、植
本の虫: Linus、今までの行いを謝罪し一時的にカーネルメンテナーの立場を退いて人の気持ちを勉強してくると発言
Linus、今までの行いを謝罪し一時的にカーネルメンテナーの立場を退いて人の気持ちを勉強してくると発言 完全に背景事情を調べ上げたわけではないのだが、どうもLinusが毎年参加しているLinuxカーネルの会議に、Linusがスケジュールを間違えて参加できなくなるという事態が発生した。当のLinus本人はもう20年も続いている会議だし自分がいなくてもやっていけるだろうと楽観視していたが、会議自体がLinusの都合にあわせてリスケジュールされた。 LinuxにおいてLinus Torvaldsといえば第一人者であり極めて重要な存在で、そのLinusが毎年参加している重要な会議にLinusが参加できないとあれば、その他のあらゆるコストを度外視して根回し調整を行い、Linusが参加できるようにイベント全体のリスケジュールを行うのは人間の感情から考えて当然である。しかし当のLinus本人は他人の感情
と思う次第である。以下理由。 JavaScript, GUI設計の今 JSはそのプラットフォーム特性上、あらゆる言語の使用者の、あらゆる不満が集まる場所で、ヘイトを集めやすい環境だと思う。近年は npm というプラットフォームの登場でエコシステムが生まれ、思いつく限りあらゆるメソッドが適用されてきた。貧弱な言語基盤だが、その中で生き残った方法論が、今一番GUIの課題を上手く扱えている、と自分は考えている。 React/Redux や Angular によって、Flux/MVVMという抽象パターンが枯れてきたように思う。(この際、現場はまだ jQuery だぞ、みたいな話は無視する)。要は View は State の写像である、ということに尽きる。State はシリアライズ可能(JSON)で、Flux Action/Rx.Observable の Event Stream を入力とし、それ
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
Intro Fetch API の実装が広まり、 IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。 Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、 Web API の中でもかなり異質な命名である XHR が、 XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、 Microsoft の命
autoscale: true theme: Plain Jane,5 複雑なJavaScriptアプリケーションを考えながら作る話 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info #jsprimerを書いています JavaScript入門書に興味ある人はウォッチ :star: :warning: 注意 :warning: 作成するアプリケーションによって必要な構造は異なります 今回の話はある程度の規模で複雑性を持つクライアントサイド ライブラリ抜きで数万LOC >= 長期的にメンテンナンスや変更が発生するアプリケーション サーバサイドレンダリングはしないクライアントアプリケーション 3行でOK 複雑なJavaScriptアプリケーションを作るにあたりドメインモデルをどう実装するか悩んだ 色々と試行錯誤した
現役東大生だが上野千鶴子の祝辞はゴミだと思う
女子学生の置かれている現実その選抜試験が公正なものであることをあなたたちは疑っておられないと思います。もし不公正であれば、怒りが湧くでしょう。が、しかし、昨年、東京医科大不正入試問題が発覚し、女子学生と浪人生に差別があることが判明しました。文科省が全国81の医科大・医学部の全数調査を実施したところ、女子学生の入りにくさ、すなわち女子学生の合格率に対する男子学生の合格率は平均1.2倍と出ました。問題の東医大は1.29、最高が順天堂大の1.67、上位には昭和大、日本大、慶応大などの私学が並んでいます。1.0よりも低い、すなわち女子学生の方が入りやすい大学には鳥取大、島根大、徳島大、弘前大などの地方国立大医学部が並んでいます。ちなみに東京大学理科3類は1.03、平均よりは低いですが1.0よりは高い、この数字をどう読み解けばよいでしょうか。↑ソースはここhttp://www.mext.go.jp/
- はじめに - 9月くらいから趣味でフロントエンド周りをやっていたので、その勉強過程のまとめ。 何が良かった悪かったとか、こうすればよかったとか、所感とか。 - はじめに - - 前提 - - どんな感じで進めたか - 最初の開発 TypeScriptとNext.jsを使った開発 アプリ手伝いから自分のアプリ開発まで - できてないこと - - 所感 - - おわりに - - 追記 - - 前提 - 前提として9月頭くらいの私のフロントエンドに対する理解と技術的な知識はこんな感じ。 5年程前まではjQueryで謎のWebサービスや動きモリモリのプロフィールページを作ったりDjangoで研究室のWebサイトを作ったりしてた Railsチュートリアルはやったことある 仕事では普段機械学習モデル作ってるが、機械学習のデータやモデルの変更が及ぶ場合に既存のPHP、Railsアプリの改修をしたり、
Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい
某所で書いたものを公開用に書き直したもの 前提 フロントエンドでTDDは難しい、というかほぼ不可能である。なぜなら事前に副作用をデータとして表現できるか不明だからだ。たとえばあなたのプロダクトの画面の何処かにボタンを追加するために、その内部表現を事前に思い浮かべることが可能だろうか？ react-redux などのFluxフレームワークは如何に副作用をアクションとして表現することで、テスト・デバッグのための情報を残すか、という視点で発展してきた側面がある。あの冗長なアクション定義は、全てデバッグのために書いていると言っても、過言ではない。それすら「Textは文字がある」といったトートロジーなデータになりがち。 フロントエンドの現実的な単体テストは、他の開発者のために、自分が書いたコードの要求を満たしているか検知する手段として、防衛的にテストアフターしておく。これぐらいしか現実的な手法がない
NetflixのgithubリポジトリはWeb技術の百貨店だった - DiaryException
検索しているとなにかとNetflixのgithubリポジトリがヒットするので、全部（2015/07/18現在分）調査してみた。 github APIで https://github.com/Netflix のリストを全部取得して、名前・概要・URL・最終更新日時 (なんの更新だ?) を抽出。 AWS用のプロダクトが多かったのでまずそれらと、その他という分類にした。その他はほとんどがJavaライブラリ・システムだが、一部WebアプリケーションやPythonライブラリがある。 日本語での説明はReadmeやWikiを見て書いているが、理解が正しくないかもしれない。 AWS用 aws-autoscaling Tools and Documentation about using Auto Scaling URL: https://github.com/Netflix/aws-autoscalin
React ステート管理 比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
よくプログラマー（エンジニア）は、 数学が得意な人じゃないと出来ないとか言われたりしますが、 個人的には数学というより、 英語が出来る（好きな）人の方が有利だと思っています。 だってプログラミングってコメント以外英語ですし。 「なでしこ」とかはありますけどｗ 僕は学生時代、どちらかと言うと数学が苦手なタイプでしたが、 英語はわりと出来る方でした（というか好きだった）。 もちろん、数学も出来た方が有利に決まっていますが、 普通にご飯を食べていく分にはそんなに必要無いと思います。 ということで、 英語の意味を理解すると、仕事が更に捗るんじゃないかと思いまして、 プログラミングとかウェブで出てくるけど、 ちょっと意味が分かりづらい英単語30個をまとめてみました！ プログラミングで出てくる英単語30選 英単語読み方意味 allocate アロケート 割り当てる attr（attribute） アト
※追記：はてブ経由で来られた方は、できればこの感情にまかせて殴り書きした記事よりも、前日に頑張ってまとめた「熱中症対策まとめ」の記事を読んでいただきたいです。参考になると思います。 http://tyoshiki.hatenadiary.com/entry/2018/07/21/110814 明らかに不自然な点が多く、それほど疑うことに難易度が高くないはずの話だったのに、こんなにはてなブックマークがキレイに騙されたのは珍しい気がする。 この件について、私は「おかしくね？」ってコメントをしていたのですが、それにスターをつけてくれたのはふたりだけでした。全体的にみんな前のめりになって学校や教育委員会を叩くことに夢中になっていたと思います。 はてなブックマークも万能じゃないよね、というだけの話かもしれないのですが、私は「教育関係の話題ににおけるはてなブックマークコメントの質の低さや思考停止ぶり」
大澤昇平東大最年少准教授、東大から追い出される
大澤昇平 @Ohsaworks 会社員。元株式会社Daisy代表取締役CEO・元東京大学特任准教授 【略歴】東京大学大学院博士課程卒(TMI PhD)、IBM(-2017)、UT松尾研助教(-2019) 【著書】AI救国論、AI2.0覚日 ※保守SNS®「SAKURA」に関する問い合わせ先はこちら→@_sakurainc_ https://t.co/f4tAxzebZk 橋本敦史🇺🇦 @a_hasimoto @Ohsaworks 細かい制度は大学（や部局）毎に千差万別なため，適切な方法はお調べになられたら良いと思います．もちろん，成績情報や人事関係など開示不可なものはありますが，部屋の利用のみの決定ならば下記資料5(3)における開示すべき情報になる可能性はあるかも知れません． mext.go.jp/component/b_me… 2019-12-13 18:36:27
25K request/secをさばいた「LINEのお年玉」のアーキテクチャの裏側 - LINE ENGINEERING
みなさんこんにちは、LINEのサーバーサイドエンジニアの長谷部です。普段は、最近でいうとLINE Login や LINE Customer Connect などの開発を担当しています。 2018年の年始に LINEのお年玉 というイベントを実施し、その開発を担当しました。今回の記事では、LINEのお年玉のアーキテクチャの紹介や、当日実際に発生した問題(サービス過負荷起因のkafka consumer遅延)などの振り返りについて書こうと思います。 LINEのお年玉とは お年玉イベント期間中に、お年玉とLINEスタンプをセットで「お年玉つきスタンプ」として販売しました。対象スタンプを購入したユーザーさんは、スタンプ購入数 x 10個 のお年玉が付与されます。 こういったメッセージが受信されます ユーザーは自分がもっているお年玉を友だちに直接送ったりグループに送信することができ、お年玉を受け取
はじめまして。Kyashでデータエンジニアリングを担当しているKyashデータマンです。この記事では、Kyash社内のデータ分析の基礎に関するドキュメントを紹介します。 Kyashでは、データエンジニアリング・ガバナンス・セキュリティなど様々な角度から、公正なデータの取扱いと活用を推進しています。従来は、一部の訓練された技術者がデータ分析を一手に担っていましたが、社内でもデータ活用のニーズも多く、その担当者に分析や集計の業務が集中するという課題がありました。 この課題に対して、データへの適切なアクセス管理を行い、そして適切なBIツールを導入することで、データを取り扱う人が自分でデータ分析・そして活用できるようになることを目指しています。アクセス管理には、個人情報やそれに準ずる機密データに対して、ポリシータグによるアクセス権のコントロール、そしてアクセス権のリネージなどのソリューションの導入
【完全図解】超初心者でも大丈夫。話題のゲームエンジン「Unity」での3Dゲーム作成入門 ライター：Veki 12345→ ●Index ・UIと基本操作（物理エンジン） ・物体を動かしてみる（スクリプト，入力処理） ・インスタンスを生成する（プレファブ） ・当たり判定と爆発処理 ・敵の発生と文字表示 登場以来，注目度が上がり続けているゲームエンジン「Unity」。個人や(前年度の収益が一定の収入に達していない)企業はフリーで使用できるほか，スマートフォンやWebブラウザ上で高品質な3Dゲームを実現できるなど，話題の多い製品です。コミュニティ活動も盛んで，たくさんの素材が流通しているほか，最近ではUnityに関する日本語の情報も次第に増えてきました。 Unityは，手軽に使える本格的なゲームエンジンであるのは確かですが，まったくの初心者にはまだまだ分かりにくい部分が多いのも事実でしょう。ち
Vim Advent Calender 2011 45日目の記事です。今回のテーマはソースコードを素早く追いかけるです。 Vimをお使いの皆さんは設定ファイルや文書作成以外にもソースコードを作成・メンテ・閲覧などに利用されている事と思います。 そこで、ソースコードを追いかける時に便利なプラグインをご紹介したいと思います。なお、この記事は過去に私が書いたエントリーを再構成した内容となっています。 追いかけるソースコードを用意する まずは、追いかけたいソースコードを用意しましょう。例としてあげるソースコードはVimで世界的に有名なc9sさんが作った、巷で話題のRubyのBundler（やVimのVundle）ライクなPHP版Onionです。 $ git clone https://github.com/c9s/Onion.git cd ./Onion プラグインを設定する Source Exp
エンジニアのための Figma 知識
本記事の多くは Inspect モードを前提に解説しています。 下記に Dev Mode に対応した解説を書いてみたのであわせてご参照ください。 https://codezine.jp/article/detail/18000 エンジニアにデザインツールの知識・習熟は必要か？ しなくても仕事はできると思うのですが、あるとよりクオリティの高い仕事ができることは間違いありません。 という訳でエンジニアがエンジニアとしての仕事をしていく上で「Figma のこういうことを知っておくと良さそう」という知識をまとめてみました。 ユースケースを考える まず始めにデザインは作らないはずのエンジニアが Figma を使う時にどんなユースケースがありそうかを考えてみます。 デザインを元に実装する時 デザインから何かを生成したい時(コードとか画像とか) 自分でちょこっとデザイン修正しちゃう この辺りがあるかな〜
現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユーザーの好みや環境に合わせて最適なコンテンツを提供できるようになります。 これらの新しいレスポンシブデザインのコンセプト・実装方法を紹介します。CSSがこれまで以上に進化します。 The new responsive: Web design in a component-driven world by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブデザインの現状 ユーザーでレスポンシブ コンテナでレス
Webサイトのスクリーンショットを撮るサービスの作り方
SimpleAPIなどで有名な「Webサイトのスクリーンショットを撮ってサムネイル画像を作成してくれる」サービス。 SimpleAPIは、 「1人で作るなら、一気にやるのが重要」SimpleAPI・伊藤まさおさん の伊藤まさおさんが一人で作っています。 今回は、各スクリーンショット提供サービスを紹介した後、実際にこのサービスを作る手順を検証し、さらなる応用サービスにつなげる方法を考えてみます。 Webサイトのスクリーンショットを撮ってサムネイル画像にしてくれるサイト まずは、Webサイトのスクリーンショットを撮ってサムネイル画像にしてくれるサービスとして有名なサイトを紹介しておきます。 SimpleAPI - ウェブサイト・サムネイル化ツール 日本国内、海外からも大人気。ややサムネイル結果が不安定。 Mozshot ページごとにきれいに出力。大規模利用は禁止。 サムネイルAPI APIとし
Linuxのパッケージをアップデートしたあとrestartが必要なプロセスを見つける方法 - Qiita
はじめに 脆弱性対応のためのアップデート作業というものは頻繁に発生するものですが、本番運用しているシステムではサービスへの影響を最小限にしたいものです。 アップデートした後、出来ることなら必要なプロセスだけリスタートさせることで済ませたいのですが、どのプロセスをリスタートすれば良いのか、そもそもOS再起動しないと反映されないものなのか、判断が付かない場合が少なくありません。 そのような場合のため、再起動が必要なプロセスを見つけたり、OS再起動が必要かどうかアドバイスしてくれるコマンドがあります。 Redhat系 「yum-utils」パッケージに入っている「needs-restarting」コマンドを使います。 # needs-restarting -h Usage: needs-restarting: Report a list of process ids of programs th
これまで、開発者が「早く・それなりの UI 」を実現するために、Bootstrap などの CSS フレームワークが重宝されてきました。 しかし今では、React などのライブラリを使って UI をコンポーネント化するようになってきています。 React であっても、事前に CSS フレームワークを読み込んでおき、クラス名を付与することでこれまでと同じように使うことができます。 ただ、既存の CSS フレームワークは内部で jQuery を使用していることが多いので、React と jQuery を共存させるか、jQuery 部分を自前で実装しないといけません。 そこで React で「早く・それなりの UI 」を作れそうな React コンポーネントセットを手当たり次第に調べてみました。 Note: Web 向け UI の コンポーネントのみとなっています。React Native や
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript入門以前ガイド - mizchi's blog
あるＳＥのつぶやき: Ajaxライブラリまとめ
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
Lingoesというポップアップ辞書が尋常じゃない - plaisir.genxx.com
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
プログラマでも出来るWebデザイン - Blog.37to.net
Webフロントエンド パフォーマンス改善ハンドブックを公開しました - dwango on GitHub
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
Google TypeScript Style Guide
アップルが他社に先駆けて新製品をつぎつぎと投入できる秘密、または他社がなかなか追いつけない秘密
水産物の放射能汚染から身を守るために、消費者が知っておくべきこと - 勝川俊雄 公式サイト
やはりHTML/DOMは再発明されるべきじゃないか - mizchi's blog
2022年におけるフロントエンド開発のベースライン
XMLHttpRequest とはなんだったのか | blog.jxck.io
複雑なJavaScriptアプリケーションを考えながら作る話
3ヶ月くらいフロントエンドやったのでやったこと一旦まとめ - Stimulator
jQueryを卒業したかった僕がReact StaticでReactをイチから学んでWebサイトを作った話 | 株式会社ヌーラボ(Nulab inc.)
フロントエンドの負債と向き合う - mizchi's blog
プログラミングとかウェブでよく出てくる小難しい英単語30選 - Dance with Tech
はてなブックマークが学校のエアコンデマに対抗できなかった件について思うこと - 頭の上にミカンをのせる
ゼロから始める、データ分析と可視化 - Kyash Product Blog
【完全図解】超初心者でも大丈夫。話題のゲームエンジン「Unity」での3Dゲーム作成入門
Vimでソースコードを素早く追いかける - Guyon Diary
CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説
早く・それなりの UI を実現する React コンポーネントセット 16 選 - Qiita