TypeScriptを導入する意味と限界、型レベルプログラミングの紹介 - Qiita
はじめに JavaScript/TypeScript初学者を抜けたあたりの方に向けてTypeScriptの利点や限界、型レベルプログラミングについて紹介します。 TypeScriptはJavaScriptをラップしたライブラリであり、静的な型情報をつけることができます。また、それらの型情報をもとに型を推論し、型違反な代入やプロパティへのアクセスなどをプログラム実行 以前 に検知することができるようになっています。 例えば、動的型付けの言語であるJavaScriptでは、以下の関数のa,bには数値だけでなく、文字列を渡すことができます。数値同士を渡せば加算してくれますし、文字列同士を渡せば文字列連結をしてくれます。 「数値計算用の関数なのに、文字列連結に利用できてしまう」という緩さを開発時にはなるべく排除しようというのがTypeScriptを導入する意義です。 以下、TypeScriptの基
自作した時間割アプリが大学の公式アプリに採用された話 - Qiita
記事の概要 私（芝浦工業大学学部4年生）が大学２年時に1人で制作した、大学のポータルアプリ（ポータルサイトからスクレイピングして時間割などを表示する）が、大学に正式採用され、公式アプリ"ScombApp"としてリリースされるに至った経緯を時系列順に説明します。 ホーム画面 時間割画面 制作の動機 大学のポータルサイト使いにくいがち。 ポータルサイトのスマホアプリ版があれば便利そう。 他にやってる人いなさそうだし、最初に作ったらみんな使ってくれそう。 ポータルサイトの問題点 大学ポータルサイトで使いにくかった点を挙げていく。 とりあえずこれを克服することを目標にした。 ログインの時に自動補完が使えない 制作当時はBASIC認証で、スマホからだとログインの自動補完ができなかった。 毎回手打ちでパスワードを入力している人がほとんど ←！？ 次の授業や教室を確認するだけでも、毎回手打ちログインが必
【まとめ】大学が公開している有益な資料 - Qiita
はじめに 今回は各大学が公開している、エンジニア向けの資料をまとめていきます。 東京大学 ChatGPT活用法 ChatGPTの基礎的な内容から実際にどのように活用すべきかが解説されている。 Pythonプログラミング入門 Pythonについて環境構築から始まり、基本文法、応用的な使い方まで分かりやすく解説されている。 AWS入門 ハンズオン形式でAWSの学習ができる。 AI・データサイエンスの活用事例 データサイエンスやAIの活用事例を学べる。 人工知能・深層学習を学ぶためのロードマップ AIやデータサイエンスの具体的な活用事例が学べる。 京都大学 プログラミング演習 Python 統計学 統計学やデータ分析、検定を学べる。 慶應大学 ChatGPTの活用資料 ChatGPTを用いた開発方法が学べる。 東京工業大学 機械学習 筑波大学 データベース データベースの基本から正規化や設計とい
エンジニアは全員おうちKubernetesをやるべし【Part 2：どうやるのか】 - Qiita
こんにちは。おうちKubernetesを勧めるためにやってきました。 このシリーズでは、Part 1で「なぜやるのか」、Part 2で「どうやるのか」について話します。 この記事は自宅サーバー上のKubernetesで不特定多数向けのサービスを展開することを勧めるものではなく、自分用・身内用のアプリを自宅サーバー上のKubernetesで運用することを勧めるものです。 ハード面 1台構成 or 複数台構成 複数台構成を取るメリットは大きいものだと以下があります。 1台が不調でも残りのサーバーで処理を継続できる（可用性が高まる） 大量のアクセスを捌ける 前者は、自宅サーバーでは気にしても仕方がないというか、停電やネット回線の障害で簡単に落ちるため、過度に可用性を気にする必要はないと思います。逆に言えば、可用性を気にする場合には、そもそも自宅サーバーはあまり向いていません。電源やネットを普段使
エンジニアは全員おうちKubernetesをやるべし【Part 1：なぜやるのか】 - Qiita
こんにちは。おうちKubernetesを勧めるためにやってきました。 このシリーズでは、Part 1で「なぜやるのか」、Part 2で「どうやるのか」について話します。 この記事は自宅サーバー上のKubernetesで不特定多数向けのサービスを展開することを勧めるものではなく、自分用・身内用のアプリを自宅サーバー上のKubernetesで運用することを勧めるものです。 エンジニアは全員おうちKubernetesをやるべき絶対的な理由 自己研鑽のために （鑽←この字「研鑽」と「大鑽井盆地」でしか見ない） 企業がKubernetesを採用する場合、ほとんどがEKSやGKEといったクラウド上で動作するマネージドKubernetesサービスを使用すると思います。ただ、Kubernetesであればコマンドやマニフェストファイルの書き方は共通なので、おうちKubernetesで学んだことがそのまま業務
【永久保存版】0からAWSを勉強するならこのロードマップに従え！ - Qiita
はじめに こんにちは！！@Sicut_studyです！ 先日出しました記事が多くの方に見ていだきました！ 今回はAWSのロードマップの紹介です。 AWSを勉強しようとしている人からよく聞くのが AWS勉強したいけど何からしたらよいかわからないから資格の勉強しています 資格を勉強するのもいいですが最速でAWSを実践的に使えるということを目的にするなら、その方法は個人的には微妙かなと思います。 私もこのロードマップを行ったあとに試しに資格をとってみましたが、あまり実務に速攻的に役立つという感じではありませんでした (高度なものなら違うかもしれません) 私も2年前はAWSについてまったく知りませんでした しかし、とあるタイミングで 先輩がやっているようなAWSの環境を作って管理するのを私もできるようにならないと高みにいくことはできない このように思うようになり、ロードマップに沿ってに1から学習を
君はVS Codeのデバッグの知られざる機能について知っているか - Qiita
はじめに こんにちは、kenです。 GWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたらデバッグに関して知らない機能がいくつかあったので、今回はそれをご紹介したいと思います。 おそらく今から紹介する機能はあまり知られてないと思います。もし全部知ってたらVS Code完全理解者なので誇ってください。（！？） 以下に記載する内容はVS Codeの公式ドキュメントのDebuggingという章を参考にしています。 注意 これから紹介する機能は言語によって使えたり、使えなかったりします。 今から紹介する機能のデモはすべてPythonで行おうかと思ったのですが、上記の理由からPythonではサポートされていない機能についてはJavaScriptやC++で代用しました。 デバッグで使える便利な機能 ログポイント機能 行を指定しログポイントを追加すると、そ
【入門】フロントエンドのテスト手法まとめ - Qiita
はじめに 自分は2021年に新卒でweb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は実務でNext.jsプロジェクトにテストを導入することになり「React-Testing-Library」と「Jest」について改めて学び直したのでその内容を紹介します。 はじめに「React-Testing-Library」と「Jest」の概要を説明しその上で具体的なテストコードを何パターンか書いていきます。 この記事の対象者 フロントエンドのテストの概要を知りたい人 React-Testing-LibraryとJestについて知りたい人 具体的なテストの書き方を学びたい人 なお本記事では、React-Testing-Libraryの具体的な書き方についてをメインにしている
Webフロントエンドパフォーマンスチューニング80選 - Qiita
こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン
ER図の作図について、 Draw.io, PlantUML, Mermaid を比較してみる。（VSCode拡張機能など） - Qiita
※ 参考記事「PlantUML を VSCode で利用したいけど、プレビューが表示されずエラーが出る」 参考（PlantUML 導入後の編集中画面） 2-2. ER図 今回作成したER図 Qiita記事でも、コードブロック内でPlantUMLの構文がそのまま使えます。（このER図は、Qiitaのコードブロックで表示させています） 今回作成したER図のPlantUMLの表記 @startuml yonde ' hide the spot hide circle ' avoid problems with angled crows feet skinparam linetype ortho entity "families" as families { id -- name nickname introduction created_at updated_at } entity "users
僕が考える最強のコミットメッセージの書き方 - Qiita
この記事は DeNA 21 新卒 Advent Calendar 2020 の16日目の記事です。 はじめに Gitを使っていく上でコミットメッセージは必須なものです。 そのメッセージ、fix とか適当になっていませんか？ コミットメッセージがおざなりなままだと、どんな変更をしたのかが掴みにくく、レビュー時や後で見たときにコードを追うのが難しくなります。 逆に、コミットメッセージをこだわるだけでより良い開発環境、開発者体験を実現できます。今回は僕が良いと考えている書き方をまとめてみようと思います。 この記事のターゲット Gitを使ったことがある方 チームで決められたコミットルールを理解、改善したい方 よりよい開発者体験を実現したい方 ※諸注意 まず、コミットメッセージの書き方に正解はありません。タイトルにもあるとおり、あくまで「僕が良いと考えている」書き方なので、一意見として参考にしていた
お前らはまだ img タグの alt 属性の付け方を間違っている - Qiita
1行で alt属性は、「全ての 画像をそのalt属性のテキストに置き換えたときにページの意味が変わらない 」ようにつける。 （HTMLの標準規格書より） マジでこれに尽きる。 具体例 例１：ロゴ ❌ 間違ったマークアップ
console.log(); しか使えなかった自分へ。。。 - Qiita
この記事について Webエンジニアになって早１年半。railsのデバッグをする時にはエディターのデバッガーでスマートにできていたが、javascriptになるといつもconsole.log();ばかりを使って原始的なデバッグをしていた。。。 そんな脳筋な過去の自分に教えてやるための記事です。 console.log({変数名}); 「いきなりconsole.log();の紹介かい！！！」って思われるかもしれませんが、この技を知ったときは「なんで知らんかったんや。。。」って思うくらい便利だったので最初に紹介します。 以下のようなHTMLがある場合 <form> <input type="text" value="名無しの権兵衛" id="name"> <input type="text" value="80歳" id="age"> <input type="text" value="バスケ"
【CSS】「なんかグラデーションが汚くなるんだけど」を解決する。 - Qiita
概要 このグラデーションは、#ff0000 → #00ff00のグラデーションになります。 みなさんは、このクラデーションを見てどう思いますか？ 真ん中あたりの色が茶色っぽくなって あまり綺麗なグラデーションとは感じないですよね? この記事では、これが発生する原因と綺麗なグラデーションの作り方を 解説していきます。 この記事を読んで理解すれば、綺麗なグラデーションが簡単に作れるようになるでしょう。 原因 1. RGBについて理解する RGBは、赤（Red）、緑（Green）、青（Blue）の3つの色を それぞれ、0~255の値を指定することで、色が作られます。 例えば、 R: 255, G: 0, B: 0 → 赤 R: 255, G: 255, B: 0 → 黄色 このように色が指定されます。 では、RGB全てが同じ値の時はどんな色になるでしょうか？ 答えは、↑このようにグレースケールカ
【Next.js】Warning: X did not match.Server: y Client: z は絶対に解消しろ - Qiita
【Next.js】Warning: X did not match.Server: y Client: z は絶対に解消しろReactNext.js 追記 (2022/04/19) React18より、この記事で解説している内容はワーニングからエラーへ引き上げられました。 この記事で解説しているのは、React17の頃にワーニングレベルであったこの警告を「なぜ放置してはいけないか」ということについてです。 残念ながら 「どうやって解消すべきか」については触れていません ので、問題解決を急ぎたい方は、今すぐこの記事を閉じて他の記事を探してください。 結論 パフォーマンスに与える影響が非常に大きい。 「コンソールにワーニング出てるけど、レンダリングされる結果は問題ないからいいか」ぐらいの軽い気持ちで無視すると痛い目を見る Warning解消前 Warning解消後
React Testing Libraryの使い方 - Qiita
Robin Wieruch氏によるHow to use React Testing Library Tutorialを著者の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://www.robinwieruch.de/react-testing-library Kent C. Dodds氏によるReact Testing Library (RTL)がAirbnbのEnzymeに取って代わるものとしてリリースされました。EnzymeはReact開発者にReactコンポーネント内部をテストするためのユーティリティを提供しますが、React Testing Libraryは一歩さがって、「Reactコンポーネントを完全に信頼するためにはどうテストすべきか」を問いかけます。コンポーネントの実装の詳細をテストするのではなく、React Testi
【フロントエンド】コンポーネント指向 React / Vue のテスト方針 - Qiita
はじめに 今回紹介するのは、React や Vue などの「コンポーネント指向のフロントエンド開発」における「テスト方針の考え方」と、それを実現するための「方法論」です。 初めて React などのコンポーネント指向のテストを書くとき、どういう考え方・方針でテストを書いていくのか分からず悩んだ人も多いのではないでしょうか。 この記事ではその疑問の1つの解として、React 公式で推奨されているテストライブラリ Testing Library の開発者であり、Testing Trophy というテストコンセプト考案者でもある Kent C. Dodds の考え方とその実現方法を紹介していきます。 社内のシステムでも実際にこの Kent のコンセプトに従いテストの運用をしていますが、これによって「壊れにくいテスト」がフロントエンド（React）で書きやすくなっています。より正確に言うと「壊れる
モダンな技術で手軽に地図アプリを始めてみよう！！！（Next.js/TypeScript/Tailwind CSS/maplibre GL JS/Deck.gl） - Qiita
モダンな技術で手軽に地図アプリを始めてみよう！！！（Next.js/TypeScript/Tailwind CSS/maplibre GL JS/Deck.gl）TypeScriptNext.jsdeckgltailwindcssMapLibre はじめに はい！！！今年もやってまいりましたMIERUNEアドベントカレンダー！！！ 記念すべき1日目は「何をするにもまずは環境構築からだよね！」ということで、モダンな技術をふんだんに使ってフロントエンド側の環境を構築し、簡単な地図アプリ用テンプレートを作成いきたいと思います！ 最新技術を利用すればめんどくさい環境構築も簡単に行えるようになるぞーっていうのを知ってもらえればなーと思います！ こちらに記載の手順を全部実行したテンプレートは以下のリポジトリで公開していますので、せっかちな方はこちらからどうぞ！ https://github.com/n
サクっと作った英語学習サービスがバズって1週間以内にやったこと - Qiita
要約 Qiita記事がトレンドインすると、瞬間的にWebサービスへのアクセス数が急増するが、数日でアクセス数は元に戻ってしまう。 そこで以下の施策を速攻で打ってバズっているうちに有益な学びを得るべきと考え、本記事はそれを実践した結果を実データと合わせて説明している。 事前登録フォームを作って興味を持ってくれた人と繋がる Twitterやはてぶのコメントからどうして興味を持ってくれたのか考察する 有料機能を作って単なるバズなのか、本当にニーズがあるのか判断できるようにする バズる１週間前にやっていたこと 3日でツールをサクッと作った 英語面接や仕事で海外の人とやりとりをするときに「ちょっと難しい質問」をされると、途端に5歳児になってしまう自分が恥ずかしくなり、DeepLで英語の勉強をするツールを作った。 自分が使うだけのつもりだったので、アカウント機能などはなく、コアな機能１つを実装しただけ
useRefでステートを管理するのはReact18でアンチパターンになるからやめよう - Qiita
こんにちは。最近、Reactでのステート管理において「useStateの中にステートを置くのではなく、useRefで得たrefオブジェクトの中にステートを置いてuseState（またはuseReducer）をコンポーネントの再レンダリングを発生させるためだけに使う」というやり方を複数の記事で見かけました。このパターンは、今（React 17以前）は動くけどReact 18でアンチパターンに変貌するやり方なので、啓蒙するためにこの記事を用意しました。 ステート（コンポーネントのレンダリングに使用される値）は、useRefではなくuseState（またはuseReducer）をちゃんと使って管理するようにすれば、React 18以降も安泰です。 useRefをステート管理に使うパターンとは こういうやつです。 // 普通のやり方 const Counter1: React.VFC = () =
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
