女子大生が100日連続で生成AIで100本のプログラムを書いたらどうなったか？
ボードゲームやアクションゲーム、各種ツールやシミュレーションなどさまざまなソフトが100日間に作られた いままで数えきれないほどのプログラマーに会ってインタビューもさせてもらってきたが、久しぶりに若いプログラマーの話を聞いてきた。ここ1、2年では U22グランプリの男子中学生や全国小中学生プログラミング大会の受賞者たちだが、今回は、ChatGPTを使ってプログラムを書きまくった女子大生である。 彼女は X（Twitter）の自分のアカウントで1日1本のソフトを100日間連続で作るというイベントをやっていて「おっ、頑張っているな！」と思って応援していた。「こんなゲームを作ってほしい」などとリクエストを出したりもしていたのだが、どうも私が想像していたものと内容もやり方も違っていたようである。 目下、ソフトウェア産業の最大のテーマは「我々は人間の言葉でプログラムを書くようになるだろうか」というこ
イヤホン内蔵マイクの音質、気にしてますか？ 上野優華の生歌で検証！ (2/2)
マイルドで聞きやすい「WF-1000XM3」の内蔵マイク まずはWF-1000XM3から。WF-1000XM3は実売価格で2万6000円前後とやや高額ですが、コンパクトなサイズながら処理性能の高さに定評のあるソニーのノイズキャンセリング機能が使えることと、シックなデザイン・カラーで愛用者も多いモデルです。ワイヤレスイヤホン市場全体でもかなりの人気を誇るモデルと言えるでしょう。 録音音源のレビュー：WF-1000XM3の内蔵マイクで集音した音は、傾向としてはマイルドで、ややくぐもったような音質です。しかし、ネガティブな意味での「くぐもった」というよりは、耳に刺さりやすい帯域が自然に減衰している印象。通話相手にとっても、優しく耳馴染みのよい音質に感じるのではないでしょうか。 ボリュームの大小にもすこしコンプレッションがかかっています。対面で話すとほとんど気になりませんが、意外に人が話すときには
アプリ開発の流れを変える「GraphQL」はRESTとどう違うのか比較してみた
注：単純なデータモデルでさえ、今後の維持や説明が必要になる6つものエンドポイントが含まれています。 あなたがクライアント側の開発者で、movies APIを使い、HTMLとjQueryで単純なWebページを作るとします。そのためには、映画と出演俳優・女優の情報が必要です。APIに必要な機能は揃っているので、データを取得します。 新しくターミナルを開いて以下を実行します。 curl localhost:3000/movies 以下の応答が返ってきます。 [ { "href": "http://localhost:3000/movie/1" }, { "href": "http://localhost:3000/movie/2" }, { "href": "http://localhost:3000/movie/3" }, { "href": "http://localhost:3000/mo
勝間和代が「ヘルシオをオーブンレンジとして買ってはいけない」と思う理由 (1/3)
About Article 経済評論家にして3人の娘を育ててきたワーママ勝間和代さんによる家電レポート。忙しい人のための超時短＆超効率的な家事をめざす「超ロジカル家事」に使っている家電の良さ・悪さを、実体験にもとづき辛口にまとめます。基本的に家電は2台以上使い比べているため、辛さは倍辛。 「シャープ ウォーターオーブン ヘルシオ」2台を愛用している勝間和代さん。お気に入りの理由は「超・低酸素調理」のおいしさ。普段の料理にフル活用することで、時短をしながら圧倒的においしい料理が作れるといいます（記事前篇）。一方、ヘルシオの真価は多くの人に理解されていないとも勝間さんは考えています。なぜなのでしょう？ ●欠点は「初心者が使いこなせないこと」 なぜ、ヘルシオの真価がほとんど理解されていないのでしょうか。 それは、ヘルシオを買った人の多くが正直、 「水蒸気調理」※ をほとんど使わないためです。 ※
UI開発の流れが変わる！React Storybookでデザイナーも開発者も幸せになれる
「用意されたUIパーツが足りなかった」「運用中のUIのメンテナンスが困難」。Reactアプリの開発ならReact Stroybookで問題を解決できるかもしれません。 フロントエンドのプロジェクトを始めるとき、きれいなデザインを考えることから始めます。細心の注意を払って、UI部品とステートやエフェクトを考えて描いていくでしょう。しかし、開発の最中でも次々に変更が発生します。新たな要求、予測していなかった使い方などが、いろいろなところで発生します。当初はかっこいいと思っていたコンポーネントだけではすべてをカバーできず、結局、新しいデザインを考えて拡張することになるのです。 それでも、その時点でデザイナーがチームにいればまだ良いほうです。多くの場合、デザイナーは別のプロジェクトに移っていて、あとから発生したデザイン変更には開発者が対処することになります。その結果、デザインの一貫性が崩れ、ライブ
JavaScriptのテストダブル、定番Sinon.jsと新星testdouble.jsどっちを選ぶ？
JavaScriptのテストダブル、定番Sinon.jsと新星testdouble.jsどっちを選ぶ？ テストダブルは、難しいテストを簡単に実行できる代替コードです。 これまではSinon.jsがJavaScriptのテストダブルを作成するには不可欠なツールでしたが、最近、testdouble.jsという新しいライブラリーが話題になっています。Sinon.jsと同様の機能を備えていますが、いくつか違いがあります。 この記事では、Sinon.jsとtestdouble.jsのできることを紹介し、長所と短所を比較します。Sinon.jsがデファクトスタンダードのままになるか、それとも挑戦者がその座を勝ち取るのでしょうか？ 注意：テストダブルをよく知らない人は、まず私が書いたSinon.jsチュートリアルを読むことをおすすめします。この記事で紹介する用語の理解を深めるのに役立ちます。 この記事で
Reactでも使える！シンプルなJavaScriptステート管理ライブラリー Mobxを試す
Reactのステート管理といえばReduxですが、React以外でも使えるライブラリーとして注目されているのが、MobXです。jQueryとReactを使ったサンプルコードで解説します。 あなたが開発したのがjQueryを使ったごくシンプルなアプリに過ぎなくても、UIのさまざまなパーツの同期を維持する問題に直面したことがあるはずです。たいていの場合、データを変更すると複数の箇所に反映する必要があり、アプリの規模が大きくなるにつれて対応が困難になります。この問題にうまく対処するには、イベントを利用して、アプリのさまざまなパーツに対して、変更があったことを知らせるのが一般的です。 それでは現在、多くの人はアプリケーションのステートをどのように管理しているのでしょうか。 「ステート」とはいったい何者なのか？ ある人物がこう言っています。「こんにちは、ぼくだよ！ ぼくにはfirstName、las
JavaScript疲れに効く！ codemodとJSCodeshiftでリファクタリングが捗る
開発者なら誰しもJavaScriptをはじめとするコードのメンテナンスが面倒だと感じています。日々変更される標準や構文、サードパーティのパッケージ変更に付いていくのも大変です。 近年、JavaScriptを取り巻く状況は一変しています。JavaScript言語のコアは進化し続けて、基本中の基本である変数宣言の方法さえ変更されているのです。ES6では、letやconst、アロー関数などの変更がコアに導入され、開発者とアプリケーションにメリットをもたらしました。 開発者は長く使えるコードを書き、維持する負担が増しています。この記事では、大規模なコードのリファクタリング作業をcodemodとJSCodeshiftツールで自動化する方法を紹介します。言語の新機能を利用したいときに、コードを簡単にアップデートできます。 Codemod Codemodは、Facebookが開発した大規模コードベース向
JSのデバッグにはconsole.log()ではなくNodeのデバッガーを使いなさい
JavaScriptのデバッグに苦労しているなら、Nodeのデバッガーを試してみてはどうでしょうか。Visual Studio Codeならさらに手軽です。 袋小路です！ 何時間も費やしていろいろ試してみたけれどもうまくいきません。コードをじっと吟味してもエラーになりそうなところはありません。2、3回ロジックを見直して、何度も実行しています。単体テストも助けにはならず、同じく失敗してしまいます。もはやどうしていいか分からず、虚空を見つめたくなります。ひとり闇の中にいるように感じて、だんだん腹が立ってきます。 こんなときの自然な反応は、コードの品質を落とし、邪魔なものを全部捨て去ることです。コードのあちこちにprintをちりばめて、なにかうまくいくことを祈るわけです。これでは暗闇で的を狙うようなもので、望み薄なことが分かるでしょう。 よくある話だと感じたのではないでしょうか。今までに数行以上
あのスタートアップ企業がReactをフロントエンド開発に選んだ理由
乱立するフレームワーク／ライブラリーをどう選ぶか？ あるスタートアップ企業がフロントエンド開発フレームワークを選択するプロセスをケーススタディとして紹介。 シンガポールを拠点とした福利厚生サービスを提供するスタートアップ「CXAグループ」（日本版編注：CNETの記事を参照）のコアWebプラットホームを評価するにあたって、時代遅れとなった既存のアーキテクチャをお払い箱にすることにし、イチからフロントエンドを再構築することにしました。課題は、CXAグループが進出しているアジアにある12の対象国のどこでも機能するWebアプリケーションの開発です。 プロジェクトの納期がタイトであることを考慮しつつ、さまざまなフロントエンドJavaScriptフレームワークを評価しました。企業の大型プロジェクトでこれほどの改変をする機会はめったにないため、評価プロセスは可能な限り詳細に詰めました。 フレームワークを
池澤あやかの自由研究：深センは「スマホ決済社会が到来したら」を体現する街だった
中国・深センといえば、世界一の電気街であり、世界中の工場が集まる街でもあり、ハードウェアスタートアップが生まれる街でもあります。さまざまな側面のある深センですが、今回注目したいのは「スマホ決済サービス」についてです。 アメリカはクレジットカード社会、日本は現金社会だと言われていますが、中国は完全にスマホ決済社会です。テンセントの「WeChat Payment」や、アリババグループの「Alipay」などのスマホ決済サービスが広く一般に普及しています。 「広く一般に」というのは誇張表現でもなんでもなく、デパートはもちろん、タクシーや個人営業のお店でもこれらのサービスを使って決済することができます。
フロントエンド開発者が実践したい、アクセシビリティに配慮したJSを書くコツ
JavaScriptを使うことが当たり前になったいま、HTMLだけでなくJavaScriptを書くときにもアクセシビリティに配慮する必要があります。 JavaScriptコンポーネントのアクセシビリティを高め、ユーザーがWebサイトやWebアプリをより快適に使用できるようにするためのコツを紹介します。 以前の記事『Writing HTML with accessibility in mind（アクセシビリティに配慮したHTMLを書く）』で、どうしてWebアクセシビリティについて考えるようになったのか、また、どのように学んだのか説明しました。そして、マークアップを改善して、Webサイトのアクセシビリティを高めるためのコツを紹介しました。中には基礎的な内容も含まれていますが、どれも価値のあるものです。こうしたコツをすべてまとめると、フロントエンド開発において特に重要な2つの不文律ができあがりま
なぜAmazonですらUXデザインの「ダークパターン」でユーザーを騙すのか
コンバージョン率を上げ、短期的なビジネスゴールを達成するために、UXデザインの「ダークパターン」を採り入れる企業が後を絶ちません。4つの実例をもとにダークパターンの問題点を考えてみましょう。 多くの人もそうだったと思いますが、2016年11月8日、私はスクリーンにくぎづけになっていました。そのとき私が米国大統領選挙戦の結果をめぐって当てにしていたのはThe New York Timesでした。ほかのどのソースよりも信頼していたからです。 The New York TimesのWebページの一番上に、「選挙予想」というダイヤルがありました。 ダイアルが意味していたのは「大統領選に勝つ確率」で、左側に激しく揺れ動いていました。このとき私はすでに不安でいっぱいでしたが、それはどんどん高まっていきました。 New York Timesの記者、Jake Swearingenは次のように語っています。
パクりたくなるアイディア発見！ 池澤あやかさんのギーク部屋を大公開！ 360度のぞいてみよう!!
Post from RICOH THETA. - Spherical Image - RICOH THETA 池澤あやかさんといえば、タレントにして自らWebも開発するエンジニア。そんな「ギーク女子」の彼女は、どんな部屋に住み、どんな部屋でプログラムを書いたりしているのか？ 1月中旬、我々は池澤さんのご自宅を訪問した。部屋を取材されるのは、実は今回が初めてだという。そして、彼女の部屋の中にあったのは、普通のお宅では見慣れないものばかり。エンジニアならではの思わずパクりたくなるアイディアも発見！ 池澤さんのご自宅をご紹介いただき、さらにこれからプログラミングを始める人のためのアドバイスもうかがった。 あこがれのアイテムがそろう部屋に潜入！ ―― すごいですね、3Dプリンターもあるし、うらやましい。 池澤 その3Dプリンター、実はあんまり稼働していないんですよね。
Web制作者なら絶対押さえたい、HTML 5.1勧告で生き残った新機能7つ
11月1日にW3Cから勧告されたHTML 5.1。およそ2年ぶりのアップデートでどこが変わったのか？ 主要な変更点を押さえておきましょう。 HTML 5.1とは 2年ほど前のHTML5スタンダードのリリースは、Web開発界隈における大きな出来事でした。一連のすばらしい新機能が搭載されただけでなく、1999年のHTML 4.01リリース以降初のメジャーアップデートでもあったからです。「モダンな」HTML 5スタンダードを意気揚々と使ったWebサイトをいまでも見かけることがあります。 幸い、HTMLの次のアップデートまでそう長くはかかりませんでした。2015年10月、W3CはHTML5で未解決となっていたいくつかの問題の修復を目的としたHTML 5.1ドラフトの策定に着手しました。多くのアップデートを経て2016年6月に「勧告候補（Candidate Recommendation）」、2016
汚いコード書いてない？フロントエンダー必須のPostCSS+Stylelintがいい感じ
チームでCSSを書くなら、コードをなるべくきれいに保ちたいもの。CSS変換ツールとして注目を集めるPostCSSとStylelintを使えば、効率よく実現できそうですよ。 ｢コード品質｣は、プログラマーにとって目新しいものではありません。開発者は、コードがただ機能するだけでは不十分だと知っています。コードは読みやすく、明快な構成で、一貫性があるべきです。また、ある一定の評価指標に沿っている必要があります。 あいにく、この点はCSSを書く際に見落とされがちです。理由を長々と話してもよいのですが、重要な点は、CSSもJavaScriptやPHPなどと同様のコードであり、その書き方には気をつけるべきだということです。そうしないと、より複雑な事態を招きかねません。 記事では、「PostCSS」というツールを使ってCSSコードを高品質に保つ方法を説明します。最初に｢より良いCSSコード｣とは実際どの
サイトの課題はユーザーインタビューで知る (1/2)
「ユーザーインタビュー」。聞いたことはあっても実施するタイミング、方法、結果の活用方法がわからない方も多いのでは？ ヤフーでUXデザイナーを務める瀧知惠美氏が、事例をもとに4回にわたって解説します。（編集部） ユーザーインタビュー（直接ユーザーと話をすること）を業務で活用する場合、わからないこと、うまくいかないことが多々あります。本連載では、ユーザーインタビューを実践するにあたって気をつけるべき細かなポイントを、実施プロセスに沿って紹介します。最初の2回は、Yahoo!ショッピングでユーザーインタビューを活用した事例となります。第1回目の今回は、ユーザーインタビュー実施の意義と準備までまとめました。 そのため、「商品詳細ページでカートボタンが押されにくい」といった課題が見つかると、PDCAを回して商品詳細ページを改善していましたが、大きな効果は得られませんでした。そこで、ユーザー導線を俯瞰
ソフトバンクとauの“無意味な”新プランは誰のためか：石川温氏寄稿
ソフトバンクの、2年縛りをなくして3年目以降、契約解除料9500円を取らない新プランのプレスリリースを最初に見たとき、「お、なんて良心的なんだ」と勘違いしてしまった。 従来のプランに比べて月額300円高くなるだけで、契約解除料が取られないとは素晴らしい。実は、すでに2年縛らないプランは現在も存在するが、2年縛られるプランの2倍の基本料金設定となっている。「基本料金は2倍だが、契約解除料が不要」というプランをまた持ってくるかと予想していたので、月額300円はなんてリーズナブルなんだと感心してしまったのだ。 これでユーザーが自由になれるなら、一気に格安スマホへの普及が進むでのはないかと思ってしまった。しかし、しばらくして自分はリリースを読み間違えていたのに気がついた。 実は当初、最初の2年間は従来通りの「通話し放題」プランなら月額2700円、1回5分までの「通話し放題ライト」プランなら1700
進化するレスポンシブWebデザイン 「SGDD」とは何か？ (1/2)
「レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック」という書籍を2013年に上梓して2年が経ちました。この間、レスポンシブWebデザインも大きく進化しています。中でも、スタイルガイドを利用した制作アプローチは、レスポンシブWebデザインにおける新たな主流となりつつあります。 スタイルガイドとは スタイルガイドとは、ボタンや見出しといった、Webサイトを構成する部品の集合場所のことです。クライアントを含む案件に関わる全員が参照することで、それぞれのパーツがブラウザー上でどのように表示されるのか、どのように挙動するのかを確認できるようにするものです。デザインパーツや挙動を最終工程で確認する前に関係者間で共有できるのが大きなメリットです。 このほかにも、スタイルガイドには以下のようなメリットがあります。 生成されたCSSの集合体は他のページでも動作が可能 CSSの数は少なく
SVGの見た目は「属性」で書く――HTMLとの違い
SVGはCSSよりも後に登場した仕様なので（SVG 1.0が2001年リリース、CSS 2が1998年リリース）、いくつかの属性は普段CSSでなじみのあるプロパティとまったく同じ名前になっています。また、それ以外の属性名についても、ハイフン「-」区切りとなっており、CSSプロパティ名の作法に則っています。SVGの属性名は、当時としてはモダンなルールで決められたわけですね。 それぞれの属性がどのような表示になるのか、簡単に見ていきましょう。 塗り色を指定する「fill属性」 fill属性は、塗り色を指定する属性です。値にはCSSでも使っている「色」を指定します。fill-opacity属性を併用すれば、塗り色の透明度も指定できます。 <body> <svg width="320" height="200" viewBox="0 0 320 200"> <circle cx="40" cy="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
