サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ブラックフライデー
zenn.dev/nameless_sn
はじめに 今回の記事では、類似しているWeb技術であるReactとNext.jsをコードベースで比較する。 対象とする読者 ReactとNext.jsの違いがわからない人 技術選定で、ReactとNext.jsのどちらにしようか悩んでいる人 Reactとは React(リアクト)は、Meta(旧Facebook)が開発しオープンソースとして公開しているJavaScriptライブラリで、ユーザインターフェースの構築に特化している。 Reactの特徴は以下の通りだ。 コンポーネントベース:Reactの中核となる考え方は、UIを再利用可能なコンポーネントに分割することにある。これにより、大規模なアプリケーションでも管理を簡単にできる。 仮想DOM:Reactは仮想DOMを使ってページの更新やレンダリングを行う。 宣言的UI:Reactは宣言的UIを採用しており、アプリケーションの各状態に対してU
はじめに 今回の記事では、認証と認可の違いを『ポケットモンスター』(以下『ポケモン』)を具体例に、簡単なJavaScriptのコードを用いて解説する。 認証(Authentication)とは 認証は、ユーザが主張する自分の身元(ユーザ名、パスワード)が正しいかどうかを確認するプロセスを意味する。認証の最大の目的は、アクセスしようとしている人を確認するためにある。数多くのWebサービスで存在する「ログイン」機能は、認証の代表的な具体例だ。 認証の主な具体例は以下の通りである。 ユーザ名とパスワード 顔認証、指紋認証等の生体認証 ワンタイムパスワード 認可(Authorization)とは 認可とは、特定のリソースやサービスへのアクセスを拒否するプロセスである。大半は認証が成功した際に行われることが多い。認可の最大の目的は、認証されたユーザが許可されている行為とそうではないものを決定するため
注意:今回の記事はあくまで初心者向けにWebSocketの概要を理解してもらうために執筆されている。そのため、一部正確性を欠く可能性がある。詳細にWebSocketについて学びたいならMicrosoftの解説記事やWebSocket Protocolを確認してほしい。 はじめに 今回の記事ではWebSocketを解説する。 対象とする読者 WebSocketについてわからないひと WebSocketとは? WebSocketは双方向のHTTPプロトコルで、クライアントとサーバの通信で成立する。HTTPとは異なり、ws://あるいはwss://から始まる。WebSocketはHTTPとは違って、クライアントとサーバ間の接続はどちらか一方が切断されると終了する。WebSocketが動く仕組みはHTTPのそれとは異なり、ステータスコード101がプロトコルの切り替えを示す。 WebSocketが動
はじめに 今回の記事では、Web開発でPythonを学ぶ上で絶対に確認するべきGitHubリポジトリを18個、私の独断と偏見で解説する。 対象とする読者 これからPythonをWeb開発で導入したい人 Pythonを使ったWeb開発に興味がある人 Pythonに関連した情報収集している人 タイトルでなんとなく気になった人 Django DjangoはPythonで開発されたWebフレームワークである。最大の特徴は、バックエンド開発に必要な機能がデフォルトで搭載されている点にある。手軽に、簡単なWebアプリケーションを開発したいなら選択肢に入る。 Flask シンプルで軽量なWebフレームワークであり、初学者にとって学びやすいためです。Flaskを学ぶことで、ルーティング、テンプレート、リクエスト/レスポンスの処理など、Web開発の基本的な概念を理解できる。 FastAPI FastAPIは
はじめに 今回の記事では、設計やソフトウェアアーキテクチャを学べるGitHubリポジトリを16個紹介する。 対象とする読者 設計やソフトウェアアーキテクチャに興味関心があるエンジニア GitHubをエンジニアリングの情報収集に活用したいエンジニア タイトルで気になった人 Architectural Patterns システムの基本的な構成を理解するためのパターンやテンプレートを提供している。これらのパターンを学ぶことで、システムの構造やコンポーネントの関連性、相互作用を理解できる。これが開発者にシステムをより効率的かつ効果的に設計・実装する能力をもたらす。 Design Patterns for Humans 設計パターンを人間が理解しやすい形で説明している。デザインパターンは特定の問題に対して再利用可能なソリューションを提供する。これによって、開発者はより効率的にコードを記述でき、メンテ
はじめに 今回の記事では、ソフトウェアアーキテクチャの入門的な内容を解説する。 対象とする読者 ソフトウェアアーキテクチャを勉強するエンジニア アーキテクチャに関して全くわからない初心者 タイトルで気になったひと ソフトウェアアーキテクチャとは? ソフトウェアのアーキテクチャは、システムの主要なコンポーネント、それらの関係(構造)、およびそれらがどのように相互作用するかを記述する。ソフトウェアのアーキテクチャとデザインには、品質属性、人間のダイナミクス、デザイン、IT環境など、多種多様な寄与要因が含まれる。アーキテクチャは、品質、保守性、パフォーマンス等のような全体的な成功に影響を与える重要な決定を含む。 ソフトウェアアーキテクチャの主な目的は、アプリケーションの構造に影響を与える要件を特定することだ。良好なアーキテクチャは、技術的な解決策を構築する際のビジネスリスクを削減し、ビジネス要件
はじめに 今回の記事では文章を書く方法を解説する。本記事ではエンジニアを対象としているものの、文章を書く能力はどの業界でも応用できる。単に「文章を書く」だけでは多義的な解釈ができるので、今回の記事では主に「論理的な文章を書く」能力に焦点を当てて解説する。 対象とする読者 エンジニアリングに携わっている人全員 これから技術記事を書こうと思っているエンジニア 「文章を書く能力」が必要不可欠な理由 エンジニアリングの現場では文章を書く能力が必要不可欠だ。その理由として、以下のようなことが考えられる。 ドキュメント化の重要さ:ソフトウェア開発のプロジェクトでは、設計から実装、テストに至るまでの各段階でドキュメントが必要となる。このドキュメントが明瞭に書かれていると、他のエンジニアやプロジェクトの関係者が情報を正確に把握しやすくなる。 コミュニケーション:チーム内でのコミュニケーションや、他の部門、
はじめに Web技術は日進月歩で新しい技術が増えているが、実務でそれらすべてを触る機会はない。そこで、今回の記事では2023年下半期に赤の他人に勧めたいWeb技術を個人の独断と偏見で解説する。 対象者 これから何をすればいいのかわからないプログラマー 新しい技術に興味があるひと スキルセットを拡大したいひと タイトルでなんとなく気になったひと フレームワーク FastAPI FastAPIはPythonでAPIを開発するために開発された軽量のWebフレームワークだ。FastAPIでは、主に以下の特徴がある。 Node.jsやGo言語に匹敵する高速なアプリケーションを開発できる 構造が簡単(Flaskの影響を受けている) Pythonに型定義を含められる 環境構築がコマンド一つで終了する 非同期処理を簡単に実装できる Pythonで開発されているので、機械学習との相性が抜群 RESTとGra
今回の記事は、2023年8月29日に開催されるPostman Meetup Fukuokaの登壇に向けて、Postmanへの感謝を伝えるために執筆した記事である。 今回の記事は、これからPostmanを実務で導入するプログラマーを対象に基本的な使い方を解説した記事になる。Postmanの専門的な使い方を知りたいならPostman Learning Centerを確認してほしい。本記事はあくまで二次情報に過ぎないので、より正確な情報を求めるならそちらを参照すること。 今回の記事では、API設計・開発で重宝するサービス「Postman」の使い方を解説する。 対象者 これからPostmanを学ぶひと 実務でPostmanを触っているひと Postmanに興味があるひと タイトルでなんとなく気になったひと Postmanとは PostmanはWeb API(以下「API」)の設計・開発、テストをサ
はじめに 今回の記事では、私の独断と偏見でエンジニアリングにおける必須の書籍を、以下の分野に分けて40冊共有する。 Web開発 行動経済学 ソフトスキル その他 対象とする読者 プログラミング初心者 どの書籍から読み進めればいいかわからないプログラマー なにか新しい書籍を読みたいひと なんとなくタイトルが気になったひと Web開発 『リーダブルコード』 良質なコードの原則と具体的なテクニックを丁寧に解説している。プログラミング初心者はまずこれを読むべき。良質なコード―要は、メンテナンスしやすいコードを書く上で重要なヒントを教えてくれる。コーディングで一生役立つ知識が満載だ。何度読んでも決して色褪せることのない不朽の古典である。 『14歳からのプログラミング』 図解付きでプログラミングの基礎(例:変数、関数、条件分岐)を理解できる。小難しい専門用語が一切なく、初心者でも問題なく理解できるよう
はじめに 今回の記事では、今年にリリースされたTypeScriptフレームワークであるExpressoTSの概要と、それを使った簡単なWebサーバを構築する手順を解説する。 対象とする読者 タイトルを読んで気になったひと 実務でTypeScriptを触っているひと TypeScriptでWebサーバを構築したいひと ExpressoTSとは ExpressoTSとは、NestJSと同様にTypeScriptで開発されたバックエンドフレームワークである。公式サイトのIntroductionには、以下のように説明されている。 ExpressoTS is a TypeScript lightweight framework for building scalable, readable and maintainable server-side applications. The framewor
はじめに 今回の記事ではデータベースを使わずに、1時間でFastAPIでGraphQL APIを開発する方法を解説する。 対象とする読者 FastAPIを使っているひと これからPythonでGraphQL APIを開発したいひと タイトルを見て気になったひと 開発環境 Windows 11 Python 3.10.2 FastAPI Strawberry 0.196.2 Visual Studio Code 1.80 Strawberryとは Strawberryとは、Pythonで開発されたGraphQL APIのサーバを開発を補助するためのライブラリである。Pythonの型ヒントを使ってGraphQLのスキーマを定義し、APIの開発を助けるためのツールを提供している。 公式サイトによると、FastAPIでGraphQL APIを開発するうえでStrawberryを使うことを推奨してい
注意:今回の記事で載せているコードは読者に具体的なコードのイメージを持たせる目的で書いている。それ故に、実際にブラウザ上で実行しても動作しない点には注意してほしい。より専門的ににGraphQLとRESTの違いを学びたいならLogRocketの記事とApolloの記事を参考に。 はじめに 今回の記事では、Web APIの開発に重宝されるRESTとGraphQLの違いを解説する。 対象とする読者 これからREST、またはGraphQLを実務で積極的に活用したいひと 両者の違いがわからないひと 個人開発等でWeb APIをつくるひと タイトルを見てなんとなく気になったひと APIとは RESTとGraphQLの議論に入る前に、まずはAPIについて説明する必要がある。 Wikipediaによると、API(Application Programming Interface)は以下のように定義されてい
はじめに 今回の記事では、JavaScriptの学習における最大の鬼門の一つ「非同期処理」を、任天堂のゲーム『スーパーマリオ』を具体例に、初心者でもわかりやすく解説する。 対象とする読者 プログラミング初心者 非同期処理が全くわからない初心者 タイトルで気になったひと 同期処理と非同期処理 まずは、「同期」と「非同期」のそれぞれの定義や違いについて解説する。同期処理とは、コードを上から下まで順番に処理することを意味する。一方で、非同期処理はある処理が終わるのを待たずに、別の処理を実行することを意味する。 参考までに、「分かりそう」で「分からない」でも「わかった」気になれるIT用語辞典では、以下のように説明されている。 非同期(読:ヒドウキ 英:asynchronous)とは相手との足並みを揃えないこと。あるいは、相手の反応を待たないで、ひょいひょい行動すること。 同期は何かと何かを「同じに
「3時間でNode.jsでREST APIを作る」ためのチュートリアルブックです。気軽に手にとってもらうために分量を少なめにしました。初心者から上級者まで学びのある内容になっています。チートシートとしても活用できます。
はじめに 今回の記事では、NestJSやPrismaを用いて、簡単なCRUD機能付きのREST APIを開発する手順を解説する。今回の記事では、『ドラゴンクエスト』に登場する武器のデータを表示するREST APIを開発する。 対象読者 これからREST APIの設計・開発でNestJSを使いたいひと NestJSやPrismaに興味のあるひと 開発環境 Node.js 20.4.0 NestJS 9.4.0 Prisma 4.15.0 Visual Studio Code 1.79 SQLite Windows 11 本記事で使う技術の説明 Node.js JavaScriptやTypeScriptのWeb開発で必要不可欠な、JavaScript実行環境。 SQLite 環境構築要らずで、簡単にSQLのデータベースを構築できるRDBMS(リレーショナルデータベース)。多種多様なプログラミン
はじめに 今回の記事では、ChatGPTを使って仕事や学習を進めているプログラマー向けに、良質なプロンプトに関するベストプラクティスを12個、手短に紹介する。 TL;DR(本記事の結論) プロンプトを明確にする 正確なコンテクストを提供する 与えるタスクを細分化する 命令文を簡潔にする 意図を明示する 再試行する フィードバックを活用する 専門用語を活用する 反復的に思考して改善する プロンプトを順序付ける 例を用いて望む出力形式を明示する 「リーディングワード」を活用する プロンプトを明確にする 悪い例
はじめに 今回の記事では、設計や開発で必要不可欠であるものの、とっつきづらい「ER図」を、『ドラゴンクエスト』に登場するモンスターを具体例に説明する。言い換えれば、『ドラゴンクエスト』のモンスターのデータを出力する際に必要なデータベース設計を考える。 対象とする読者 プログラミング初心者 ER図についてまったくわからないひと 記事のタイトルに興味を持ったひと ER図とは ER図はEntity Relationship Diagramの略称である。データベースのテーブルであるエンティティと、テーブル同士の関連を示すRelationshipを図で表現したもので、主としてデータベースのテーブル設計の際に用いられている。 ER図はそのシステムが扱うデータ構造や関係性を把握する上で必要不可欠である。 ER図のつくりかた (1) 最終的に出したいイメージを作る まずは、初心者向けに最終的なゴールのイメ
はじめに 今回の記事では、RPG『ドラゴンクエスト』に登場する武器のデータを用いてSQLを、チートシート形式で徹底解説する。なお、本記事にて登場する武器や防具はドラゴンクエスト大辞典のデータを参照する。 対象とする読者 これからSQLを学ぶ初心者や、データベース(SQL)で詰まっている初心者。 SQLとは SQL(Structured Query Language)は、リレーショナルデータベース管理システム(RDBMS)でデータを操作・管理するための標準的な言語だ。SQLではデータの取得、挿入、更新、削除などの操作を行うためのコマンドが提供されている。SQLはデータベースの基礎となる言語であり、エンジニアだけでなく、データアナリストや科学者にも利用されている。 SQLは大きく分けて次のようなコマンドから成り立っている。 命令 説明 文法
はじめに 今回の記事では、PythonでWeb開発を進める際に使われるWebフレームワークである「FastAPI」と「Flask」について、両者それぞれの特徴と強みを具体的なソースコードを用いて解説する。 この記事の対象とする読者 これからPythonでWeb開発を進めることを検討している人 APIを開発したいものの、どのような技術を使うべきが迷っている人 FlaskとFastAPI両方とも、あるいはどちらか一方に興味を持っている人 社内あるいは個人開発の技術選定で、FastAPIあるいはFlaskの導入を検討している人 Flaskとは FlaskはPythonで開発された軽量のWSGI(Web Server Gateway Interface)製のWebフレームワークである。 Flaskの説明に入る前に、WSGIについて簡潔に説明させてほしい。WSGIを完結に説明すると、Pythonにお
はじめに 今回の記事では、FastAPIでREST APIを開発する手順を簡潔に解説する。 本記事の対象読者 Pythonの基本文法(データ型、条件分岐、繰り返し)を理解している人 RailsやLaravel等のWebフレームワークで簡単なWebアプリケーションを開発できる人 FastAPIで簡潔にREST APIを開発したい人 用語解説 FastAPI FastAPIの公式ドキュメントによると、以下のように説明されている。 FastAPI is a modern, fast (high-performance), web framework for building APIs with Python 3.7+ based on standard Python type hints. 簡潔に言えば、FastAPIはPythonでAPIを開発するために開発されたWebフレームワークである。P
はじめに 今回の記事では、PythonやRuby等の他の技術には触れているものの、Kubernetesについては初心者であるプログラマーを対象に、Kubernetesを徹底解説する。 Kubernetesとは Kubernetes(通称「k8s」)とは、コンテナ化したアプリケーションのデプロイ、スケーリングや管理を行うためのオープンソースのプラットフォームである。Dockerと同様にGo言語で開発されており、2023年現在において、Dockerと双璧をなすコンテナ技術として利用されている。 Kubernetesが開発された経緯 Kubernetesは、コンテナ化されたアプリケーションを大規模にデプロイし管理するという課題に対処するために開発された。Kubernetesが開発される以前は、コンテナを大規模にデプロイし管理することは、複雑で手動のプロセスであり、多くの労力と専門知識が必要だった
はじめに 今回の記事では、TypeScriptの中でも特に理解に苦しむ文法であるジェネリックスを徹底解説する。今回の記事が、TypeScriptにおけるジェネリックスへの理解を深めるきっかけになれば非常に幸いだ。 ジェネリックス(Generics)とは TypeScriptにおけるジェネリックス(Generics)とは、型の安全性とコードの共通化を両立させるために導入された言語の仕様である。これを用いることで、型の安全性とコードの共通化を両立できるのだ。 解説 ジェネリックスが具体的にどのように使われているのかを見ていこう。以下のプログラムで説明する。 function sampleLottery(v1: string, v2: string): string { return Math.random() <= 0.5 ? v1 : v2 }
はじめに プログラミングにおいてエラーメッセージは避けて通れない。熟練したプログラマーになるためには、自分自身でエラーメッセージを読んで解決しなければならない。どのようなエラーメッセージが出たときは何が原因で、どのように対応すれば解決できるのか、その知識や経験の積み重ねこそがプログラミングのスキルを向上させる。 ところが、プログラミング初心者にとってエラーメッセージはただの文字の羅列や意味不明な暗号のように感じられることがほとんどだろう。そこで、今回の記事ではエラーメッセージの読み方について徹底解説する。 理解しておくべき原則 まず、最も理解しておくべき原則はエラーメッセージは意味不明な暗号ではないということだ。実は、エラーメッセージは簡単な英語で書かれていて、決まった英単語や決まった形の文を使いまわしている。それらを覚えたら、知らないエラーメッセージに遭遇したとしてもなんとか解釈できる。
はじめに 今回の記事では、私の独断と偏見で、プログラミング未経験者と初心者を対象に、最低限やるべきことを10個紹介する。あくまで一個人の見解にすぎないので、参考程度に。 1. 勉強する技術分野を決めること プログラミングは学ぶべき技術分野は多岐に渡る。Web開発に分野を絞っても、学習するべき知識には以下のようなものがある。 HTML/CSS、JavaScript等のフロントエンド RailsやDjango等のバックエンド MySQLやMongoDB等のデータベース関連の知識 Linux、ApacheやNginx等のサーバ構築に関する知識 ソフトウェアテストやGit等のバージョン管理等のツールや手法の知識 時間は限られているので、すべての技術を学習することは不可能である。そこで、自分が学習する技術分野を絞ることはプログラミングを学習する上では最も大事になる。 2. 成果物(技術記事、ドキュメ
はじめに 今回の記事では、学習や実務でGraphQLを活用する人を対象に、GraphQLの全体像を把握するためのチュートリアル記事になる。本記事の対象読者は以下の通りである。 GraphQLの全体像を把握したい人 公式ドキュメントの理解で苦しんでいる人 GraphQLとは GraphQLはWeb APIを開発するためのクエリ言語である。REST APIの問題を解決するために、Facebook(Meta)によって開発された。Web APIの開発において、REST APIと比較して柔軟かつ効率的なアプローチを提供できる。さらに、GraphQLではクライアントが必要なデータの構造を定義することができ、サーバから定義したものと同じ構造のデータが返される。 詳細は後述するが、GraphQL最大の特徴は必要以上に大きなデータが返されることを防ぐことにある。これによって、GraphQLは必要最低限のリク
【初心者必見】【君はいくつ知っている?】Web開発の生産性を100倍アップしてくれるChrome拡張機能 16選 はじめに 今回の記事では、特にプログラミング初心者向けにWeb開発で重宝するChrome拡張機能を16も紹介する。今回の記事で、1つでも興味のあるChrome拡張機能を見つけることができれば幸いだ。 Chrome Remote Desktop Chromeを経由して画面共有ができる。スマホやタブレット、別のパソコンを使って離れた場所から自分のパソコンに安全かつ簡単にアクセスできる。画面を共有してリアルタイムで共同作業もできる。 ChromeをWeb開発でフル活用している人は導入して損はない。 DeepL Translate DeepLのWebアプリやデスクトップアプリを開かずに、直接ドラッグした文章を翻訳できる。公式ドキュメントを翻訳するうえで重宝する。別のブラウザを開かずに文
はじめに 少しプログラミングを理解した初心者が、さらにスキルを高めるために公式ドキュメントを読むことがよくあるだろう。公式ドキュメントには、日本語の記事には書かれていないような詳細な説明や、APIの使い方、リリースノート等実装するのに必須な情報がたくさんある。 公式ドキュメントはOSS(オープンソースソフトウェア)において、ソースコードと双璧をなす最も信頼できる資料の1つである。ソースコードが公開されていない場合、公式ドキュメントが最も信頼できる資料になるだろう。 公式ドキュメントが必要な理由 結論、プログラマーが開発を進める際には公式ドキュメントを優先して確認するべきである。主な理由は以下の通り。 信頼性:公式ドキュメントには必ず正しいことが書かれている。うまく動かないプログラムがあっても公式ドキュメントを調べたら必ず正解にたどり着ける。 情報の網羅性:公式ドキュメントには必ず全ての情報
はじめに 今回の記事では、モバイルアプリ開発として有名なフレームワークである「Flutter」と「React Native」両方の特徴、決定的な違いを徹底解説する。 2022年11月現在では、モバイルアプリ開発としてFlutterが屈指の人気を誇っている。ところが、実はモバイルアプリを開発できるフレームワークはFlutter一択ではない。Flutter以外にモバイルアプリを開発できるフレームワークとしては、Meta(旧Facebook社)が開発したReact Nativeが挙げられる。 両者はどう違うのか。なぜ開発で使われているのか―そこで、今回の記事では特徴や課題点を徹底解説する。 本記事の対象読者 モバイルアプリ開発で生計を立てているプログラマー Flutter、React Native両者の特徴を知りたい人 モバイルアプリ開発案件を検討中で技術選定をされている人 本記事のタイトルが気
次のページ
このページを最初にブックマークしてみませんか?
『Shota Nukumizuさんの記事一覧』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く