この記事は、東京大学工学部電子情報工学科/電気電子工学科の後期実験「大規模ソフトウェアを手探る」のレポートとして作成されました。 Undo/Redo の履歴が消える悲しみ 編集系のソフトウェアで誰もがお世話になっているであろう Undo/Redo 機能ですが、このような悲しみに襲われたことはないでしょうか？ 「以前の状態に戻したいのに、履歴が消えて戻せない〜〜〜」 講義室でアンケートを取ったところ、8 割以上の方がこの悲しみを経験されていたようです。 といっても、ピンとこない方がいると思うので、具体的にどういう問題があるのか説明していきます。 テキストエディタを例にとります。まず、操作 A, B, C を行います。ここでいう「操作」は、文字列の入力や Back space など、Undo/Redo 以外でエディタの編集状態を変えるものを指します。 続いて Undo を行います。 続いて操作

エンジニア単価表の記事はこちら！ はじめに 社会人になってから数年。数々の失敗を目撃 & 体験をしてきました。 その教訓で、改善すればより仕事も人間関係も円滑に進み、エンジニアとしても成長できるだろうなというネガティブな点をまとめてみました。 僕も過去できていなかったり、今もできていないところはありますが、反面教師として伝えられたらと思います。 特徴 1.納期に間に合わない時、自分から報告してこない 明確に期日が共有できているのにも関わらず、直前もしくは遅れる旨を報告してこないパターンです。 責任感がない人に多い気がします。実力不足であったり、実装していくうちにタスクの見積もりがずれることもあるので勇気を持って報告しましょう！ 2.タスク分解しないで、仕事し始める 機能実装のような中規模以上のタスクは、DB変更など下のレイヤーが間違っているとその上位の実装も全て修正しなくてはいけなくなりま

Mac OS初期設定 開発用ソフトをインストールする前に、まずはMac OSの設定を整えて使いやすいデスクトップ環境を構築します。 初期設定 電源を入れると、色々と初期設定が求められます。基本的には指示に従って進めればOKです デスクトップ設定 まず電源を入れて目につくのが、下のDockが大きくて邪魔だということです。 その他にもスクロールの向きがWindowsと逆だったり、Finder(Windowsでいうエクスプローラ)が使い辛かったりするので、 以下のYouTubeチャンネルを参考にして設定し直すと、使いやすくなるかと思います。 OSアップデート 購入直後のOSはバージョンが古くなっていてセキュリティ的に脆弱なことがあるので、アップデートします。 基本的には初回起動時に自動でアップデート画面が出てきますが、以下の方法で手動アップデートも可能です ・Dockから「システム環境設定」を開

この記事では、以下のようなチームを想定して、お金と手間をできるだけかけずにそこそこセキュリティを向上させることをまとめようと考えています。そんなんじゃだめだ！とか、こういう場合は漏れませんか？というコメント大歓迎です。 想定するチーム 営業やCS、マーケの人など全職種含めると30人前後あるいはそれ以下で、Webサービス（アプリ含む）開発を行っている 副業人材も多く、半数のメンバーは会社支給でないマシンを使っている それらのマシンは他社の業務でも使用されている Macが多めだがWindowsもいる 基本的に業務データはクラウド上にあり、PCローカルにあるのは開発途中のデータ、Biz/バックオフィス系のドキュメント、重たいデザイン系データ程度。自社データセンターや、オフィスネットワークでしかアクセスできないサーバはない。 メインの業務ツールはGoogle WorkspaceとSlackとGit

逃げるプログラマー、避けられない壁 Web系アプリケーション開発をするとなると、React, Angular, Vueといったフレームワークの話題は避けて通れないのだけど、面倒にかまけてみて見ぬふりをしているデヴェロッパー諸君は多いと思う。 自分もそういうダメグラマーの一人でした。 だが、Nodeベースでバックエンドを開発していると、どうしてもフロント側が必要だし、使いたいライブラリーや機能、操作性を組み込むためには、フロント側のフレームワークからは逃げられず、立派なフルスタックデベロッパーになる為に、重いけつを上げ、学習することにしたのであります。 React, Angular, Vueの３大フレームワークをざっと調べてみた際に、一番取っつきやすそうだったReactをチョイス。 しょせんはHTMLとCSSとJavascript で、結局Reactは何をやっているかというと、しょせんはHT

