参考 プリンシプル オブ プログラミング - 3年目までに身につけたい一生役立つ101の原理原則 発行: 2016/3/23 著者: 上田 勲 まえがき プログラマーの世界で語り継がれる原則や格言を知ることは、その共通の言語や道徳を理解する手助けとなります。 『プリンシプル オブ プログラミング』（以下、プリプロ）は、統一された語句と形式により、先人のプログラマーたちが重要視していた思考法やアプローチを、微妙な概念の違いに気を使うことなく理解できるよう構築されています。この記事では、この本を読む上で役立つ101の原則マップと原則から抽出した価値観をまとめます。プリプロを読む際のガイドになればと思います。 一方で、プリプロに収録されていないウィットに富んだ原則や格言も多く存在します。この記事では、主に私の現場で重要視しているプリプロの101の原則以外の原則・格言も追加で紹介します。 プログラ

モバイルファーストのウェブデザインは、デスクトップで閲覧する際に重大なユーザビリティ上の問題を引き起こす。長いスクロールページにコンテンツが過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を把握し、理解することが難しくなるのである。 The Negative Impact of Mobile-First Web Design on Desktop by Kim Salazar, Tim Neusesser and Nishi Chitale on October 13, 2023 日本語版2024年2月6日公開 最近のウェブサイトの多くは、モバイルファーストなアプローチでデザインされている。こうしたページをデスクトップデバイスで表示すると、コンテンツが過度に大きく引き伸ばされて見えることがある。画面を覆い尽くすような画像、肥大化したテキスト、過剰な余白のせいで、

はじめに 目まぐるしく進化するフロントエンド開発の世界では、常に最新の知識や技術をいち早く取り入れることが、エンタープライズアプリケーションの開発を成功させる上で欠かせません。Tailwind CSS、TypeScript、Turborepo、ESLint、React Queryなどを含む強力なツールキットとNext.jsを4年間使用してきた結果、開発に役立つさまざまな知見やベストプラクティスが得られました。この記事では、大企業向けフロントエンドアプリケーションのパフォーマンス、保守性、拡張性を最大限に高める設計・構築手法を紹介したいと思います。 注記：ここに記載する内容はあくまでも個人的な見解であり、筆者が推奨する手法が必ずしも適さない場合もあります。 効果的なエンタープライズ向けフロントエンドアーキテクチャの基本原則 エンタープライズ規模のアプリケーション向けにフロントエンドソリューシ

この記事はNuco Advent Calendar 2023の18日目の記事です。 はじめに 本記事ではGithubレポジトリTop28を紹介します！ Githubレポジトリは日々の業務や学習に役立てることが可能です。必要な機能や学習教材は、無料で利用出来る高機能なものがあるのなら積極的に利用して役立てるべきです。 以下の内容に分けて合計28個のGithubレポジトリを紹介します！ 開発用Githubレポジトリ 学習用Githubレポジトリ QOL高めのエンジニアとして日常を過ごしたい方は参考にしてください！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。

ウォンテッドリー株式会社の社内イベント "Tech Lunch" で話した発表です。 プログラムには大小さまざまな粒度の「状態」が存在します。 状態の設計を工夫することで、コーナーケースの発生を抑止し、ユーザー体験を最適化することができます。 本発表では、私が普段どのように「状態」について考えているか、言語や環境を問わずできるだけ普遍的に使える形での言語化を試みます。本発表を通じて、「状態」をなんとなくではなく合理的に設計するためのヒントを提供します。 GoogleスライドのURL: https://docs.google.com/presentation/d/1PNzz69UV05HlKPuWGlooemnPslLbLKsyLwl3R4U_XqE/edit

GitHub Actions でワークフローを実行するときに git commit と git push を実行して GitHub Actions の実行を待つことがよくある．より迅速に実行して，結果を受け取るために「act」を使って GitHub Actions をローカル環境（コンテナ）で実行する仕組みを試してみた．便利だったので紹介しようと思う❗️ 当然ながら GitHub Actions を完全再現できてるわけではなく，最終的には GitHub Actions を使うことにはなるけど，特に開発中に頻繁にテストを実行できるのはメリットだと思う．うまく併用しながら開発体験を高めよう👌 github.com セットアップ macOS の場合は Homebrew を使って簡単にセットアップできる．他には Chocolatey (Windows) や Bash script も選べる．今回

はじめに はじめまして。aqli_kuk120と申します。 ラクスの片隅でひっそりとインフラエンジニアをしています。 「エンジニアは常日頃の情報収集が肝要」とよく聞きますが、中々実践できない自分がいました。 技術系のニュースアプリをスマホに入れてみるも、三日坊主でついつい他の興味あることをネットサーフィンする日々…。 これではいかんと思い、対策を考えた結果、 「人気記事のリンクをスクレイピングして社内のチャットツール(Mattermost)にBOT投稿するようにしたら、昼休みにご飯食べながらみれるんじゃない？」と思い至りました。 ということで、インフラエンジニアと名乗ったものの、今回はPythonを使ったスクレイピングとMattermostへのBOT投稿についてブログを書いていきたいと思います。 はじめに スクレイピングとは Mattermostとは Pythonで今回作るもの 開発環境構

