フロントエンドを100倍速くした（ ＾ω＾） - Qiita
おはようございます、なのくろです。年の瀬ですね。 この記事は ABEJA Advent Calendar 2020 の最終日です。 追記：おかげさまで Qiita LGTM賞 を受賞いたしました、ありがとうございます！ 私は2020年01月にABEJAへ入社しました。チームではフロントエンド開発全般を任されています。 参入してちょうど１年が経過しましたので、今年取り組んだことをまとめました。 「フロントエンドを100倍速く」というタイトルは誇張気味なのですが、難しいことはせず、基本的なパフォーマンス改善を素直に実践したという話を書きます。 本稿では事例とやったことを紹介するのみですが、何かしらの知見や改善のきっかけに役立てば幸いです。 サービスについて 話をする前に、どんなサービスを開発しているかについて少しだけ触れます。 ABEJA社では「Insight for Retail」という、小
Webエンジニアが勉強できるGit Repository 10選 - Qiita
2021/02/21 10選 => 12選に更新 2021/04/12 おまけを追加 2022/01/04 おまけにThe Modern JavaScript Tutorialを追加 こんにちは、WEBエンジニアのhedrallです。 もう一歩踏み込んでプログラミングに関して勉強をしようと思った時、 世の中には学習のためのレポジトリが存在していて、しかも世界的にはものすごい数のStarを獲得しているものも少なくないことを知りました。 今回はピックアップしてご紹介いたします。 [⭐️ 96.6k]: javascript-algorithms プログラミングで使用されるデータ構造や、一般的なアルゴリズムがまとめられており、全てjsで実装が例示されています。 [⭐️ 149k]: developer-roadmap webやinfraなど各分野のエンジニアになるために知っておくべき技術がロード
英語力と技術力向上のための海外Tech系Youtuber10選 +n - Qiita
身につまされる英語力問題。手っ取り早く英語を習得するなら海外に行ってしまうが最善なはずですがこのコロナ禍、身近なところで英語に触れつつ技術も勉強したい？といえば、動画です。 10 Developers You Should Follow to Improve Your Skills (スキルを上げるための、フォローすべき開発者10選) という記事があったので10人をまとめた。プラスオマケ。それぞれ実際に動画を見てみての補足付き。 1. Ben Awad (ベン・アワド) ソフトウェア開発者。React、React Native、GraphQL、Typescript、Node.js、PostgreSQL、Python、その他あらゆるコーディングについて紹介。React.jsやGraphQLの開発者にお勧め。ビッグ／テック コーディングインタビューの準備を手ほどきしている。「アルゴリズム形式の
Webフロントエンド開発で役立つサービスまとめ - Qiita
この記事では、Webフロントエンド開発において役に立つと思われるサービスやツールをまとめます。 全般 Can I use 指定した特定の機能が、どのブラウザのどのバージョンで利用可能かを確認するためサービスです。新しいJavaScriptのAPIやCSS3の機能を使ってモダンなWeb開発を行う場合、必須とも言えるくらい利用することになります。 指定した国におけるブラウザのシェア情報をもとにして、特定の機能が何割のユーザーで使用可能かを調べることもできます。 npm / webpack BUNDLE PHOBIA 指定したnpmパッケージのサイズを調べるサービスです。近年のWebではページの表示速度が非常に重要視されており、Webサービスにバンドルするパッケージのサイズも極力小さくすることが求められています。パッケージのサイズを調べる方法は多々ありますが、このツールの場合はパッケージ自体のイ
2021年のTypeScript環境構築で絶対入れるべき「better-typescript-lib」の紹介 - Qiita
こんにちは。この記事は筆者が開発した「better-typescript-lib」を宣伝する記事です。これは、導入するだけでTypeScriptプログラムがより型安全になるという素晴らしいライブラリです。あくまで型定義なので、導入してもランタイムの挙動は何も変わらず、バンドルサイズなどへの影響もありません。 better-typescript-libの導入法 ここに記載されているのはv1 (TypeScript 4.0 〜 4.4向け）のインストール方法です。v2 （TypeScript 4.5〜）ではインストール方法が変わり、最初のnpm installのみで良くなります。詳しくは次の記事をご覧ください。
WSL2の導入とGUI環境の構築とsshfsしたものもgnome-openしたい!! [Ubuntu18.04/20.04] - Qiita
WSL2の導入とGUI環境の構築とsshfsしたものもgnome-openしたい!! [Ubuntu18.04/20.04]UbuntuWSLubuntu18.04WSL2ubuntu20.04 2020年春の大型アップデート以降、Linuxがまともに使える(正確にはLinuxカーネルを載せる)ようになるWindows Subsystem for Linux 2が正式リリースされます。wsl2のインストール方法のほか、wslとGUIの導入方法がやや異なるので紹介していきます。 なお、本記事は2020年春のアップデート以前に、Windows Insider Programに参加し、Windows2004をインストールしてwsl2を導入できるのでそれを基に書かれたものです。ただし変わっていないので問題ないです。（一応補足しておくと、2021年の大型アップデート以降?ならpowershellで
![WSL2の導入とGUI環境の構築とsshfsしたものもgnome-openしたい!! [Ubuntu18.04/20.04] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/320e4a2a7bb431c2e78be969b3fa2292837b449a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9V1NMMiVFMyU4MSVBRSVFNSVCMCU4RSVFNSU4NSVBNSVFMyU4MSVBOEdVSSVFNyU5MiVCMCVFNSVBMiU4MyVFMyU4MSVBRSVFNiVBNyU4QiVFNyVBRiU4OSVFMyU4MSVBOHNzaGZzJUUzJTgxJTk3JUUzJTgxJTlGJUUzJTgyJTgyJUUzJTgxJUFFJUUzJTgyJTgyZ25vbWUtb3BlbiVFMyU4MSU5NyVFMyU4MSU5RiVFMyU4MSU4NCUyMSUyMSUyMCU1QlVidW50dTE4LjA0JTJGMjAuMDQlNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWIxMzYxZmMzY2EyZjQ3OWMwYzFhZjMxZGFmNTc3Zjhk%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtb21vbW9fcmltb3RvJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0xOTU5MzQ4NzlkMDEwNDU4MWUxZGY5ZjNmMmFiZWM1MA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D9c96301df8a58fe16d63113591b84d9c)
入門書を終えた人に捧げる、社会人のためのGit中級編 - Qiita
自分が実際に企業で働くうえでよく使ったコマンドや役に立った設定をまとめてみました。 Git入門系に関しては飽和していると思いますが、ちょっとした応用編としてご覧いただければ幸いです。 自分の環境 ファイルの数や行数が膨大 複数の案件が同時進行することが多く、質問などに答えたりするためにブランチ移動をすることが多い プロジェクト内に複数文字コードが混在している（Shift-JISとUTF-8） コマンド編 基本のコマンド書きなぐり $ git clone <ブランチ名> <ディレクトリ名> # clone先のディレクトリ名まで指定してcloneする $ git pull # pullする。必要に応じて -u や、 remote名、ブランチ名を打ち込む $ git diff # 差分見る $ git diff master HEAD # 現在の状態とmasterを比較する $ git chec
JavaScript学習ロードマップ - Qiita
JavaScript苦手・・という状況からJavaScript好きになれるロードマップ（多分） 全編ほぼ動画なので、とっても見やすい。挫折しづらい。 全体的な流れとしては、動画見る ▶︎ コードを書いて学習の流れです 個人的に好きなエンジニア系Youtuberのお二人の動画がメインになります Yahoo!出身のエンジニア しまぶーのIT大学さん Web万屋エンジニアチャンネルさん LEVEL ☆ JavaScriptってなに？ そもそもJavaScriptって何？フロントエンドって何してるの？ってレベルを解消 フロントエンド基礎編 / 約40分 LEVEL ★ JavaScript入門編 JavaScriptをマスターするならHTMLを知っておかないかん by 弊社マネージャー HTMLの基礎から、JavaScriptの全体像を学習できます。 HTML入門編 / 約43分 JavaScri
本当にあったやらかしDB設計シリーズ一覧 - Qiita
本当にあったやらかしDB設計シリーズをまとめてみました SQLアンチパターンで書かれているほど高尚な問題ではなく、もっと初歩的な、でもありがちな問題を取り上げています 初心者を脱出したと思っている人に是非読んでもらい、正しく設計してもらうことを目的としています もしここに載っていないパターンを経験したことのある方がいたら是非教えてください 本当にあったやらかしDB設計①【R無しRDB】 本当にあったやらかしDB設計②【囚人番号テーブル】 本当にあったやらかしDB設計③【ロジカルクエリー】 本当にあったやらかしDB設計④【テストチューニング】 本当にあったやらかしDB設計⑤【第三正規化病】 本当にあったやらかしDB設計⑥【見えない削除フラグ】 本当にあったやらかしDB設計⑦【ステートフルDB】 本当にあったやらかしDB設計⑧【ファンクションDB】 本当にあったやらかしDB設計⑨【文字列日付】
5歳娘「パパ、変なAPIを作らないで？」 - Qiita
とある休日 娘（5歳）「パパ、一緒に技術ブログを始めない？」 娘「昔から私とパパがローカルに書き溜めてる技術記事が、かなり溜まってきたでしょ？」 娘「それをブログとして公開してみようよ」 ワイ「おお、それは楽しそうやな」 ワイ「どこのブログサービスを使おうかいな」 娘「せっかくなら、ブログシステムから自分たちで作ってみようよ」 娘「私はフロントエンドを担当するから」 娘「パパはRuby on Railsか何かで、APIを作ってよ」 ワイ「おお、Ruby on Railsなら昔やったことあるわ」 ワイ「RailsのAPIモードで、ブログ記事を返すエンドポイントを作ればええんやな」 娘「そうそう」 次の日 ワイ「API、できたで！」 ワイ「/api/articlesっていうエンドポイントにアクセスしてくれたら」 ワイ「ブログ記事が取得できるようにしておいたわ」 娘「さすがパパ」 娘「そういえば
Node.js でお手軽スクレイピング 2020 年夏 - Qiita
皆さんは Web ページのスクレイピングって書いた事ありますか？私はあります。だってどんなに平和で平穏な生活を送っていても数年に一度はスクレイピングってしたくなりますよね。「うわーまじか！API ないのかよ…。」的な。 そうしたら HTTP クライアントと HTML パーサのライブラリを探してきてインストールした上でごりごり書くことになると思います。でも実際に書いてみると、そうやってライブラリのインストールをしたりサンプルコードで動作確認している時間よりも、HTML を解析して実際にパースしたところから対象の要素を取得して欲しい値を取り出す試行錯誤の時間の方が長かったっていう事はないですか？ 今日ご紹介する Node.js でお手軽スクレイピングは、その辺の試行錯誤の手間を極力減らすことが出来る方法です。2020 年夏の最新版です。 まずは環境から。特に古いものを使う理由もないので 202
Adobe製デザインシステム「React Spectrum」がすごいので紹介したい - Qiita
🚀 Super excited to announce: ♿️ React Aria — Accessible UI primitives for your design system. 👑 React Stately — State and core logic for your design system. 🌈 React Spectrum — Adobe’s design system. Learn more: https://t.co/ucVguh3rqp Github: https://t.co/e8aOfLgCVK — Devon Govett (@devongovett) July 15, 2020 7月15日にAdobeのデザインシステム react-spectrum がリリースされました。 デザイン製も優れていますが、他の部分でのクォリティーが個人的にショックだった
【GAS x Vue.js】JavaScript のみで今、家計簿をつくるとしたら【ハンズオン付き！】 - Qiita
【GAS x Vue.js】JavaScript のみで今、家計簿をつくるとしたら【ハンズオン付き！】JavaScriptGoogleAppsScriptVue.jsQiita夏祭り2020_パソナテック 「JavaScriptのみ」＆「無料」＆「サーバーレス」なスプレッドシートと連携した家計簿をつくる方法を考えてみました。 実際に家計簿アプリを作るハンズオン付きです！ ※こちらの記事は一部古い内容となっております。 Zennに投稿している本を更新していますので、よければこちらをご覧ください。 https://zenn.dev/matsu7089/books/gas-account-book なにを作ったの？ Web上でデータを登録すると、スプレッドシートに反映される家計簿アプリです。 実際のページはこちら。使い方は「家計簿アプリお試し方法」で説明します。 データ追加の他に、データ編集と
Web屋がJavaScriptでゲームを作ってSteamで配信するまでの道のり - Qiita
そもそもなぜSteamで公開するのか この記事ではSteamにフォーカスしましたが、実際はこのゲームはWeb上から直接遊べるし、WebViewでラッピングしてGooglePlayにも公開しています。 SteamとGooglePlayに出した最初の理由は、大きなプラットフォームの力を借りて集客するためです。 LPだけオープンして待っていたとこで誰も遊びに来てはくれないわけです。 なので正直、「Webブラウザで遊べるのに、集客のためだけにわざわざダウンロードしてもらうなんてアホくさいな」、と思っていました。 しかし今となっては、むしろSteam経由で遊んでもらいたい思いのほうが強いです。 Steamのストアに並ぶことは思っていたよりも嬉しくて、 例えるなら、小説を書いたとして、今まではコピー用紙に印刷してホチキスで止めたものを皆に配っていましたが、 今回はちゃんと本になって、カバーがついて、書
テレビが勝手に通信してるを調べた時のメモ（テレビ朝日） - Qiita
テレビのインターネット接続機能 「テレビ視聴データに関する民放５社共同の技術検証および運用実証実験」ってニュースが流れてたけど、そもそも「テレビ視聴データって何？」「どうやって取ってるの？」「Dボタンを押さなくても勝手に通信するの？」と疑問が浮かび調べてみた。 この記事で扱っているデータは、5社共同実験の期間終了後なので、他社と視聴ログを共有しない「テレビ朝日 - 視聴データの取扱いについて」の挙動と考えます。 この記事では扱っておりませんが、他局（ フジテレビ / TBS / テレビ東京 / 日本テレビ / NHK ）からも同様の告知が出ていることから、他局も同様の機能を持っていると考えられます。 作業環境 スイッチは「NETGEAR GS108Ev2」 テレビを接続したポートからパケットキャプチャを接続したポートへのミラーポートを設定。 パケットキャプチャは「Wireshark」 「テ
機械学習で使用する手法を全公開 - Qiita
株式会社デジサク がお送りするプログラミング記事、 今回はAI(機械学習)について扱っていこうと思います。 ※ 無料セミナーも開催中なので、ぜひご覧になってみて下さい。 はじめに kaggleや学習サイトなど誰でも機械学習を学べる機会が増えてきました。 その反面、情報量が多すぎて全体感を掴めていない人が多いと感じています。 そこで、様々な参考書や記事で紹介されている機械学習で使用する手法を全公開しようと思います。 細かなコーディングはリンクを貼っておくので、そちらを参照されてください。 SNS でも色々な情報を発信しているので、記事を読んで良いなと感じて頂けたら Twitterアカウント「Saku731」 もフォロー頂けると嬉しいです。 機械学習の一連手順 まず、機械学習を習得するために必要なスキルは下記です。 実務の場では数段細かな作業が必要になりますが、最初は下記を勉強するだけで十分で
はじめてなElixir(0) - Qiita
はじめてなElixirシリーズが20を越えたので目次を作ってリンク集っぽくしておきました。念のため申し上げておきますが、もともと初心者の私の備忘録ベースですので、初学者の方向けとは言いかねる部分も多々あろうと思いますので、そのおつもりでご利用くださいませ。 はじめてな Elixir(33) Syn (v3.3) で Pub/Sub する はじめてな Elixir(32) Syn (v2.1) で Pub/Sub する はじめてな Elixir(31) Swarm で Pub/Sub する はじめてな Elixir(30) プロセスのホットスワップをする はじめてな Elixir(29) Registry で Pub/Sub する はじめてな Elixir(28) Logger ライブラリを改造する はじめてな Elixir(27) ノード間の通信がどうなってるか調べる はじめてな Elix
ネットワーク越しでパイプしたり、あらゆるデバイス間でデータ転送したい！ - Qiita
何を解決したいか？ Mac, Windows, Linux, iPhoneやAndroidのスマホ・タブレットとかのデバイス間でデータの転送したいことがあります。 SlackとかLineとかSkypeとかAirDropとかあっても 送りたい相手と共通して使っているサービスを探す必要とか、 GUIのソフトウェアのインストールが必要とか、 AirDropだとApple系OSである必要 があるなどの転送の障壁があって、GUIが使えないデバイスに送りたいときなどは困ってしまいます。 すでにたくさんのファイル共有系のサービスがありますが、コマンドを使ったCUIベースにあまり親切な設計なものはあまりないと思います。 そこで、上記の問題を解決するために、以下のようなファイル転送の仕組みを作りました。 他デバイス間でデータ転送ができ、 別途ソフトウェアのインストール不要で、 パイプにとても親和性が高くエン
今から始めるReact入門 〜 flux編 - Qiita
目次 今から始めるReact入門 〜 React の基本 今から始めるReact入門 〜 React Router 編 今から始めるReact入門 〜 flux編 ←★ここ 今から始めるReact入門 〜 Redux 編: immutability とは 今から始めるReact入門 〜 Redux 編: Redux 単体で状態管理をしっかり理解する 今から始めるReact入門 〜 Redux 編: Redux アプリケーションを作成する 今から始めるReact入門 〜 Mobx 編 はじめに この記事は"今から始めるReact入門" 記事の続編です。最初から読む場合は以下の記事からスタートしてください。 今から始めるReact入門 〜 React の基本 flux とは Flux とはユーザインタフェースを構築するためのアプリケーションアーキテクチャです。 React は状態管理についての
GraphQL入門 - 使いたくなるGraphQL - Qiita
本記事は Livesense Advent Calendar 2016 - Qiita の24日目の記事になります。 公開から1年ほどたち、当初はRESTの次の潮流か！？みたいな感じになったものの、イマイチ盛り上がってる気配のないGraphQL。 ただ、気になっていた技術だったので、気にせず2016年が終わる前にざっと調べてみました。 ここ2日ほどでざっと調べたもののまとめなので、理解や解釈に誤りや言ってる意味がわからないところがあればご指摘いただければ幸いです。 TL;DR 内容をコンパクトにしきれず（Queryにばかり集中して、Mutationについては全然触れてないのに！）かなり長くなってしまいました。実際は、 GraphQL | A query language for your API のTOPページを読んで雰囲気を掴み、 The GitHub GraphQL API | Git
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
