どうも、まさとらん（@0310lan）です！ 今回は、フロントエンド開発者およびこれから学習をしようと考えている人に最適な無料リソースを厳選してご紹介します。 学習コンテンツばかりでなく、開発に便利なサービスやツールなども紹介しつつ、初心者から中級者くらいまで役に立つドキュメントもまとめています。すべて無料なのでWeb開発にご興味ある方はぜひ参考にしてみてください！ ■何を学習したらいいのかをロードマップで確認する 【 Developer Roadmaps 】 フロントエンドの学習といっても意外に広範囲なので、まずは何から勉強をすればいいのか迷う人も少なくありません。この「Developer Roadmaps」はWeb開発者が勉強するための学習内容をロードマップとして無償公開しています。 さまざまな種類が用意されていますが、例えばフロントエンドの場合は以下のような感じです。 有名なロードマ

この投稿では、「TypeScriptの文法や用語がよく分からない」という問題を解消してくれそうなツールを紹介します。 勉強しながらの見切り発車 最近はTypeScript未経験でも、TypeScript案件にアサインされることが増えてきているように思います。 運がいいと着手前にTypeScriptをじっくり学習する時間を与えられることがあります。しかし、多くのケースでは、見切り発車で開発に参加するのではないでしょうか。 コードリーディングから始まる TypeScript案件は、理解すべき既存のTypeScript/JavaScriptコードがあるケースが多いです。 そのため、 読んで理解すべき既存のTypeScriptコードがある しかし、TypeScriptの知識が乏しい状態でスタート といった事態がよく起きます。 新規プロジェクトでは既存コードがありませんが、ググって出てきたサンプルコ

新人育成用に自分が知っている知識を棚卸するための記事です。なお、解釈が誤っている可能性は十分にあります。 キーワード ポートアンドアダプター ヘキサゴナルアーキテクチャ ミュータブル/イミュータブル 腐敗防止層 ポートアンドアダプター(ヘキサゴナルアーキテクチャ)とは 私がアーキテクチャで意識しているのは、次の点です。 アプリケーションの「内側」と「外側」の区別をつける 「外側」の知識を「内側」に侵入させない 「内側」の知識を「外側」に流出させない アプリケーションの「内側」と「外側」の区別をつける 私は「内側」「外側」を次の定義で表現しています。 内側 アプリケーションのビジネスロジック 外側 アプリケーションで完結できない、実行時例外が発生しやすいロジック HTTPを受信するController、DBと接続するRepository、他システムとRESTやSOAPで連携、ファイル操作 こ

これまでいろんな現場でWebフロントエンド開発をしてきて、メンテナンスしやすく効率の高いWebフロントエンド開発をする上で重要になる考えが自分なりにまとまってきたので記事にしてみます。 Worse is Betterという考え方 自分が見てきた中でWebフロントエンドの開発効率が落ちてしまう一番の要因は、きれいで理論的には優れているアーキテクチャを構築しようとしてそれ自体がもたらす複雑性を支えきれないというパターンです。 少し前にフロントエンドにClean Architecture（以下CA、あの同心円の図を指すのは誤用に近いですがここではそれに乗ります）を導入する記事が流行ったと思いますがあんな感じです。ああいったクラスベースでDIが重要となる設計手法はサーバーサイドのJavaでSpringを使うのとは違ってReactがサポートしているものではないため、CAの実現自体に高い設計スキルが必

技術本部 データ戦略部 Newsグループの木田です。 最近、初めて自作キーボードに挑戦しました。ちょうど２枚目のモニターも買ったので、モニター２台と自作キーボードで快適に記事を書いています。 予めお断りしておきますが、この記事は元々、社内向けに設計方針や規約・ツールなどについて共有するために書いたものでした。最近、他チームの参考資料として役立ったこともあり、社外向けに手を加えて公開する運びとなりました。 はじめに 機構改革・人事異動情報(β) とは ⚛️ Atomic Design に従う ⚛️ Atomic Design とは ⚛️ Molecules と Organisms の分け方 ⚛️ コンポーネントの設計方法 📝 規約 📝 Component と Container を分ける 📝 データの繋ぎ込みは Organisms 以上で行う 💡 Tips 💡 Atoms はタグ本

