Author: chris

スタンフォード大学 – AI時代のエンジニアのための無料講義資料「CS146S: The Modern Software Developer」

始めに

今IT業界では、生成AIによってかつてないほどの大きな変動が起きています。
「AIがコードを書く時代」において、私たちWEBエンジニアには何が求められるのでしょうか？

単にAIにコードを書かせるだけではなく、AIをツールとして使いこなし、
開発速度や精度を劇的に向上させるための「新しいスキルセット」が必要とされています。

この記事では、スタンフォード大学が無料公開している講義資料について紹介します。

公式サイト（https://themodernsoftware.dev）

サイト内の「Syllabus」タブをクリックすると、各週の講義スライドやおすすめの関連記事を閲覧できます。
無料公開されているのはスライドと記事のみですが、非常に参考になる内容のため、今回紹介いたしました。

CS146S: The Modern Software Developer とは？

このコースは、スタンフォード大学で2025年秋学期に開講される「現代のソフトウェア開発者」のための授業です。

従来のプログラミング教育が「ゼロからコードを書く力」に重点を置いていたのに対し、
このコースではAIツールを前提とした開発ワークフローへと完全にシフトしています。
「これからの時代に必須となるスキルを身につけたい」というエンジニアの方は必見の内容です。

各週のテーマを日本語でまとめてみました：
Week 1: Introduction to Coding LLMs and AI Development
（コーディングLLMとAI開発への導入）
Week 2: The Anatomy of Coding Agents
（コーディング・エージェントの解剖学）
Week 3: The AI IDE
（AIネイティブなIDE）
Week 4: Coding Agent Patterns
（コーディング・エージェントのパターン）
Week 5: The Modern Terminal
（モダンなターミナル環境）
Week 6: AI Testing and Security
（AIによるテストとセキュリティ）
Week 7: Modern Software Support
（モダンなソフトウェア・サポート / レビュー・ドキュメント）
Week 8: Automated UI and App Building
（UIとアプリ構築の自動化）
Week 9: Agents Post-Deployment
（デプロイ後のエージェント活用 / 運用監視）
Week 10: What's Next for AI Software Engineering
（AIソフトウェアエンジニアリングの未来）

最後

今回の紹介は以上です。
サイトは英語のみですが、講義資料はスライド形式なので、翻訳ツールなどを使いながら読むだけでも非常に勉強になると思います。
また時間が取れたときに、それぞれの講義内容をまとめ記事も書くかもしれません。

参照リンク
公式サイト： themodernsoftware.dev
コースの課題：https://github.com/mihail911/modern-software-dev-assignments/tree/master

ウェブサイトでSVGを配置して、cssでドロップシャドウを付ける話

以前の投稿では、SVGの色をcssを使って変更する方法についてお話ししました。今回は、SVGに影(ドロップシャドウ)を追加する方法に焦点を当てたいと思います。

divにドロップシャドウを付ける場合は、以下のようにcssのfilterプロパティでdrop-shadow関数を使用することができます。

.divShape {
  display: block;
  width: 500px;
  height: 500px;
  background: #222;
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4)); 
}

前回のカスタムシェイプの場合、この方法ではドロップシャドウが適用できません。

この場合、擬似要素を使用します。::before擬似要素をカスタムシェイプに適用し、その親であるdivにドロップシャドウを追加します。

このようにすることで、カスタムシェイプのdivにドロップシャドウを効果的に付けることができます。

.svgShape {
  position: relative;
  width: 606px;
  height: 514px;
  filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4)); 
}

.svgShape::before {
  display: block;
  height: 100%;
  content: "";
  background: linear-gradient(45deg, black, transparent);
  mask-size: contain;
  mask-image: url('/img/sample.svg');   
}

ウェブサイトでSVGを配置して、cssで色を変更する話

SVGをウェブページに追加する最も簡単な方法は、<svg>タグをインラインで直接記述するか、<img>要素を追加してsrc属性でSVG画像を参照することです。
SVGファイル直接に使用すると、SVGの色を変えたい時は少しややこしいです。（編集ソフトを使用して、書き直す必要があります。）
(<img> 要素を使用してインポートした場合、CSSだけで色を変更することはできません。)

単色を変えたい場合：
css実装例：

#svgID path{   
　　fill: red; 
}

このようにすればcssでpath要素の色を簡単に変更できるだと思いますが、グラデーションをかけたい場合はSVGファイル自体を修正しなければなりません。そこでもう一つの方法を紹介します。

DIV要素をカスタムシェイプに：

SVGインラインで直接記述するより、DIV要素の形をSVGにすれば、色々カスタマイズができます。今回は外部SVGを参照して、cssで色をグラデーションにします。

divといえば、多くの人のイメージには長方形や正方形しかありません。しかしdivを他の形にすることができます。この時はmask-imageを使います。
（単純にdivの形を変えたい場合はclip-pathも出来ますが、今回の主旨と違いますので詳細は割愛させていただきます）

HTML実装例：
<div class=”svgShape”></div>
css実装例：
(widthとheightはsvgのサイズに合わせてください)

.svgShape {
  width: 500px; 
  height: 500px;
  background: linear-gradient(45deg, black, transparent);
  mask-image: url('/img/sample.svg');
}


このように実装すれば、divはsvgの形に変えられ、色はcssでカスタマイズできます。
実装例：

refrence:

https://developer.mozilla.org/ja/docs/Web/CSS/mask-image