他言語の型システムに馴染みがある人向けのTypeScriptの型システムについてのメモです。個々の用語については『型システム入門』や適当な論文を参照してください。また、個々の型機能の詳細については TypeScript Documentation を参照してください。 合わせて読みたい: TypeScript: Handbook - TypeScript for Functional Programmers 部分型多相（subtype polymorphism）があります。 名前的部分型付け（nominal subtyping）ではなく、構造的部分型付け（structual subtyping）を採用しています1。クラス定義では一見、名前的部分型関係が導入されそうに見えますが型検査は構造的に行なわれます。 パラメータ多相（parametric polymorphism。または総称型（gen

aspect-ratioを利用しない場合は、以下のように、beforeにpadding-top: 56.25%;を指定し、親や子の要素にpositionを設定するという面倒な対応をしないといけない .parent { position: relative; width: 100%; &:before { content: ''; display: block; padding-top: 56.25%; /* 16 : 9 */ } .child { position: absolute; top: 0; left: 0; } } min(), max(), clamp() 便利css関数 例えば以下のようなコードをminを利用すると1行で置換可能 追記：minとmaxの認識が逆になっていました。。申し訳ありません。 ↓この様な認識が正しいですね。 min('基本幅', '最大幅') max

プロダクトを作ってから登録ユーザー400名、月間売上100万円を達成するまでにエンジニアががむしゃらに行った営業方法のメモ書き営業スタートアップサービス開発 ISSUEに移動しました。 その後の情報も配信してるのでぜひご購読お願いします。 最近、開発をブースト🚀する issueから始める開発プラットフォームの「ISSUE」をプレリリースしました。 400名のユーザー様に登録していただき月間売上100万円を達成することができました。 そこで今回はエンジニア出身でプロダクトを作り、 売上を上げる方法を書いて他の方がサービス開発をした時に再現できるように情報を残しておきます。 特にエンジニア出身だと営業ができず詰むことがあるので、 (営業と呼べるようなものではありませんが)そういった方々の一助になれば幸いです。 他サービスを応援する 与えてもらう前に、まずは自分からgiveしてみましょう！ 他

はじめに まずは宣伝です。 このたび保育園を地図から探せる 保育園マップ というサービスを作りました。 WEB版 iOS版 Android版 Vanilla JSのSPAで作ったのですが、思いの外色んなことをやる必要があったので、制作過程で得た知見をこの記事にまとめました。 網羅的に書いたので長いですが、一つ一つのトピックはそれ程長くないので、興味があるところだけ読んでもらってもいいと思います。 Vanilla JS ＆ SPAとは？ Vanilla（バニラ） JSというのは何もフレームワークを使っていない素のJavaScriptのことです。 ただのJavaScriptなんですが、ジョークでフレームワーク風の公式サイト？っぽいものがあったりします。 SPAというのはシングルページアプリケーションの略です。 ページごとにHTMLを用意するのではなく、1つのHTMLの中でJavaScriptに

使った方がいい便利なフロントエンド開発ツールを紹介します。 Photo by ThisisEngineering RAEng on Unsplash はじめに 開発者として、私たちは常に、プロジェクトに取り組んだり何かを学んだりする時に、作業を楽にしたり生産性を高めたりするリソースやツールを使う必要があります。web上には開発者向けに作成されたツールがたくさんあるので、安心してください。その多くは無料で、何も支払う必要はありません。 この記事では、webで入手できる無料の、非常に便利なフロントエンド開発ツールのリストを紹介します。さっそく始めましょう。 1. UiGradients UiGradientsは便利なwebツールで、カスタマイズして選べる素晴らしいカラーグラデーション集です。また、カラーグラデーションは、CSSコードとして取得したり、JPG形式でダウンロードしたりすることもでき

