ゆめみのフロントエンドコーディング試験の題材で React の勉強をしました - Mitsuyuki.Shiiba
ちょっと前にツイッターで見かけた、ゆめみのフロントエンドコーディング試験 フロントエンドコーディング試験 「RESAS API を使用して、都道府県別の総人口推移グラフを表示するSPAを作る」っていうお題 React の勉強をするのにちょうどいい題材だなぁって思ったのでやってみた。課題を公開してるってことは「やってみてもいいよ」ってことかなと思ってるんだけど、もし違ったら GitHub のリポジトリーを private にするので連絡ください 1週間でやらないといけないところを2ヶ月近くやってるし、コミットログも特に何も考えずにポイポイ書いたから、全然だめなんだけど、でも、色々勉強になったので、とてもよかった。楽しかったー！ つくったもの こんな感じ これでおわりにするー pic.twitter.com/K8zhrRUp54— Mitsuyuki Shiiba (@bufferings)
文化祭で滞在状況記録システムを運用しました
文化祭からはや 3 ヶ月。ずっと書きたいとは思っていたんですが、すぐ定期試験がやってきたり修学旅行に行ったりしてるうちにズルズル来てしまいました。このまま年を越すわけには行かないので、重い腰を上げて書き上げてしまおうと思います。 文章力が皆無なので読みづらい箇所があったらごめんなさい。質問等ございましたらお気軽にどうぞ！ 1. システム概要 感染症対策の一環として、主に各展示の同時滞在者数の抑制を目的として導入したシステムです。 文化祭への来場者全員にリストバンドを配布します。各リストバンドには個別の QR コードがプリントされており、各展示の入室時及び退室時に、展示のスタッフが Web アプリ上でスキャンを行い、来場者の入退室時間を記録します。 主な機能として以下が挙げられます。 同じ時間に同じ教室にいたのがどのリストバンドをつけていた来場者であるかが分かるため、万が一新型コロナウイルス
2020/07/17: いくつか追記しました はじめに 私は、TechTrainでフロントエンドのメンターとして面談する中で「最近フロントエンドの勉強を始めました！」という方や、フロントエンドエンジニアを目指す学生と話す機会が何度もあります。 その中でよくある質問が 「フロントエンドの情報収集ってどうしてますか？」 です。 何度も質問を貰うので、気になる人は多いのかなと思います。 この記事では「私がどんな風に情報収集しているか」を紹介しようと思います。主に情報収集の流れと、どこからフロントエンドの情報を集めているかについてです。 情報収集の流れ まずは情報収集の流れとして主にプロセス的な観点で整理してみます。 私の情報収集を抽象化すると以下の3つのプロセスがあると思います。 情報源から情報を集める(ex: Twitter, Blog, Qiita) 特定の場所に情報を溜める(ex: はてな
PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。 特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに PurgeCSSとは ビルドツール JavaScriptフレームワーク PurgeCSSの使い方 PurgeCSSをgulpで実装する方法 PurgeCSSをNuxt.jsで実装する方法 はじめに PurgeCSSを使用すると、制作のワークフローに取り入れてCSSファイルを60%以上削減できます。 未使用のCSSを削減しよう 私はしばらくの間、CSSファイ
こちらの記事は、2019年7月に公開された Indrek Lasn 氏による『 2020 and Beyond Programming Trend Predictions 』の和訳になります。 本記事は著者の許可を得て掲載しています。 Thank you for letting us share your knowledge! 著者に何かメッセージがある方は Twitter までご連絡ください。 また本記事は転載であり、本記事はこちらになります。 はじめに 2020年は、もうすぐそこです。 2020年はSFの世界のように聞こえますが、そろそろ新しい世界のドアをノックする時期になっています。 すぐそこまで来ている未来のプログラミングの世界に興味をお持ちの方は、この文章をこのまま読み続けて下さい。 これから述べることは、間違っているかもしれませんが、私が将来起こると考えていることです。 未来を
VTuberのホームページをGitHubのプルリクだけで更新していったらどうなるのか？企画に参戦してみた - Qiita
VTuberのホームページをGitHubのプルリクだけで更新していったらどうなるのか？企画に参戦してみたTypeScriptYARNOSSReactVtuber おめシスはいいぞ VTuberのホームページをGitHubのプルリクだけで更新していったらどうなるのか？という企画に参戦してみた。技術的にも非常に面白い試みだったので書き残しておく。 経緯 夜中にTwitterのタイムラインを眺めていたら興味深い動画を見かけた。 【検証】１ヶ月間、プルリクだけでホームページ作ったらどうなるの？ どうやら「おめがシスターズ（通称：おめシス）」というVTuberが、自分たちのホームページをGitHubのプルリクだけで更新していったらどうなるのか？という検証を行なっていた模様。 おめシスのホームページをGithubのプルリクで更新していったらどうなるのか、こっそり検証中です。そのうち動画にします！htt
エンジニア適正が無い奴の生きる道ってなんですか？
追記---------------------------------- 文の拙さや僕の不甲斐なさについてはたくさんのご指摘をいただきまして，もう十分ぴえんぴえんできたので，これから読まれる方は，タイトル（本題．まじでアドバイス欲しい点）について，この若造のエピソードを見てどう思うか（僕へのアドバイスでも，一般論に汎化させたもの嬉しい．語気荒めでもいいので）のコメントをいただきたいです． --------------------------------------- 最初のいくばかを使って，自己紹介とタイトルの理由，この文章を書くに至ったエピソードを話させてください． プログラミングは17歳くらいから始めました．22歳． 数学的な教養はないです． 技術スタックは html, css, javascript(jquery, express, react(next), vue(nuxt)),
SIerの輪廻から解脱するための技術｜はまあ
モチベーション最近「SIer界の輪廻からどうやって解脱したらいいですか？」 という話をちょくちょく耳にすることが増えた。 それに対する"解答"というわけではないのだけど、輪廻からの解脱を目指すにあたり、どんな要素技術を学ぶべきかについてはある程度指針を示せると思ったので今回は、選ぶべき技術と、その理由について解説していきます。 SIer界で輪廻転生を繰り返したい人はジャバ言語のラムダ式を禁止にすべきか議論するほうが大事だと思うので、こんな記事にクソリプする前にさっさと帰って、どうぞ。 TypeScript解脱への第一歩は、なにはともあれTypeScriptだろう。 正直、この言語だけ覚えておけば、FaaS(Lambda, Cloud Functions)も書けるし、ReactによるSPAとか、なんならReact Nativeでアプリも書けるし、モダンな開発環境に必要なスキルセットがすべてま
ZOZOTOWNのWebホーム画面をNext.jsでリプレイスして得た知見 - ZOZO TECH BLOG
はじめに ZOZOTOWN開発本部の武井と申します。ZOZOTOWNのフロントエンドリプレイスプロジェクトを主に担当しております。ZOZO DEVELOPERS BLOG でも「ZOZOのリプレイスプロジェクトで得られる唯一無二の経験。大規模サービスを進化させるやりがいとは」というインタビュー記事を掲載しておりますので、もしよろしければこちらも併せてご覧ください。 さて、本題です。現在ZOZOTOWNではオンプレミスかつ、モノリスだった既存システムをマイクロサービスAPIに責務を分割したり、インフラをクラウドに移行したりしています。しかし、いわゆるWebのUIを構築するためのシステムは現在も既存システムに新機能開発や機能改修を行なっており、リプレイスに着手できていませんでした。 そこで、まずホーム画面から段階的にリプレイスすべく設計・開発を昨年から行ない、無事リリースできました。ZOZOT
Code Tour を使ってじっくり確実にコードを読む
日々のタスクに忙殺されていると、ついつい既存コードを流し読みして、ざっと動くコードを書いてしまいたくなります。 一発でうまく動けば短期的にはいいのですが、長期的にはコードの理解が追いつかなったり、一発でうまく動かなかった場合にかえって時間がかかってしまいます。 VSCode の拡張機能である Code Tour を使うと、コード上にメモを残しながら読み進めることができるので、既存のコードを読む際に便利です。 Code Tour とは VSCode の拡張機能で、コード上にメモを残しつつ、そのメモをたどることができるツールです。 使い方 ツアーを始める コマンドパレットから「Code Tour: Record Tour」を選択すると、ツアーの記録モードになります。 ツアーの名前 どのソースに紐づけるか（紐付けなし、ブランチ、タグ） を選択すると、リポジトリ直下に .tours/${指定したツ
こんにちは丸山@h13i32maruです。1.5ヶ月の仮想無職をおえて、ついに3月1日から新しい会社（Ubie ユビーというヘルステックスタートアップ）で働き始めました。一週間働いてみて思ったのは、医療ドメインとUbieの事業構造（課題、ソリューション、プロダクト、マーケット）がおもしろい。これにつきます。医療ドメインは誰にとっても身近でありながら、その奥にはすごい森が広がってるみたいな感覚になりました。知的好奇心をうずうずさせるようなプロダクト開発が好きな人には凄く合うと思います。 そんな面白いことに関わるんだから早くパフォーマンスを出したい！というわけで、入社して一週間でやったことを残しておきます。事業構造の図を書いてみたり、組織の波に乗ったり、Slackの分報を活用したりなど。先日の転職の意思決定という記事では事業ドメイン、組織、自分の成長、報酬という軸で考えたので、今回もそれに合わ
Typescriptの次はRustかもしれない
Introduction Rustを学び始めたのは多分今年の3月くらい。 なぜ急にRustに興味を持ったのかは後述しますが、半年ほどRustをいじくりまわしてみて、まだまだ学び途中でもRustの素晴らしさを語らずにはいられず、記事を書くことにしました。 Rustは「Cの正当な後継」なんてよく言われますが、WebエンジニアからみてもRustは本当に素晴らしいってことが少しでも伝わればいいなと思います。 RustとTypescript 「なぜRustとTypescript？」って思う方は多いと思うので、順に話していきたいと思います。 2020年のフロントエンドの流行 まず2020年今日時点のフロントエンドについて雑に書くと React・Vueが主流 Typescriptがデファクト、babelなどでトランスパイルは言わずもがな サーバーサイドもNodeで書くならTypescript Jest、
今年の本業は、 3rd party script で、そこから呼ぶウィジェットを最適化するコンパイラを書く、その仕様を考えて、実装するという感じだった。要は Google Analytics と、最適化コンパイラ付き GTM みたいなものを作っていた。その内容は以下に書いた。 サードパーティスクリプトの極限環境向け Svelte パフォーマンス改善に Core WebVitals という大義名分を得た 今年は、 パフォーマンスのエンジニアをやっていた、と思う。サードパーティスクリプトの配信を生業にする会社のエンジニアとしては、来年の Core WebVitals というパフォーマンス関連の大きな変化で、波にのってやりたいことがやれたと思う。 Core WebVitals の導入で実際にどれぐらいの影響がでるか不明だが、パフォーマンスが SEO に影響する、というのは、 若干やりすぎと思いつ
HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2021年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2021 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。 CSSのみで表現されたお手軽なHTMLスニペットから、Three.jsをつかったインタラクティブな動きやアニメーションにも注目が集まっています。 HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 97位 Metallic Bordered Text with CSS Photoshopで作成し
iOS NativeからReact Native に乗り換えた Shopify の話聞いてきた - tomoima525's blog
"最も使われているサービスのひとつを iOS Native から React Native に作り変えた" というアナウンスメントを出し話題となった Shopify で、まさにその内容を扱った React Native の meetup があり、参加してきたので内容と所感をまとめました。 React Native is the Future of Mobile at Shopify 発表内容 検証/導入フェーズ 技術スタック React Native がもたらした効果 途中でやめたこと 追加で登壇者に聞いたこと その他の発表 React Native for Web @twitter その他もろもろ React Native is the Future of Mobile at Shopify React Native で書き換えた話はしばらく前にアナウンスしていたのですが、Shopify
この記事では、Webデザイン制作をもっと楽にする最新オンラインツール45個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これまで面倒だった作業をワンクリックで完了したり、人工知能が自動で行ってくれたりと、より快適にプロジェクトを進めることができる便利ツールが揃います。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8.
Zennを支える技術とサービス構成
Zennという技術情報共有サービスを作りました。有益な知見をシェアした開発者が、その見返りを得られるようなサービスにしたいと思います。気合いを入れつつも、時間をたっぷりかけて地道に育てていきます。 このページでは、Zennを支えている技術やサービスを紹介します。 フロントエンド Next.js フロントエンドにはNext.js（React）を使っています。開発当初はNuxt.jsを使っていたのですが、TypeScriptとの相性を考えてNext.jsへ移行しました。 技術情報共有サービスなので、主要な流入元はいずれ検索エンジンに落ち着くと予想しています。そのため、検索エンジンにインデックスしてもらいたいページはサーバーサイドレンダリング（SSR）しています。 動的コンテンツもキャッシュ Next.js 9.4からIncremental Static Regenerationという最高の機能
Only My Rails Way
これは何 「Rails Wayに沿って〜」とはReview欄などでよく言われるが、定義が人によってぶれている気がするので俺のRails Wayを示した記事です。 もはや本来のモノとは別物かも知れませんが、俺はこういう観点でRailsをみて、コードを書いているよ、ということを知ってもらう意味でもこの記事を公開することにしました。 前提として、「数人以上のチームでプロダクトを実際に開発して運用する」場合の自分のスタンスを示したものです。（私も仕事では独自DSLは書きませんが自由研究用途なら自分も独自DSLを書いたりします。） それでは、いってみましょう。 Model層 データベースの操作およびビジネスロジックを記述する。 テーブルの属性は原則NOT NULLにするべき。どうしても要件上NULLを許容しなければならない場合のみNULLを許容する。 Controllerからparamsを無思考で渡
6月1日付けでNature Japan株式会社の取締役CTOに就任しました。最初の営業日の6/3(月)からいきなり台湾出張に行ってきました。良いスタートアップ感。ついでに本日6月5日に39歳になりました。新たなチャレンジにワクワクしています。 大塚(@maaash)さん、村瀬(@typester)さんに続く3代目のCTOとなります。2人はカヤック時代の同僚でもありますが、カヤックのラボチームのダブルエースだった彼らの後任としてCTOをやるのは恐れ多いのですが、僕は組織づくりなど含めて僕なりに組織に貢献していきます。 当社はおかげさまでスマートリモコンのNature Remoが好調で、現在はNature Remo Eというスマートエネルギーハブの開発を進めているところです。今後は電力なども見据えて事業を展開していく計画で面白いフェーズにあります。 まだ、社員全員でも10人に満たない小さな会社
エンジニア同士の情報共有を目的としたコミュニティ「ふわふわエンジニアタイム」が主催する「Markup Meetup」。3回目の今回は、フロントエンドエンジニア、マークアップエンジニア、コーダー、デザイナーの垣根なく、HTML / CSS / JavaScript に関わるナレッジを共有する場として開催されました。ここで登壇したのは、株式会社ゆめみの佐々木祥晶氏。導入事例を交えながら「Three.js」の魅力、メリット・デメリットを語りました。 株式会社ゆめみ所属・新人フロントエンドエンジニア 佐々木祥晶氏：それでは発表いたします。題目は、「Three.js の魅力を語る」です。 目次ですね。最初に軽く自己紹介をして、本編で「『Three.js』とは何ぞや？」とか、そういったことをいろいろ話していき、最後に軽くまとめをしていければなと思っています。 では、軽く自己紹介を。初めまして、佐々木祥
はじめに こんにちは！！@Sicut_studyです！ 今回は個人開発で「書籍管理システムYomuYomu」を作成したので紹介したいと思います。 サービスでやりたかったことがシンプルでなおかつユーザーの作業時間を大きく削減することができたというところから 個人開発に挑戦してみたいけど何を作ればよいかわからない このような方にとてもおすすめのサービスになっています。 私も実装していて「この内容はプログラミングコーチングJISOUの中でも1つの教材として今後使っていこう」と思うくらい良い題材でした 書籍管理システムYomuYomuとは 書籍管理システムYomuYomuは購入した本を登録できる簡単なアプリです 以下の機能が利用できます 1. 登録書籍一覧 登録した書籍を50音順で見ることができます 詳細検索を利用することで「あ行」などで書籍を絞ることができます 2. 書籍自動登録 書籍を登録する
Intro ちょうどタコピーの原罪が流行ってるのでこのタイトルにしたけど結構気に入ってる。 d.potato4d.me この話を読んでの感想とここまで大きくなった Node.js の振り返りをしようと思う。 どんなプログラミング言語であってもみんなから使ってもらって開発者をハッピーにしたいと思ってる。ただ最初は良かったと思ってた機能がなんか古臭くなったり、他にクールな機能を持ったものが登場したことによって徐々に飽きられていき、最終的に他の言語に乗り換えられる。 まぁどんな言語も同じだと思う。C言語だって生まれた当初はすごくクールでみんなをハッピーにしてた。今丁度「戦うプログラマー」を読んでるが、C++が出てきて、周りのエンジニアが C++ を使おうとするシーンが出てくる。そこで、「あんなの使って何が良いんだ、Cで十分だろ」とWindows NT 開発リーダーのデーブカトラーが言ってたりする
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Stateのアーキテクチャ」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが開発・運用しているアプリケーションのState戦略についてご紹介していきます。 全体像 アプリケーションに存在する状態（State）を以下の3種類に分類し、それぞれのやり方で管理しています。 サーバーデータのキャッシュ Global State Local State 1. サーバーデータのキャッシュ 「SPAで管理する必要のあるGlobal Stateって、そのうちほとんどがサーバーデータのキャッシュだよね。それを取り除けたら、管理する必要のあるGlobal Stateってすごく小さくなるんじゃない？」という主張を私が認識しはじめたのが2020年の初旬でした。おそらく
TauriはRustで書かれた軽量なGUIフレームワークで、Windows、macOS、Linux向けのデスクトップアプリを開発できます。2022年6月に最初の安定版であるバージョン1.0がリリースされました。 Tauriでは、メインプロセスはRustで記述しますが、UI（User Interface）にはWeb技術を利用します。ReactやVue.jsのようなJavaScriptフレームワークがそのまま使えるので、インタラクティブで見栄えの良いUIを簡単に構築できます。同種のフレームワークにElectronがありますが、後発であるTauriにはインストーラのサイズを小さくできるなどの強みがあります。 Tauriのロゴは、おうし座の二重星であるシータタウリ（θ Tauri）をモチーフ[1]にしており、Webとネイティブアプリの相互作用を意味しています。 図1 Tauriロゴ 本稿では、Ta
ReactではじめるChrome拡張開発入門
ReactとTypeScriptで、シンプルかつ実用的なChrome拡張機能を開発するための入門書です。 開発のために最低限知っておきたい知識から環境構築の方法、実装で陥りやすいポイントまでを網羅的に解説します。 また、本書を読むことでDeepLのような実践的な翻訳Chrome拡張機能を開発できるようになります。 所要時間： 約2時間 対象者： Reactを少しでも触ったことがある人 【2023/02/20】 初版を公開しました！ 【2024/02/18】 改訂版を公開しました！
【日々更新】Visual Studio Codeの便利なプラグインまとめ（コーダー・マークアップ・フロントエンドエンジニア視点）
Visual Studio Code（VsCode）本体のインストール まだインストールされていない方は、以下からVsCode本体をダウンロードしてください。 VsCodeのおすすめプラグイン（コーダー・マークアップ・フロントエンドエンジニア視点） 私が導入しているVsCodeのプラグインを紹介します。 フロントエンドエンジニアとして働いている自分の普段の業務ではHTML CSS Sass(Scss) EJS Pug JavaScript TypeScript React Next.js PHP WordPress Markdownファイル等を触ることが多いので、それらに関連したプラグインが多くなっています。 共通 プラグイン名 機能
「Cloudflare Pages」が正式版に。JAMスタックによる高速なWebサイトを構築、CDNに展開へ
Cloudflareは、JAMスタックを用いてWebサイトを構築する新サービス「Cloudflare Pages」が正式版として提供開始されたことを発表しました。 JAMスタックによるWebサイトの構築とは JAMスタックとは、JavaScript、API、Markup Language（HTML）を主な構成要素としてWebサイトを構築する手法を指します。 WordPressに代表される多くのCMSでは、ユーザーからのリクエストに反応して動的にHTMLが生成されることで、動的なWebサイトを実現しています。この場合、HTMLの生成に一定の時間がかかるため高速なWebサイトの構築が容易ではないこと、サーバへの負荷によりスケーラブルなWebサイトの構築も容易でないことなどが課題です。 JAMスタックでは、HTMLの生成はWebサイトの生成時に行うことで、基本的には静的なWebサイトと同様の高速
先日、Qiitaに投稿された一つの記事が注目を集めました。 元記事では、htmxというJavaScriptライブラリが英語圏で認知を獲得しているとして、インストールの仕方から使い方について公式のドキュメントの全体にわたって簡単に説明が行われています。 さまざまなプラットフォームでこの記事に対する反応を観察してみると、どちらかというと懐疑的な見方のほうが優勢のように見受けられます。ただ、多くのコメントは誤解に基づいているように見受けられました。「JSが要らない」といった元記事のミスリードによるところも大きそうですが1、なぜhtmxが大きく支持を得つつあるのかを理解するには、背景情報を含めて理解することが必要です。 htmxは、最近の複雑化するフロントエンド技術に対する単なる逆張りではありません。これまで30年ほどのあいだウェブ上のシステムを支え続けた「ハイパーメディア」の持つ強力さに今一度目
Python コードでアーキテクチャ図を生成できる Diagrams がめっちゃ便利！ - kakakakakku blog
「Diagrams」を使うと Python コードでアーキテクチャ図を生成できる．サポートされているアイコンセットがとても多く AWS や Google Cloud や Microsoft Azure もあれば，Kubernetes やプログラミング言語なども使える．試してみたけどめちゃくちゃ便利！まさに Diagram as Code だ✌️ diagrams.mingrammer.com セットアップ 「Diagrams」は Graphviz に依存しているため，macOS だと pip と brew ですぐにセットアップできる． $ pip install diagrams $ brew install graphviz 試してみた さっそく Examples を参考にアーキテクチャ図を作ってみた！ サンプル : AWS from diagrams import Cluster, D
最新フロントエンド技術の総復習！ React Hooks、GraphQL、TypeScript、AMPなど紹介 - Bonfire Frontend #4 レポート
最新フロントエンド技術の総復習！ React Hooks、GraphQL、TypeScript、AMPなど紹介 - Bonfire Frontend #4 レポート こんにちは。 今年の4月にヤフー株式会社にデザイナーとして新卒入社した、三好 健太（@three4c）です。9月3日（火）にヤフーのセミナールームで「Bonfire Frontend #4」を開催しました！ このイベントの目的はフロントエンドが抱える課題を共有し、フロントエンドについて熱く語る会です。 今回のテーマは「最新のフロントエンド技術 〜夏休み総復習〜」。初心者の方でも理解しやすい内容となっており、デザイナーの私も多くの知見を得ることができました。 ヤフーからは浜田と内藤が登壇し、ゲストスピーカーとしてサイボウズ株式会社より向井 咲人さん、株式会社ディー・エヌ・エーより吉井 健文さんにお話しいただきました。 これからは
OSS活動をはじめて5ヵ月が経過したのでその振り返りと、OSS活動での学びを書きます。 「OSS活動ってハードル高そう。。」と躊躇している方に読んで貰えると嬉しいです。 自己紹介 最初に誤解のないように自分のスペックを。 消防士歴6年、エンジニア歴2年半、PC持つよりホース持ってた期間が長いエンジニアです。 28歳の年にエンジニアへ転職し、今は茨城県からフルリモートで働いています。 ※ 消防士からエンジニアへの転職経緯などは以前こちらに書きました OSSとは？ OSSの定義をWikipediaより。 オープンソース・ソフトウェア（英: Open Source Software、略称: OSS）とは、利用者の目的を問わずソースコードを使用、調査、再利用、修正、拡張、再配布が可能なソフトウェアの総称である また、本文中でのOSS活動はGitHubに公開されているOSSに対してプルリクエストやイ
Web フロントエンドの実装において本来の機能を損なってはいけない 2022.12.24 データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。 昨今の Web フロントエンドの開発においては、React や Vue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。 一方データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で
障害プロセスを改善してきた話 こんにちは。Reliability & Securityチームに所属するSoftware Engineerの@sota1235です。 今回は10X内における障害対応プロセスの改善をご紹介します。 今が完成系ではなく道半ばではありますがこの半年 ~ 1年で大きく進化したので同じくらいのフェーズの会社で困ってる方がいたら参考にしてみてください！ ちなみに私ごとですが去年の5/26にこんな投稿をしてたのでやっと伏線を回収する形となります(※ ドヤ顔ではありません)。 目次 こんな感じで紹介していきます。 目次 障害対応プロセスの改善に踏み切った背景 課題1. 障害の報告フォーマットが統一されていない 課題2. 障害報のクオリティの差異が大きく後から振り返りが難しい 課題3. 障害対応者が特定の人に偏る 第一の改善 改善1. 障害報告書のフォーマット更新 改善2. S
1年半のソフトウェアエンジニア長期インターンで出会ったオススメ本をたくさん紹介します - Qiita
イントロ ABEJAアドベントカレンダーの4日目に一昨日飛び込みました、長期インターン生の佐藤(Twitter: @TodayInsane)です。 去年は機械学習を通して、TWICEというK-POPグループへの愛を語りました。 ABEJAには昨年4月、「本当に何も出来ないけど、休学してプログラミングとかエンジニアの経験を積みたいんです」という何とも不安な主張をするぼくを受け入れていただきました。 この1年半のエンジニア / リサーチ両インターンの過程で出会った良い本をどしどし紹介します。 ちなみにインターン開始時は プログラミング、Pythonだけならちょびっと書けます！(ABCのB問題とか機械学習ライブラリの写経) HTMLってどんな風になってるんですか？(？) サーバ...？？リクエスト...？？ JavaScript、名前は聞いたことあります 英語の論文しんどい、2時間ぐらいかけてI
書評『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』 - uhyo/blog
皆さんこんにちは。今回は、2022年7月25発売の『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』を読み終わったので、書評という形で感想と紹介を述べたいと思います。筆者はもともと技術書を読まず「ネットでいいやん」派だったのですが、このたびTypeScript入門書を出版したこともあり、それを過去の話として葬り去るべく技術書を読んでいくことにしました。せっかくなので、読んだ技術書の感想等を紹介します。 おことわり: この記事では、「筆者」とはこの書評を書いた人を指し、『TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発』を書いた人たちのことは「著者ら」と呼びます。また、この記事の内容はすべて筆者の個人的な見解であり、本の内容や本を読んで得られる知識について何らかの保証をするものではありません。 筆者について筆者
React
2023年度リクルート エンジニアコース新人研修の講義資料です
追記 Cloudflare Workers向けのWebフレームワークを作っているので、そちらを是非チェックしてみてください！ honojs/hono: Ultrafast web framework for Cloudflare Workers. Fast, but not only fast. Cloudflare Workers が面白い。面白いので、いくつか簡単なアプリを作ってみた。例えば、そのひとつが Slack Bot で「yusukebe++」とかやるとインクリメントされるやつ。 今回は Cloudflare Workers の面白さについて解説する。より興味のある方がいれば、上記のコードを参考にしてもらうといいだろう。 Cloudflare Workers とは？ Cloudflare の CDN エッジでスクリプトが動くのが Cloudflare Workers。いわゆる
Sizzyというツールがあります。 様々なサイズの画面を同時に表示し、レスポンシブレイアウトがどうなるかを一気に確認できるという便利なツールです。 スマホ向けWebサイトを開発している人なら、持っていると非常に便利でしょう。 参考：レスポンシブの確認ツール、後発だけに便利！スマホ・タブレットの主要なデバイスでの表示確認が同時にできる -Sizzy / 『Sizzy』様々なデバイスでのサイト表示を確認出来る便利サイト さてこのSizzy、元々無償のChromeエクステンションだったのですが、先日2019年7月に単独のアプリとして有償化されました。 一人あたり月5ドル(団体割引あり)のサブスクリプション制です。 以下は作者のKizte( Twitter、Medium、Webサイト )がその理由や経緯を綴った記事、GitHub stars won't pay your rentの日本語訳です。
この記事では、2021年に公開された便利なWebオンラインツール・ベスト100個+をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2021年にかけて合計338個の新しいツールやサービスを紹介してきました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（11個） 2. パターンツール（3個） 3. イラスト系ツール（9個） 4. デザインツール（17個） 5. 配色ツール（7個） 6. グラデーションツール（12個） 7. SVGツール（9個） 8. スクリーンシ
6x6リバーシの神 - まめめも
絶対に勝てない6x6リバーシを作りました。あなたは黒番、AIが白番です。 絶対に勝てない6x6リバーシを作りました！ ぜひ挑戦してみてくださいhttps://t.co/Ul5n3q9jMp— Yusuke Endoh (@mametter) December 30, 2021 これは何？ 6x6の盤面のリバーシは後手必勝 *1 であることが知られています。 このAIは白番（後手）で完璧にプレイします。つまり黒番のあなたは絶対に勝てません。無力感を楽しんでください。 技術的な話 このAIはWebAssemblyになっているので、全部あなたのブラウザの上で動いてます。真のサーバーレスです。 AIのソースコードはRustで書きました。わりと堅実なゲーム木探索になってます。UIは普通にTypeScriptとthree.jsで実装しました。 github.com 作った順に説明します。 盤面の表現
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドの情報収集について - Qiita
PurgeCSSを使用して、CSSファイルから未使用のスタイルを削除する方法
2020年以降のプログラミング技術のトレンド予想 - Qiita
入社して一週間、素早く生き残るためにやったこと（Ubie） - maru source
2020年やったこと、考えたこと、触った技術のまとめ - mizchi's blog
2021年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表
Webデザイン制作をもっと楽に！便利な最新オンラインツール45個まとめ
Nature Remo作ってる会社のCTOになったのでみんな買ってくれよな！ | おそらくはそれさえも平凡な日々
必要なのはJavaScriptの基本的な知識だけ 3Dアニメーション制作をお手軽にする「Three.js」の魅力
【個人開発】爆速で書籍管理システムを作って大幅な時間削減をした - Qiita
Node.js の原罪 - from scratch
「3種類」で管理するReactのState戦略
軽量RustフレームワークTauriでデスクトップアプリ開発をはじめよう | gihyo.jp
htmxとは何なのか？ その背景にある思想について - Qiita
OSS活動をはじめて5ヶ月の振り返りと学んだこと - Qiita
Web フロントエンドの実装において本来の機能を損なってはいけない
障害対応プロセスを改善してきた話 - 10X Product Blog
Cloudflare Workers 面白い - ゆーすけべー日記
GitHubのスターは金にならない - Qiita
Web制作を変える！2021年の便利オンラインツール・ベスト100選