今回、クラスメソッドのアプリデザインドリルを作成しましたので、みなさまに公開させていただきます。 メールアドレスなどの登録はなく、フリーでダウンロードいただけます。 以下のリンクからダウンロード可能です。 アプリデザインドリルver1.pdf 本ドリルは、参考書兼問題集として作成されています。まずは、出題される問題で現段階での理解を確認し、その上で解説を読んで理解して、再度問題を確認することで基礎知識を覚える構成になっています。 内容は、以下をまとめています。 クラスメソッドデザイナーが仕事を進める上で認識しておくと良いこと いろいろな方を見ていて、よくつまづいている部分についての説明 綺麗なレイアウトを作成することの技術的な面での記載はありません。レイアウトついては良サイトがたくさんありますので、あまりみない情報をお届けできればと思います。 ドリル目次 PART 1：UIデザイナーの役割

本記事は『Python FlaskによるWebアプリ開発入門 物体検知アプリ&機械学習APIの作り方』（佐藤昌基、平田哲也）の「はじめに」と「第0章　Flaskの概要と環境構築」の一部を抜粋したものです。掲載にあたって編集しています。 はじめに Flaskは、2010年4月1日にArmin Ronacher氏がエイプリルフールのネタとしてリリースし、そこからPython愛好家の間で人気になったPython製Webマイクロフレームワークです。2018年にはPython開発者調査で最も人気のあるWebフレームワークとして投票され、いまでも高い人気があります。 本書は、Flaskによる実践的なWebアプリケーション（以下、アプリ）の作成を通して、自力でアプリを作成できるようになることを目的としています。 まずは最小のアプリの作成から始め、問い合わせフォーム、データベースを使ったアプリ、認証機能と

はじめに 2021年、Pythonで複数の暗号系ライブラリを開発してPyPIで公開してきました。その過程で、setuptools、flit、poetryと、幾つかのパッケージ管理をわたり歩き、GitHub上でのCI/CDも色々試す中で私的なべスプラが定まってきたので、2022年初に備忘録としてまとめておきます。 具体的には、pyenv、poetry、pre-commit、tox、GitHub Actions を活用し、低コストで（＝なるべく自動で）、高品質のプロダクトをPyPIにデプロイする方法・設定を共有します。個別のツールの記事はよく目にするのですが、開発ライフサイクル全体をカバーする記事がなかなか無かったので。 開発環境の整備 - pyenvで複数のPythonバージョンでの開発環境を整備 パッケージ管理 - poetry/pyproject.tomlでの一元的なパッケージ管理 静的

用語 レビュアー 対象となるコードをレビューする人のことを指します。 レビュイー レビューを受ける人、つまりレビューする対象のコードを書いた人のことを指します。 tl;dr アプリケーション開発業務におけるコードレビューはコードの正しさや質そして一貫性を保ち、それらと同時にコードに対するチームとしての共有知を作り上げる良いプラクティスだと思います アプリケーション開発チーム内でのコードレビューにおいてPull Requestを使ったレビューのスタイルは一般的ですが、Pull Requestの承認は実際にはほとんど意味がないのではないでしょうか？ ほとんど意味がないにも関わらず、承認の有無によって業務フローが左右されることでそれが権威的に扱われてしまいオーナーシップを希薄化させ、結果的にコードレビューのコストが増加したりそれを行う目的を見失ってしまっていることはないでしょうか？ Pull R