2020 年末に発表された React Server Components は、一言でいうと React コンポーネントをサーバ側でレンダーする仕組みです。……が、初見ではちょっと魔法すぎて訳が分からない技術でもあります。トーク動画だけ見てても「具体的にどんな仕組みで動いてるの？」みたいな疑問が山ほど浮かんでくると思います。 一体裏で何がどうなっているのか、この技術はどう使うのか、デモコードを触りながらやっと具体的に理解しはじめたので、なるべく動作が想像しやすいようにまとめました。なお、この記事単体よりは、他の記事や上記動画を見てある程度概要や公式の売り文句を掴んでからの方が理解しやすいと思います。 これまでの、普通にブラウザで動作するコンポーネントのことを、区別のためにクライアントコンポーネントと呼びます（単に区別のために既存のコンポーネントに別名がついただけです）。以下ではサーバコンポ

国立国会図書館では、さまざまなオープンデータが公開されています。 その中に「図書館及び関連組織のための国際標準識別子（ISIL）」試行版LODがあります。 これは、日本全国の図書館に関する情報が網羅的にまとめられているRDFデータとなります。 提供されているデータはXMLファイルなので個別にデータを取得するためにはプログラムなどで処理する必要があるので、Webブラウザで各データを見やすく提供するWebサイト「図書館施設データポータル」を作成しました。 ここでは、 図書館施設データポータル を紹介します。 図書館及び関連組織のための国際標準識別子（ISIL）」試行版LOD とは 元データは、「図書館及び関連組織のための国際標準識別子（ISIL）」という図書館等につけられる国際的な識別子で、国立国会図書館では、このISILが付与される図書館の情報をオープンデータ(XMLファイルのRDFデータ)

2021/09/22にリリースされた v.15.0.0 中でIPC通信周りに大きな変更はありませんでした。 ただ、その前のバージョン（14.0.0）で、contextBridge.exposeInMainWorld(apiKey, api)からExperimental（実験的）が取れ、正式運用となっていたようです（#30011）。 Electron における IPC 通信 Electron で Desktop アプリケーションを作るにあたって理解しなければならないのは、根幹を成す「IPC通信」かと思います。IPC は Inter-Process Communication、プロセス間通信の略です。 IPC 通信の方法については、Electron において、いくつかの段階を経て、進化を遂げています。今回の記事では、その歴史を追いながら、仕組みとセキュアな方法を書いていきたいと思います。 なぜ

はじめに レポートや論文の作成には $\LaTeX$ は欠かせないですよね。卒業論文や修士論文を書き始める方も多い時期だと思うので、今回は LaTeX と Visual Studio Code を使い、レポートや論文を快適に書ける環境を構築していきたいと思います。 必要なツールのインストール ここはあまり詳しい解説は行いません。 LaTeX と Visual Studio Code がインストール済みの人はこの節は読み飛ばしてください。 LaTeX TeX Live がおすすめです。 TeX Wiki に詳細な説明があります。 コマンドラインで platex や latexmk が実行できれば成功です。 Windows 公式の install-tl-windows.exe をクリックしてダウンロード、GUIのインストーラーに従ってください。 Mac

flex-growとflex-shrinkのお話です。 ある日の我が家 娘（6歳）「ねぇ、パパ？」 ワイ「なんや、娘ちゃん？」 娘「パパはいつも、お仕事でどれくらいコードを書いてるの？」 ワイ「どれくらいって、沢山やで」 ワイ「それはもう山のように書いてるで」 娘「へー、山のようにかぁ」 娘「動かざること山の如しって感じ？」 ワイ「そうそう、ワイのコードはたいがい動かへん・・・コラッ！」 ワイ「誰がバグ製造機やねん」 娘「ところで、そんなパパに聞きたいことがあるの」 ワイ「なんや？」 お買い物サイト製作中 娘「実は今ね」 娘「お友だちから受注したショッピングサイトを制作してるの」 ワイ「受注て」 ワイ「最近の6歳児は受発注すんのかい」 ワイ「まあええわ、そんでどうしたんや」 娘「えっとね」 娘「今、デザインデータを見ながらコーディングをしてるんだけど」 娘「↑このデザインが、CSSで上手く