上の画像に意味はありません、なんか強そうだからはりました。 さて、こういうエントリを普段私は書かないっぽいのだが、なんか書かないとすべて忘れるので書くことにする。 今年は振り返ってみると夏頃までは「コロナだしなあ」といって引きこもりつつ、受託開発や有償OSS活動をし、カートにハマるなど晴運雨読、悠々自適な生活をし、 夏が終わる頃、某現場に入ったあたりから色々スラッシングが始まり、ハチャメチャにLoad Aveが上がり、ダイエットの結果体重が20kg落ちる。という感じだった。 なにか「買ってよかったもの！」とか書けば良いのだろうが、全部をそれでうまくまとまる気分でもないので乱文のママとする。 なお、以下は嘘である。 サポートの重要さを改めて知る 今年は色々なものを買ったり、修理したりなんだりしたのだが、とにかくサポートというものは重要だなと思った。そしてそれを支えるロジがしっかりしている必要

判断と決断の話の違いはこのツイートの通り。 判断の話で言うとぼくはそーだいさんがしてくれた「判断と決断は違う」という話がだいぶ実になっていて、「情報を集めれば理屈で答えが出せるのが判断、今は情報を集めることができない中で答えを出さないといけないのが決断、リーダーがやらなければならないのは決断」という話をかなり大事にしている— しんぺいくんさん (@shinpei0213) 2021年12月10日 決断のコツ 結論から言えば、決断のコツは失敗できるようにすることだ。 失敗できる状態なら決断することができる。 そして素早くアクションして、失敗のフィードバックを受け取ることで新しい決断をすることができる。 そーだいさんがぼくに教えてくれた二大大事なこと「判断と決断は違う」と「ロールバック可能なことはどんどん試せばいい、ロールバックが難しいことは慎重に」です— しんぺいくんさん (@shinpei

にゃんこ大戦争は全世界累計9400万DL達成！ 世界中で大人気！ 誰でもお手軽プレイ!! にゃんこバトルゲーム!! 「キモかわにゃんこ」が日本を、未来を、 宇宙の果てまで侵略中！ 以前、遊んでいた人も新たに始めるチャンス!! ◆ルールは簡単！シンプルバトル！◆ 好きなにゃんこをタップして出撃!! 一撃必殺「にゃんこ砲」で大逆転!! 敵のお城を攻め落としたら勝利!! クリア出来ないステージも ググればだいたい攻略法が見つかる!! ◆自分のペースでゆったり楽しめる◆ このゲームはあなたとにゃんこだけのもの!! どこの馬の骨とも分からないフレンドは居ない!! あなたのペースでにゃんこと侵略を進めよう!! ◆キモく、かわいく、美しく◆ あなたの想像を超えたにゃんこ達が登場!! 予想外に進化するにゃんこ達を見届けよう!! にゃんこの世界を覗き見れる にゃんこ図鑑も要チェック!! ◆便利な機能続々追加

本記事の続編として、自分が有害な振る舞いをしないようにする改善の取り組みを扱った記事も書いてます。 エンジニアや上司が"有害な振る舞い"を改善する方法 ※「難しい人」は概念として用い説明するのに便利な言葉でしたが、誤解を生じたり、本記事のポリシーに沿わない使用（難しい人というラベリングを特定個人に適用する使い方）が容易にされてしまいそうだと分かりました。そのような誤用を防ぐことを最優先とするため、代わりに「有害な振る舞い」という表現を使用し、人ではなく振る舞いに着目するタイトル及び文章に変更致しました。 はじめに 以下の記事を読んだ際に「難しい人」という表現が何となく面白い響きで印象に残ったので、これを機に自分の考えを今までの経験をもとに書きたいと思います。 “難しい人”が1人入ると、チームの生産性は30〜40％低下する 対抗せずに、場の「安心感」を作るための3つの条件 - ログミーBiz

年内に間に合わなかった… 2021年に主にお世話になった言語・ライブラリ TypeScript React chakra-ui dnd-kit Node Vite esbuild Docker(=> lima) とりあえず挙げてみたが、なにか特定のライブラリを使う、という感じではなく、レイヤーが一つ下にいった感じがあり、実際にはなんかもうちょっと下のミドルウェアみたいなものを作っていることが多かった気がする。ASTをいじるコンパイラ周辺ツールを作っていることが多かった。 サクッとなにか作る場合、 React + TypeScript + Vite(esbuild) が鉄板という感じで、 esbuild が異次元に速すぎて、typescript の変換もバンドルも、もはやこれ一本でいい気がしてる。 microsoft/typescript はもはや言語仕様の定義と型検査がメインであって、コン

YouTubeにて動画版デスクツアーも公開しているので、動画で見たい方は是非こちらもチェックしてみてください。 最強Intel iMac＋トリプル5Kモニター環境の抱えていた問題点 2020年最終Intelモデル・最強スペックのiMacを購入し、左右にUltraFine 5Kモニターを接続する事で27インチ・5120×2880の5Kモニターを3枚並びで横に連ね、Intel Macの完成形を目指した前回のデスクツアー。Mac単体の環境としては非常に満足しており、5月に公開した新しいWordPressテーマをはじめ今年に取り組んだ様々なプロジェクトを何の不満もなく完璧にこなしてくれました。 ただしデスクツアーの文中でも取り上げたとおり、Mac単体環境としての完成度の高さの反面、Windows介入の隙が全く無いという点が懸念点でした。左右のUltraFine 5Kは入力が1端子のみで、しかもTh

新年、明けました。 例によって今年もやっていきましょう。 去年はこれです。 www.ikkitang1211.site 今年のサマリはこんな感じ テックリードになっていく為に見識を広げるチャレンジをする フロントエンド頑張ってみる サービス作るぞっ！ 行動指針 今年の行動指針は テックリードになっていく為に見識を広げるチャレンジをする です。 去年は3つの指針を掲げていたのですが、わざわざ3つ目標を設定する必要は無いですね。 去年はなんか意識出来てなさすぎたので、振り返りをする事を念頭において、書いて行きましょう。 テックリードになっていく為に見識を広げるチャレンジをする 今年の大きな指針です。 具体的にいうと、 フロントエンドにチャレンジする をやっていきたいと思っています。 自分自身は、これまでのキャリアで バックエンド層（BFF層より後ろインフラ層までぐらい）をメインに仕事をしてきま

ここ2年くらいの話なのですが、仕事で「フロントエンド会」というチーム内委員会のようなものを立ち上げて運営しています。元々1人の Web フロントエンド職人がプロダクトの Web フロントエンドの面倒を見ていたのですが、その方が異動されることになったので、残った人で面倒を見ていける体制を作りましょう、というモチベーションで発足した会でした。この話については以前イベントで発表したので、詳しくはこのスライドをご覧下さい。 speakerdeck.com Web フロントエンド職人の異動とともに入社した id:mizdra が Web フロントエンドが得意だったので、ペアプロやペアオペ、定例会などを通じてどんどんスキルや知見を配っていく、という戦略で運営していました。実際に 2 年経過してみてメンバーも徐々にキャッチアップしていって、ちょっとしたパフォーマンス改善をやってみたり、最近 Gulp や

こんにちは！id:yutailang0119 です。 無事 はてなエンジニアAdvent Calendar 2021 を完走することができました！ これまでのまとめ はてなエンジニア Advent Calendar 2020完走しました！ - Hatena Developer Blog はてなエンジニア Advent Calendar 2019完走しました！ - Hatena Developer Blog はてなエンジニア Advent Calendar 2018完走しました！ - Hatena Developer Blog 表彰 最多ブックマーク賞 今年の最多ブックマークエントリは、12/16担当 id:kouki_dan の kouki.hatenadiary.com でした！ (2020/12/29現在) 🎊おめでとうございます🎊 私もスマホアプリ開発におけるGitブランチ戦略に

を設定してから再度試した所 bar が表示された。backupcopy は編集中のファイルによって自動で判別する auto がデフォルトになっている為、試す際には明示的に yes に設定しないといけない。 bash の実装確認 evalstring.c の parse_and_execute でコマンドが処理されており、input.c の with_input_from_buffered_stream で読み込みの準備が行われている。バッファの読み込みの本体は y.tab.c つまりパーサから直接呼ばれており、このパーサは fgets(3) で読み込まれつつ実行される為、一括でファイルが読み込まれている訳ではない。 while/do でループ実行した際に、ファイルを書き換えられたら戻り先はどうなるか、についてはスクリプトはバッファ付きで読み込まれており、そのバッファがファイルシステムから読

Here are the 21 most viewed decks of 2021: 解像度を高める / Increase Resolution Webアプリケーション概要 2021 / Web Application Overview 2021 SmartHR会社紹介資料 / SmartHR company introduction material 研究をはじめる前に知っておいて欲しい7つのこと - Welcome to Lab / 7 things you should know before you start your research - Welcome to Lab ベテラン技術者が新しい環境で大失敗した話 / A story about a veteran engineer making a big mistake in a new environment 50分で学ぶアル

去年は結局ふりかえりをしなかったので、今年は面倒になる前に書いていく。総評として、悪くない一年だったと思う。 今年の仕事 TypeScript、React、Jestを使ったフロントエンド開発 CakePHPのバージョンアップ CakePHP、TypeScript、React、Jestに明け暮れた1年でした。1月〜4月までは別口でGatsbyに触れる機会もあり、そこでGraphQLのキャッチアップもできた（せざるを得なかったとも言える）。また、空いた時間でGatsbyのバージョンアップにもチャレンジしたのは個人的な加点ポイント。 GW以降は社内で担当するプロジェクトが変わり、フロントエンドの実装を書く機会が急激に増えた。フロントエンドのテストに振れるのは数年ぶりだったので、Jest + testing-libraryの書き味に慣れるのが大変でした。 夏頃は組織で向き合う課題の1つである「Ca

2021年は忙しかった 年末でいつもの振り返り。 今年は多忙につき年末のいつものアドベントカレンダー参加は見送っていたのと、 ブログ等のアウトプットもあまりしていなかったので、振り返りと、どんなことをしていたのか、 ということの殴り書きです。 スターフェスティバル 本業でメインでコミットしているスターフェスティバルの総括はCTOのsotarokのエントリを！ note.com この中で自分はどういうことをしていたのかというと、 前半は致命的な問題を抱えているシステムの改善などを主にやってました。 もちろんそれは技術分野だけではなく、 業務フローやアプリケーション起因のオペレーション、データ設計も含めて全体的にここに問題があるぞ、 というのを明らかにする活動もやりつつ、非エンジニアの方々と率先してコミュニケーションしながら、 信頼を得るための活動だったり、とにかくドメインエキスパートになるた

本記事はドメイン駆動設計(DDD) Advent Calendar 2021 25日目の記事です。 「もっとビジネス変化に耐えられる設計を目指したい」「ただデータをやりとりするだけなのに複雑化してしまうのを防ぎたい」 様々な動機からドメイン駆動設計に入門しようとする方がいると思います。 自分もエンジニアとして働きはじめて、「どうしてすぐに変更しにくくなってしまうのか」「より柔軟な設計にするにはどうすればよいか」と悩むことが多くなり、良い設計手法を探って出会ったのがドメイン駆動設計でした。 最初はドメイン駆動設計関連の本ばかりを読んでいたのですが、途中から「これってドメイン駆動設計というよりはオブジェクト指向の話では？」とオブジェクト指向に興味を移し、さらに「より変化に強いプロダクト開発するにはチームから変化させないとまずいのでは？」とアジャイル開発に興味が移りました。 本記事では、ドメイン