本文の内容は、2021年3月9日にÁlvaro Iradierが投稿したブログ(https://sysdig.com/blog/dockerfile-best-practices/)を元に日本語に翻訳・再構成した内容となっております。 Dockerfileのベストプラクティスのクイックセットをイメージビルドに適用することで、セキュリティ問題を防ぎ、コンテナ化されたアプリケーションを最適化する方法を学びます。 コンテナ化されたアプリケーションやマイクロサービスに精通している人なら、自分のサービスがマイクロサービスであることに気づいているかもしれません。しかし、脆弱性の検出、セキュリティ問題の調査、デプロイ後の報告や修正など、管理のオーバーヘッドがマクロな問題になっています。 このオーバーヘッドの多くは、セキュリティをシフトレフトし、開発ワークフローの中で可能な限り早く潜在的な問題に取り組むこ

Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無し フレームワークは必要無し ピュアCSSで実装、CSS

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

「キャッチアップしておきたいウェブ制作の最前線」というテーマで、Vue.jsなどJavaScriptを駆使したユーザーインターフェイスの開発を主に担当してきた池田泰延氏が、Webのフロント周りの近年の技術的な動向を解説します。前半はフロントエンド技術のトレンドについて。 スピーカー自己紹介、『JavaScript コードレシピ集』を出版 池田泰延 氏（以下、池田）：みなさんよろしくお願いします。ICSの話として、私と鹿野の2名で発表します。HTMLとかCSSとかJavaScriptとか、フロントエンドまわりの最新を説明していきたいと思います。では始めていきましょう！ ます自己紹介します。ICSの池田と言います。株式会社ICSの代表をやっています。これはオフィスの写真でして、南麻布にあるのですが、こんなところで仕事をやっています。今はこの状況下なので、会社にはほとんど誰も行っていませんが、こ

New!!（2024.1.11） 本記事の内容をよりブラッシュアップし、さらに使いやすくなった「ふりかえりカタログ（コミュニティ版）」をリリースしています。 今後はそちらをご利用ください。 ふりかえりカタログ（コミュニティ版） はじめに あなたのふりかえりを拡張するふりかえりカタログを公開いたします！ ふりかえりカタログは、ふりかえりの手法（現在）71個とその特徴を網羅したカタログです。下記画像はイメージです。 pdfはBoothで無料DLできます。 DLはコチラ => ふりかえりカタログ（Booth版） スライドはSpeakerDeckから参照できます。 DLはコチラ => ふりかえりカタログ（SpeakerDeck版） ふりかえりカタログとは ふりかえりの様々な手法をまとめたカタログです。 ふりかえりの各手法を「手法名」「手法を使う場面」「手法のイメージ」「出典」「進め方」「いいところ

HTTP/3はどうやってWebを加速するか？ TCP、TLS、HTTP/2の問題とHTTP/3での解決策～Fastly奥氏が解説（前編） Webの世界では新しいHTTPの標準として「HTTP/3」の策定が進み、現在最終段階にあります。このHTTP/3はこれまでのHTTPをどのように改善し、高速化を実現していくのでしょうか。 2020年11月25日と26日にオンラインで開催されたFastly Japan主催のイベント「Yamagoya Traverse 2020」のセッション「Webを加速するHTTP/3」で、同社の奥一穂氏がHTTP/3の解説を行っています。 奥氏はHTTP/3に対応したHTTPサーバ「H2O」の開発を行うだけでなく、IETFでHTTP/3の標準策定にも関わるなど、日本においてもっともHTTP/3に詳しい人の一人であるといえます。 本記事では奥氏のセッションをダイジェストで

はじめに 本稿は、ソフトウェア開発を進める際に直面する様々な技術的な意思決定やライブラリ・フレームワーク・XaaS等を選択し正しく活用していくのかについての考え方をサポートすることを目的としています。「すべてにおいてこのようなワークフローを通じて検討すべきである」という主張ではありません。読者の抱える問題領域に応じて、必要な箇所を取捨選択するための１種の考え方を提供するものです。 そもそもアーキテクチャ・技術選定に時間をかけるべきか まず第一に伝えておきたいことは、技術選定やアーキテクチャ設計に常に慎重であるべきではないということです。ソフトウェアの規模やライフサイクルに応じて、そもそも時間をさく必要がないということも多くあります。書き捨てのシェルスクリプトにも読みやすいコードを求めて書くことは非常に重要ですが、だからといって組織だって議論・検討するようなものでもないのです。一方で、５年も

JavaScript QuestionsのLydia Hallie氏の「JavaScript Visualized」シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロトタイプ継承、非同期処理、ジェネレータ関数、Hoisting（巻き上げ）など、GIFアニメを使用して詳しく解説しています。 シリーズ7本すべてと、プラス1として楽しく学べるクイズもあります。 JavaScript イベントループの仕組み JavaScriptでエラーの原因となるHoisting（巻き上げ）の仕組み JavaScriptのスコープチェーン・変数参照の仕組み JavaScriptエンジンの仕組み JavaScript プロトタイプ継承の仕組み JavaScriptのジェネレータ関数とイテレータの仕組み JavaScriptの

Webフルスタックエンジニアになるためのチェックリスト Zennでの投稿にあたって この記事は、2020/03/22に自分のgithubリポジトリで公開していた内容を、Zennのgithubリポジトリ連携機能を用いて一般公開したものです。 投稿にあたって、Zennの記事連携フォーマットに準拠する以外の修正は加えておりませんので、一部Zennというプラットフォームの方針や雰囲気に合わない内容などあるかもしれません。あらかじめご了承ください。 はじめに 日本のWeb開発業界で「フルスタックエンジニア」になるために必要な知識を、個人的経験からまとめました。 フルスタックエンジニアの定義ですが、ここでは、 企業で開発リーダー/テックリードとして、Webブラウザアプリケーションを前提としたサービスの立ち上げからリリース、運用まで面倒を見られる。 というロールと仮定し、前提条件としては、どちらかという