1. はじめに フロントエンドを始めたばかりの頃、参考書や参考サイトで当然のように使われているものの、特に說明がないような**「慣習」や「テクニック」**に困惑したり、その理由が気になった経験を思い出したので、その一部を簡単にまとめてみました。 2. HTML 2-1. iタグでアイコン HTML の興味深いテキスト要素 (<i>)は、何らかの理由で他のテキストと区別されるテキストの範囲を表します。例えば、技術用語、外国語のフレーズ、架空の人物の思考などです。英文においてはよく斜体で表示されるものです。 <i>: 興味深いテキスト要素 - HTML: HyperText Markup Language | MDN 仕様上は適切な使用方法ではなさそうですが、「Bootstrap Icons」や「Font Awesome」などでも採用されているように、普及している印象があります。 ちなみにHT

前書き この記事は翻訳記事になります。 近年、JSで書かれてるプロジェクトをTSに書き直すことが業界内で一種の風潮になって、 この記事で敢えてTSからJSに戻そうとする事例が目新しいと思ったので、翻訳してみました。 出処: 5 reasons why Deno will stop using TypeScript - StartFunction 原作者: eliorivero Denoの紹介: V8 JavaScriptエンジン及びRustプログラミング言語に基づいた、 JavaScript及びTypeScriptのランタイム環境である。Node.jsの作者であるライアン・ダールによって作成され、セキュリティと生産性に焦点を当てている。 --ウィキペディア 最近、Denoが内部コードでTypeScriptの使用を停止することを指摘する文書が浮上しました。 言及されている問題には、TypeS

はじめに 夏休み中に、YouTubeで見かけた【夫が欲しいというがお金はかけたくないので】スマートロック手作りしてみた【家改造電子工作#2】 という動画に触発されて作りました。 実現したい内容 NFCの読み取りをトリガーとして、ツイートする機能です。 具体的にはトイレに置いたPASMOをスマホで読み取ると、「うんこなう」とツイートする仕組みを作成しました。 必要なもの Android端末 PASMO(NFCタグを使用するために） Trigger（アプリ） IFTTT（アプリ） システム概要 機能の概要を説明するために、簡単な図を作成しました。 仕組みはタイトル通りです。図を使用するまでもないですね。 手順 IFTTTの設定 IFTTTは、異なるソーシャルメディアやプラットフォームを連携させるWebサービスです。 引用元: IFTTT（イフト）とは？異なるプラットフォームを連携する便利ツール

再発防止策を書くのは難しい。 良い再発防止策 良い再発防止策について、順位付けするとしたら、 その種類の問題について二度と意識することがなくなる解決策 その種類の問題を開発時に自動的に検知することができる解決策 その種類の問題が発生しても自動的に復旧することができる解決策 その種類の問題が発生しても影響が局所化される、フールプルーフ、フェールセーフになる解決策 と言うのは意識したいと思いつつ、やはり難しい。 再発防止はむずかしい 障害の再発防止策は、 メカニズム ツール ルール チェックリスト の順番に検討せよ。と言われても、急いで書けなんて言われると「次回からは複数人でチェックします。」とか「チェック項目を追加します。」とかいう徹底できなそうな「反省文」になってしまう。 まさにこの有名な猫...。 **「なぜミスを繰り返すのか」「どうすればミスを防げるのか」を真剣に考えていないことがミス

こんにちは、Barry（ばりゅー）と申します。 いきなりですが言わせてください。 このサービスは今読んでいるあなたのために作ったサービスです！ はじめに リモートワークが当たり前になった今、みなさんはどんなデスクで作業してますか？ 「もっと快適にしたい。」「もっとオシャレにしたい。」 デスクワーカーなら一度、いや、二度三度思ったことがあると思います。 そんなとき、他人のデスクが参考になったりしますよね。 そこでこんなサービスを開発しました。 どんなサービス？ デスク周りに特化した写真投稿サービス「Buildesk（ビルデスク）」です。 【サービスURL】https://buildesk.app 【GitHub】https://github.com/en-Barry/buildesk Buildeskの一番の特徴は、使ってるアイテムも登録できること。投稿者がどんなアイテムを使っているのか瞬時