プログラミングにおいてAIが得意なことと不得意なこと - ここ数年で、ChatGPTをはじめとしたAIが プログラミングの現場に一気に入り込んできました。 「もうエンジニアいらないのでは？」 「AIに全部書かせればいいじゃん」 そんな声も聞こえてきますが、 実際に使ってみる...
未経験から独学でwebエンジニアになったTammです。 未経験の方やこれからwebエンジニアを目指す方の参考になるような内容を発信しています。
制作実績等はホームページに載せてありますので、こちらからご覧ください。 https://tammpro.site/
プログラミングにおいてAIが得意なことと不得意なこと - ここ数年で、ChatGPTをはじめとしたAIが プログラミングの現場に一気に入り込んできました。 「もうエンジニアいらないのでは？」 「AIに全部書かせればいいじゃん」 そんな声も聞こえてきますが、 実際に使ってみる...
2026年に流行りそうなプログラミング言語 - IT業界は流行の移り変わりが早いですが、 2026年に向けて「確実に存在感を増しそうな言語」には、いくつか共通点があります。 AI・データ活用に強い Web・アプリ開発の生産性が高い 実務での採用が増えている 学習コストに対し...
2025年のIT業界まとめ - 〜AIが「特別な存在」じゃなくなった1年〜 2025年のIT業界を一言で表すなら、 **「AIが“流行”から“前提”になった年」**でした。 数年前までは 「AIすごい」「ChatGPT使ってみた？」 という段階だったのが、2025年は完全に...
Reactの「レンダリング」とは何か？ - Reactを学んでいると、必ず出てくる言葉が**「レンダリング」**です。 でも、 何をもって「レンダリングされた」と言うのか いつレンダリングが起きているのか ここが曖昧なまま進んでしまう人も多いです。 この記事では、React...
パソコンの「GB（ギガバイト）」とは？ - パソコンを選ぶときによく目にする 「256GB」「512GB」「1TB」 といった表記。 この GB（ギガバイト） は、パソコンにどれだけデータを保存できるかを表す単位です。 スマホでいう「容量」と同じ意味だと思ってOKです。 G...
2026年、エンジニアに必要な力とは - 「エンジニアに必要な力」は、年々少しずつ変わっています。 2026年に向けて特に強く求められるのは、技術力そのものよりも“技術をどう使うか”という力です。 かつては「この言語が書ける」「このフレームワークを知っている」ことが強みにな...
スマホやパソコンのストレージとは - スマホやパソコンを使っていると、 「ストレージがいっぱいです」 「空き容量が不足しています」 といった表示を見たことがある人は多いと思います。 このときに出てくるストレージとは、一体何なのでしょうか。 ストレージとは何か ストレージとは...
実務で必要なReactの力 - Reactを勉強していると、 「useStateは分かった」「コンポーネントも書ける」 ここまでは比較的すぐに到達します。 でも、実務でReactを使うとなると、必要になる力は少し変わってきます。 この記事では「現場で本当に求められるReac...
コードレビューの時にエンジニアが見ていること - コードレビューというと、「細かい指摘をされる場」「ダメ出しされる時間」というイメージを持つ人も多いかもしれません。 ですが実際の現場では、レビューはバグ探しやマウントの場ではなく、チーム全体で品質を上げるための作業です。 で...
Resendでできること - Webサービスやアプリを作っていると、 「ユーザーにメールを送りたい」という場面は必ず出てきます。 例えば、 会員登録後の確認メール 予約完了のお知らせ パスワード再設定メール お問い合わせへの自動返信 こういったアプリから送るメールを、 シン...
Vite（ヴィート）とは？ - Vite（ヴィート）とは、Webアプリ開発をとても高速かつ快適にしてくれる開発ツールです。 主に React・Vue・Svelte などのモダンなフロントエンド開発で使われています。 一言でいうと、 「開発中の表示がめちゃくちゃ速い環境を用意...
アンリアルエンジンとは - アンリアルエンジン（Unreal Engine）は、ゲームや映像、3Dコンテンツを制作するための開発エンジンです。 もともとはゲーム制作のために作られましたが、現在では映画・アニメ・建築・自動車・VR/ARなど、さまざまな分野で使われています。 ...
プログラミングにおける「車輪の再発明」とは？ - プログラミングの世界でよく使われる言葉に 「車輪の再発明（Reinventing the Wheel）」という表現があります。 これは、 すでに世の中に完成度の高い仕組み・ライブラリ・ツールが存在しているのに、 それを使わず...
505ページの意味とは？ - Webサイトを見ていると、まれに 「505 Error」 や 「HTTP 505」 と書かれたページに出会うことがあります。 「これって何が起きてるの？」 「自分の操作が悪かったの？」 この記事では、505ページ（505エラー）の意味を、Web...
ハッカソンとは - 「ハッカソン」という言葉を聞いたことはありますか？ 最近では、学生向けイベントや企業研修、子ども向けのプログラミング体験会などでも使われるようになってきました。 この記事では、ハッカソンとは何か、どんなことをするのか、参加すると何が得られるのかを、初心者...
max-widthとwidthの違いとは？ - Web制作をしていると、必ずと言っていいほど出てくる width と max-width。 どちらも「横幅」を指定するプロパティですが、 実は使いどころと役割がまったく違います。 この記事では、 「結局どう違うの？」「どっちを...
正規表現とは？ - 正規表現（せいきひょうげん）とは、文字列のパターンを表現するための書き方のことです。 簡単に言うと、 「このルールに当てはまる文字だけを探す・チェックする」 ための仕組みです。 プログラミングだけでなく、フォームの入力チェックや検索、データ整理など、さま...
ReactからNext.jsに入る最適なタイミングとは - Reactを学習していると、必ず一度はこんな疑問が出てきます。 「Next.jsっていつから触ればいいんだろう？」 「Reactをもっと極めてからの方がいい？」 「今Next.jsに行くのは早すぎる？」 結論から言...
ホワイトハッカーとは？ - ホワイトハッカーとは、不正や犯罪目的ではなく、正当な目的でシステムの弱点（脆弱性）を見つけ、改善に役立てる技術者のことです。 一言でいうと、 「守るために攻めるエンジニア」 です。 企業や個人が使っているWebサイトやシステムは、常にサイバー攻撃...
脆弱性とは - 脆弱性（ぜいじゃくせい）とは、**システムやソフトウェアに存在する「弱点」や「欠陥」**のことを指します。 この弱点を悪意のある第三者に突かれると、不正アクセスや情報漏えい、システム停止などの被害につながる可能性があります。 簡単に言うと、 **「本来守られ...
バリデーションチェックとは？ - バリデーションチェックとは、入力されたデータが正しいかどうかを確認する処理のことです。 主に、フォームやアプリ、システムなどで使われています。 たとえば、 メールアドレスの形式が正しいか 必須項目が空欄になっていないか 数字しか入れてはいけ...
shadcn/uiとは - shadcn/ui（シャドシーエヌ・ユーアイ）とは、React（主にNext.js）向けのUIコンポーネント集です。 ただし、一般的なUIライブラリとは少し考え方が違います。 最大の特徴は、 「コンポーネントをnpmで入れるのではなく、コードを自...
Laravelはどのような時に使われるのか - Laravel は、PHP で作られた代表的な Web アプリケーションフレームワークです。開発効率が高く、きれいなコード構造を保ちやすいことから、世界中の多くのサービスで利用されています。では、実際にどのような場面で Lar...
Next.jsの学習コストについて - React を触り始めた頃、多くの人が最初につまずくのが 「Next.jsって何？Reactと何が違うの？そして勉強するの大変？」 という部分だと思います。 この記事では、Next.js の学習コストを“正直に”かつ“現実的に”解説し...
Reactで作れるアプリ一覧 - Reactは、Webアプリケーション開発で最も人気のあるフレームワークのひとつです。 コンポーネントという仕組みを使って、UI（画面）を部品のように組み立てられるため、規模の小さなアプリから大規模サービスまで幅広く開発できます。 この記事で...
プロンプトとは？ - AI を使うときによく耳にする「プロンプト」。 これは簡単にいえば “AI に出す指示文” のことです。 ChatGPT や画像生成 AI を使うとき、私たちは文章でお願いごとや質問を書きますよね。この文章そのものがプロンプトです。 たとえば、 「可愛...
AIの正しい使い方とは - 近ごろは、仕事でも日常生活でもAIを使う場面がどんどん増えています。 ただ、「どう使うのが正しいの？」「どこまで頼っていいの？」と迷う人も多いと思います。 この記事では、AIを安全かつ効果的に活用するための“正しい使い方”をわかりやすくまとめます...
新しいホームページがGoogleの検索に反映されない理由と対策
新しいホームページがGoogleの検索に反映されない理由と対策 - 新しくホームページを公開したのに、Google検索で全然出てこない…。 こうしたお悩みは非常によくあります。実は、検索に反映されない理由はいくつかあり、それぞれに適切な対策があります。この記事では、主な原因...
YouTubeの仕組みをざっくり解説！ - —— なぜおすすめに出てくるの？再生数はどう決まるの？** YouTubeは毎日なんとなく触れているサービスですが、「どうやって動いているのか」を説明しようとすると意外と難しいものです。 今回は、専門用語はできるだけ抜きにして、ざ...
子どもたちに人気の「Scratch」とは？ - プログラミングを“遊び感覚”で学べる神ツール 近年、子ども向けプログラミング教材として圧倒的な人気を誇る「Scratch（スクラッチ）」。 学校の授業でも採用されていて、「うちの子も家でやってる！」という声も本当に多いです。 ...
バニラHTML・バニラJavaScriptの「バニラ」って何？
バニラHTML・バニラJavaScriptの「バニラ」って何？ - Web制作やプログラミングの話をしていると、 「バニラJavascriptで書く」 「これはバニラHTMLだけでいけます」 …こんな言い方を見かけることがありますよね。 この“バニラ（vanilla）”って...
CSSの「inset: 0;」の意味とは？ - CSSを書いていると、ときどき見かける inset: 0;。 一見シンプルなのに、「何をしているのか分かりづらい…」という声がよくあります。 この記事では、inset の役割と、inset: 0; が実際にどんな効果を持つのか...
Chakra UIとは - React向けのモダンなUIコンポーネントライブラリ。 一言でいうと、「デザインが苦手でも“それっぽい綺麗なUI”がすぐ作れる便利セット」。 1. Chakra UIが生まれた理由 ReactでUIを組むとき、ボタン・入力フォーム・モーダル…など...
ReactでCSSを当てる方法 - React で開発をしていると、必ず「スタイルをどう管理するか」という問題にぶつかります。HTML＋CSS の世界とは違い、React には複数の書き方があり、それぞれメリット・デメリットがあります。この記事では、現場でもよく使われる主要...
Nuxt.jsとは - Nuxt.js（ナックス） は、Vue.js を使った開発をもっと快適にするためのフレームワークです。 Vue単体では自分で設定しないといけない「ルーティング」「SEO対策」「表示最適化」などを、Nuxtが最初から全部まとめて用意してくれるのが特徴で...
Node.jsとは - Node.js（ノードジェイエス）は、Javascript をサーバーサイドでも動かせるようにした実行環境です。 もともと Javascript はブラウザの中でしか動きませんでしたが、Node.js の登場によって「Webサーバーを作る」「APIを...
要件定義とは？ - Webサイト制作、アプリ開発、業務システム構築──。 どんなプロジェクトにも必ず存在するのが 「要件定義」 という工程です。 名前だけは聞いたことがあっても、 「実際に何をするの？」 「仕様書を作ること？」 といったイメージのまま進むケースも少なくありま...
ユーザインタフェースのサウンドエフェクトをオフにするとどうなる？
ユーザインタフェースのサウンドエフェクトをオフにするとどうなる？ - Macを使っていると、何気ない操作のたびに「カチッ」「ポンッ」といった小さな音が鳴ります。 普段は気にならなくても、静かな場所で作業していると「この音、全部消せないのかな…？」と思うこと、ありますよね。 ...
SEO対策としてHTMLに書くべき内容 - ホームページのSEO対策というと、キーワード選定や被リンクの話が多くなりがちですが、まずは HTMLの中身そのものを最適化すること が非常に大切です。どれだけ内容が良くても、検索エンジンに正しく伝わっていなければ評価されません。 ...
Next.jsとは - モダンなWeb開発を一気に加速させるReactフレームワーク Next.js（ネクストジェイエス）は、Reactをもっと使いやすく、もっと高速に、もっと“実務向け”に進化させたフレームワークです。 Reactそのままでもサイトは作れますが、実際の開発...
Web制作者の「AIとの向き合い方」 - 近年、生成AIの進化は“便利な新ツール”の域を超え、Web制作の現場そのものを大きく揺さぶり始めています。 コード生成、デザイン案の提案、文章のリライト、画像生成、サイト構成まで—AIは制作フローの至るところに入り込み、これまで人が...
ホスティングサービスとは - ホームページやWebアプリを公開するときに欠かせないのがホスティングサービスです。名前は聞いたことがあっても、「結局どんな仕組み？」「レンタルサーバーと何が違うの？」と感じる人も多いはず。この記事では、Web制作初心者でもサクッと理解できるよう...
Reactを使うと受けられる恩恵とは - Web開発の世界では多くのフレームワークやライブラリが存在しますが、その中でも長く支持され続けているのが React。Facebook（現Meta）が開発し、世界中のプロダクトで使われていることから、信頼性の高い技術として定着してい...
Next.jsでできること - Next.js（ネクストジェイエス）は、Reactベースで動くフレームワークで、モダンなWebサイトやサービスの開発でよく使われています。 「効率よく作れる」「高速」「SEOに強い」など、今のWeb制作に必要な要素をまとめてサポートしてくれる...
AWSで何ができるのか？ - AWS（Amazon Web Services）は、世界中で使われているクラウドサービスの代表格です。簡単に言うと、インターネットを通じてサーバーやデータベースなどを自由に使えるサービスです。普段、企業が自前でサーバーを買ったり管理したりする手...
インフラエンジニアとは？ - インフラエンジニアとは、ITシステムを支える「土台」をつくり、安定して動くように管理するエンジニアのことです。 Webサイト、アプリ、オンラインサービスなど、私たちが普段使っているものは、すべて何かしらのインフラの上で動いています。 その“縁の...
プラットフォームアプリケーションとは？ - 「プラットフォームアプリケーション」という言葉は、IT やビジネスの文脈でよく耳にするものの、明確に説明できる人は意外と多くありません。この記事では、なるべく専門用語を使わず、誰でも理解できるようにわかりやすくまとめていきます。 ...
loading="lazy" の正しい使い方 - Webサイトの読み込み速度を改善したい時に、もっとも簡単で効果が高い施策のひとつが 画像の遅延読み込み（Lazy Load） です。HTMLの画像タグに loading="lazy" を付けるだけで、多くの画像を一度に読み込...
WordPressのメリット・デメリットについて - 近年、多くの企業や個人がWebサイトやブログを作る際に利用しているのが WordPress（ワードプレス） です。世界中のサイトの約4割がWordPressで作られていると言われるほど普及しており、日本でも最も定番のCM...
今流行りの「Codex」とは？わかりやすく解説 - 近年、AI 技術の進化は目覚ましく、その中でも特に注目を集めているのが「Codex（コーデックス）」という技術です。名前は聞いたことがあるけれど、「結局何なの？」と感じている方も多いのではないでしょうか。この記事では、難し...
Google Chrome の「Lighthouse（ライトハウス）」について
Google Chrome の「Lighthouse（ライトハウス）」について - 1. Lighthouse（ライトハウス）とは？ Lighthouse（ライトハウス）は、Google Chrome に標準で入っている「ウェブサイト診断ツール」です。 自分のサイトや作成中...
ヘッドレスCMSとは？ - 近年、Webサイトやアプリの開発でよく耳にするようになった「ヘッドレスCMS（ヘッドレス・コンテンツ・マネジメント・システム）」という言葉。 従来のCMS（コンテンツ管理システム）と何が違うのか、どんなメリットがあるのかをわかりやすく解説します。...
タイポグラフィとは - タイポグラフィ（Typography）とは、文字のデザインや配置、組み方を工夫して、視覚的に美しく、読みやすく、そして印象的に伝えるための技術や考え方のことです。 単に「フォントを選ぶ」だけではなく、文字サイズ・行間・字間・レイアウト・バランスなど、...
SSL化が必須な理由について - 近年、ホームページやLP（ランディングページ）を制作する際に「SSL化を必ず設定してください」と言われることが増えました。 SSL化とは、サイトの通信を暗号化し、ユーザーの情報を安全にやり取りできるようにする仕組みのことです。 では、なぜ今...
HTMLでよく聞く「エメット（Emmet）」とは？ - Web制作の現場で頻出する「エメット」という言葉。これはプラグイン名でもあり、HTML/CSSの入力を“短い省略記法”から一気に展開してくれる省力化ツール群／記法の総称です。ここでは、コードや表を使わずに、概念・メリッ...
web制作に関する情報のキャッチアップ方法 - はじめに フロントの世界は「昨日のベストプラクティスが今日の負債」になりがち。大事なのは“全部追う”ではなく“迷いなく取捨選択して継続する”ことです。この記事では、最小コストで最大の把握感を得るための情報源と運用ルーティンを、...
h1タグの正しい使い方：SEOとアクセシビリティを両立する実践ガイド
h1タグの正しい使い方：SEOとアクセシビリティを両立する実践ガイド - 1) h1は「そのページの主役タイトル」 役割：ページ全体の主題をひと言で表す見出し。 対象：そのページの内容“全体”を要約する文。記事なら記事タイトル、LPならオファーや価値提案、サービスページなら...
ECサイトとは？初心者にもわかりやすく解説 - 私たちが日常的に使っている「Amazon」や「楽天市場」などのサイト。 これらはすべて「ECサイト」と呼ばれるものです。 では、そもそもECサイトとは何の略で、どんな種類があるのでしょうか？ ECサイトの意味 ECサイトとは、...
Webサイト制作でよく聞く「グリッド」とは？ - Webデザインの世界でよく耳にする「グリッド」という言葉。 なんとなく「整列するための仕組み」と思っている方も多いかもしれませんが、実はデザインの見やすさ・使いやすさ・統一感を生み出す上で欠かせない重要な考え方です。 この記...
LPはパソコンサイズも作った方がいい？ - 結論から言うと、LP（ランディングページ）はスマホサイズだけでなく、パソコンサイズも作った方がいいです。理由はいくつかありますが、「ユーザー層」「表示の最適化」「信頼性」という3つの観点で見ていくと分かりやすいです。 1. ユーザ...
C#のstaticとは何か？ - C#を学んでいると、メソッドや変数の前に「static」というキーワードを見かけることがあります。 最初はおまじないのように付けていたかもしれませんが、実はこの「static」には大きな意味があります。 ■ staticとは「静的」を意味す...
カラーピッカーという拡張機能について - デザインやWeb制作をしていると、気になる色を「この色コード何だろう？」と思うことがよくあります。そんなときに便利なのが「カラーピッカー」という拡張機能です。この記事では、カラーピッカーの基本的な使い方や、デザイン作業を効率化する活...
IllustratorとPhotoshopの違い - デザインの世界では欠かせない存在である「Adobe Illustrator」と「Adobe Photoshop」。どちらもプロの現場で広く使われていますが、実は用途や得意分野が大きく異なります。ここでは、それぞれの特徴と...
undefinedとnullの違い - Javascriptを学び始めると、必ず出てくるのが「undefined」と「null」という2つの特殊な値です。どちらも「値が存在しない」ことを表しますが、意味や使われ方には明確な違いがあります。 1. undefinedとは **...
コーポレートサイトとは？企業の「顔」となるホームページ - コーポレートサイトとは、企業や団体が運営する公式のホームページのことです。 会社の理念・事業内容・採用情報・お問い合わせ窓口などを掲載し、企業の信頼性を示す「顔」のような存在になります。 多くの人が「この会社はどん...
AIに奪われそうな仕事とは - 近年、AI（人工知能）の発展は驚くほどのスピードで進んでいます。 ChatGPTをはじめとする生成AIや自動化ツールが登場したことで、これまで「人間にしかできない」と思われていた仕事の一部も、機械がこなせるようになってきました。 では、実際に...
WordPressのサイトを新しいサーバーやドメインに移行する機会は少なくありません。 制作会社の変更やリニューアル、ドメイン変更など、理由はさまざまですが、手順を誤ると「ページが表示されない」「画像が消えた」「ログインできない」などのトラブルが起こることも。 ここでは、W...
ウェブサイトの制作や管理をしていると、「FTP接続」という言葉を耳にすることがあります。 これは、自分のパソコンとサーバーをつなげてファイルを送受信する仕組みのことです。 ホームページのデータをサーバーにアップロードしたり、修正のためにファイルをダウンロードしたりする際に使...
Ruby（ルビー）は、日本人のまつもとゆきひろ氏（通称：Matz）が1995年に開発したプログラミング言語です。 「プログラマーが幸せになるための言語」をコンセプトに作られたRubyは、読みやすく、書きやすく、直感的に扱えることが大きな特徴です。 Rubyの特徴 Rubyの...
「フォームから来たメールを別のアドレスにも自動で届くようにしたい」——制作現場でも運用でも超よくあるニーズです。 本記事では、ミスの少ない“正攻法”から、状況別の代替案、迷子になりやすい注意点まで、そのまま運用に使える実務目線でまとめました。コードや表は使いません。 結論：...
ホームページやランディングページを作るときに、意外と見落とされがちなのが「ディスクリプション（description）」の設定です。これは検索結果でタイトルの下に表示される説明文のことで、ユーザーがクリックするかどうかを左右する大切な要素です。 ディスクリプションとは？ デ...
「保険の見積もり」「リフォーム費用」「ローン返済額」など、ユーザーが入力した数値や条件から自動で結果を算出してくれる**シュミレーター（シミュレーションツール）**は、LPや企業サイトで非常に人気の高いコンテンツです。 この記事では、そんなシュミレーターを構築する際に必要な...
WordPressはプラグインを入れることで、機能を自由に拡張できるのが大きな魅力です。 しかし、むやみにプラグインを追加すると不具合やセキュリティリスクにつながることもあります。 ここでは、プラグインを導入する前に気をつけておきたいポイントをわかりやすくまとめました。 1...
ホームページを新しく作り直すとき、「デザインを変える」「CMSを変える」など見た目や仕組みばかりに目が行きがちですが、実は“移行作業”の段階こそ注意が必要です。ここを雑に進めると、アクセスが激減したり、メールが届かなくなったりと、後から大きな問題につながることもあります。 ...
Web制作やアプリ開発の現場でよく耳にする「コンポーネント化」。 これは、デザインやコードをパーツ（部品）ごとに分けて管理・再利用できるようにする考え方のことです。 たとえば、LP（ランディングページ）を作るとき、 ヘッダー・フッター・CTAボタン・カードデザインなどがペー...
バナーの基本 「バナー」とは、ウェブサイトやSNSなどで使われる画像広告やリンク付きの視覚的な要素のことです。 クリックすると特定のページ（例：商品ページ、キャンペーンページ、LINE登録フォームなど）へ誘導できる仕組みになっています。 つまり、**「目立つ入口」や「案内板...
ホームページをiPhoneから更新する場合、何で作成したらいいか
パソコンがなくても、iPhoneだけでホームページを更新したいという人は多いと思います。最近はスマホだけでできるツールも増えており、更新の目的（文章更新・画像差し替え・デザイン修正など）によって選ぶ方法が少し変わります。ここでは目的別にわかりやすく解説します。 1. 【文章...
Astroでは、HTML・コンポーネント・スタイルをシンプルにまとめられる反面、 構成を工夫しないとプロジェクトが大きくなるほど管理が難しくなります。 ここでは、効率的にCSSを記述・運用するための考え方を整理します。 1. ページ単位よりも「コンポーネント単位」で考える ...
1つのサーバーやドメインで、複数のサイトやランディングページ（LP）を公開したい場合に便利なのが「サブディレクトリ公開」です。この記事では、初心者でも理解しやすいように、サブディレクトリでWebサイトを公開する基本的な考え方と手順をまとめます。 サブディレクトリとは？ 「サ...
WordPressサイトにInstagramの投稿を埋め込みたい場合、大きく分けて 「公式連携を使う方法」 と 「プラグインを使う方法」 の2通りがあります。 それぞれにメリット・デメリットがあり、サイトの目的に合わせて選ぶのがポイントです。 ① 公式のInstagram埋...
LPを「モバイル版だけの見た目」で作成するときのpx設計ガイド
スマホ中心でランディングページ（LP）を作るとき、最初に迷いやすいのが「何pxでデザインすればいいの？」という問題。結論から言うと、基準幅は 375px を起点にしつつ、360 / 390 / 414px の許容差を頭に入れておくのが実務的に最も事故が少ないです。ここでは、...
ホームページを修正するとき、「GitHubを使うべき？」という疑問を持つ人は多いと思います。結論から言うと、チームで開発しているか、長期的に運用するかによって答えが変わります。 GitHubを使うメリット GitHubを使う最大の利点は、「変更履歴をすべて記録できること」で...
「.eps」という拡張子は「Encapsulated Postscript（エンキャプスレイテッド・ポストスクリプト）」の略で、主に印刷やデザインの現場で使われる画像ファイル形式のひとつです。EPSファイルは、写真のような点の集合でできているビットマップ画像とは違い、線や図...
WordPressサイトの保守運用担当者として「毎日チェックすべき項目」は、トラブル防止・セキュリティ強化・パフォーマンス維持の3つの観点から整理できます。 以下のリストを毎朝の点検ルーチンとして使うのが理想です。 毎日チェックすべき項目 ① サイト表示・動作チェック トッ...
（ノンブレークスペース）を使って良い時とダメな時
（ノンブレークスペース）を使って良い時とダメな時 文章やWebサイトを作っていると、スペースを入れたい場面で「 」という記号を見かけることがあります。これは ノンブレークスペース（non-breaking space） と呼ばれ、見た目は普通の空白と同じですが、「改行されな...
レスポンシブデザインとは、スマホ・タブレット・PCなど、画面サイズの異なるデバイスでも快適に閲覧できるようにレイアウトを自動で調整する仕組みのことです。 その際に基準となるのが「ブレークポイント」と呼ばれるpx（ピクセル）単位の区切りです。 一般的には、デバイスの画面幅によ...
AWS（Amazon Web Services）は、Amazonが提供するクラウドサービスの総称です。ざっくり言うと、「インターネット上で使えるITインフラのレンタルサービス」です。実際のサーバーやストレージを自分で用意しなくても、AWS上でほとんどのシステムを構築できます...
プログラミングを学んでいると、if (true) という書き方を見かけることがあります。普段の if 文は「ある条件が成り立つときだけ実行する」という使い方ですが、if (true) は一体どんな意味を持つのでしょうか？ if 文の基本 if 文は「もし〜なら」という条件分...
Webサイトのフォームに入力があった際、その内容を元にユーザーへ自動返信メールを送る仕組みは、多くの場面で利用されています。例えば「お問い合わせありがとうございます」「資料請求を受け付けました」といったメールがすぐ届くのは、この仕組みのおかげです。 自動返信の基本は「フォー...
プログラミングでよく出てくる arg は argument（アーギュメント） の略 です。 英語の「argument」は「議論」だけでなく**引数（関数に渡す値）**という意味があります。 読み方のポイント arg → アーグ と短く読む人もいます。 ただし本来の英語は a...
APIの基本的な意味 APIとは Application Programming Interface（アプリケーション・プログラミング・インターフェース） の略です。 一言でいうと、ソフトウェア同士がやり取りするための「窓口」や「約束事」 のことを指します。 例えばスマート...
MUI（Material UI）とは——Reactで“整ったUI”を最短距離で届けるためのデザインシステム
MUI（旧Material-UI）は、GoogleのMaterial Design思想をベースにしたReact向けUIライブラリ群です。ボタンやフォーム、ダイアログといった基礎パーツから、データグリッドなどの高度なコンポーネントまで幅広く提供し、デザインの一貫性と開発スピー...
作業効率を爆上げする拡張機能 1. GoFullPage ワンクリックでウェブページ全体のスクリーンショットが撮れる拡張機能です。通常、複数回に分けてスクショを撮る必要があるページでも、これを使えば一発で完了します。資料作成や情報共有の際に非常に便利です。 2. Momen...
アプリ開発のプロジェクトを成功させるためには、開発に着手する前の段階で「何を作るのか」を明確にする必要があります。 その中心となる工程が 要件定義 です。 要件定義は、アプリの目的や機能、使う人、利用環境、スケジュールなどを整理し、関係者全員が同じゴールを共有するための設計...
React Developer Tools（リアクト・デベロッパー・ツールズ）は、React で構築されたウェブアプリケーションを効率的に開発・調査・デバッグするための公式ブラウザ拡張機能です。Google Chrome や Microsoft Edge、Firefox な...
Webサービスや業務アプリ、スマートフォンアプリなど、さまざまなシステム開発には多くのプログラミング言語が使われています。どの言語を選ぶかは「何を作るか」「チーム体制」「将来の拡張性」などによって変わります。ここでは、システム開発に向いている代表的な言語と、その特徴をまとめ...
Testing Library は、JavascriptやReactなどのフロントエンド開発で使われる「UIテスト用ライブラリ」の総称です。 React Testing Library など、特定のフレームワーク向けのパッケージも用意されていますが、共通して 「ユーザー視点...
ホームページ制作というと、WordPressや静的HTMLが定番ですが、近年はReactを使って作るケースも増えています。ここでは「Reactでホームページを作るのはありか？」という視点から、その特徴や向いているケースを整理してみます。 Reactでホームページを作るメリッ...
WordPressのサイトをGitHubで公開できるのか――これは多くの人が一度は疑問に思うテーマです。結論から言うと、WordPressをそのままGitHubで運用することは基本的に難しいです。ただし、サイトの構成や目的によっては一部をGitHubで活用する方法があります...
Webサイト制作の現場では、近年 Astro と React が大きな注目を集めています。どちらもモダンな開発体験を提供しますが、目的や得意分野が異なるため、選択によって制作フローや完成後のパフォーマンスに大きな違いが生まれます。ここでは、両者の特性とメリットを整理します。...
指定した記事をブログ村の中で非表示にしたり、削除したりできます。非表示の場合は、再度表示に戻せます。
画像が取得されていないときは、ブログ側にOGP(メタタグ)の設置が必要になる場合があります。
プログラミングにおいてAIが得意なことと不得意なこと - ここ数年で、ChatGPTをはじめとしたAIが プログラミングの現場に一気に入り込んできました。 「もうエンジニアいらないのでは？」 「AIに全部書かせればいいじゃん」 そんな声も聞こえてきますが、 実際に使ってみる...
2026年に流行りそうなプログラミング言語 - IT業界は流行の移り変わりが早いですが、 2026年に向けて「確実に存在感を増しそうな言語」には、いくつか共通点があります。 AI・データ活用に強い Web・アプリ開発の生産性が高い 実務での採用が増えている 学習コストに対し...
2025年のIT業界まとめ - 〜AIが「特別な存在」じゃなくなった1年〜 2025年のIT業界を一言で表すなら、 **「AIが“流行”から“前提”になった年」**でした。 数年前までは 「AIすごい」「ChatGPT使ってみた？」 という段階だったのが、2025年は完全に...
Reactの「レンダリング」とは何か？ - Reactを学んでいると、必ず出てくる言葉が**「レンダリング」**です。 でも、 何をもって「レンダリングされた」と言うのか いつレンダリングが起きているのか ここが曖昧なまま進んでしまう人も多いです。 この記事では、React...
パソコンの「GB（ギガバイト）」とは？ - パソコンを選ぶときによく目にする 「256GB」「512GB」「1TB」 といった表記。 この GB（ギガバイト） は、パソコンにどれだけデータを保存できるかを表す単位です。 スマホでいう「容量」と同じ意味だと思ってOKです。 G...
2026年、エンジニアに必要な力とは - 「エンジニアに必要な力」は、年々少しずつ変わっています。 2026年に向けて特に強く求められるのは、技術力そのものよりも“技術をどう使うか”という力です。 かつては「この言語が書ける」「このフレームワークを知っている」ことが強みにな...
スマホやパソコンのストレージとは - スマホやパソコンを使っていると、 「ストレージがいっぱいです」 「空き容量が不足しています」 といった表示を見たことがある人は多いと思います。 このときに出てくるストレージとは、一体何なのでしょうか。 ストレージとは何か ストレージとは...
実務で必要なReactの力 - Reactを勉強していると、 「useStateは分かった」「コンポーネントも書ける」 ここまでは比較的すぐに到達します。 でも、実務でReactを使うとなると、必要になる力は少し変わってきます。 この記事では「現場で本当に求められるReac...
コードレビューの時にエンジニアが見ていること - コードレビューというと、「細かい指摘をされる場」「ダメ出しされる時間」というイメージを持つ人も多いかもしれません。 ですが実際の現場では、レビューはバグ探しやマウントの場ではなく、チーム全体で品質を上げるための作業です。 で...
Resendでできること - Webサービスやアプリを作っていると、 「ユーザーにメールを送りたい」という場面は必ず出てきます。 例えば、 会員登録後の確認メール 予約完了のお知らせ パスワード再設定メール お問い合わせへの自動返信 こういったアプリから送るメールを、 シン...
Vite（ヴィート）とは？ - Vite（ヴィート）とは、Webアプリ開発をとても高速かつ快適にしてくれる開発ツールです。 主に React・Vue・Svelte などのモダンなフロントエンド開発で使われています。 一言でいうと、 「開発中の表示がめちゃくちゃ速い環境を用意...
アンリアルエンジンとは - アンリアルエンジン（Unreal Engine）は、ゲームや映像、3Dコンテンツを制作するための開発エンジンです。 もともとはゲーム制作のために作られましたが、現在では映画・アニメ・建築・自動車・VR/ARなど、さまざまな分野で使われています。 ...
プログラミングにおける「車輪の再発明」とは？ - プログラミングの世界でよく使われる言葉に 「車輪の再発明（Reinventing the Wheel）」という表現があります。 これは、 すでに世の中に完成度の高い仕組み・ライブラリ・ツールが存在しているのに、 それを使わず...
505ページの意味とは？ - Webサイトを見ていると、まれに 「505 Error」 や 「HTTP 505」 と書かれたページに出会うことがあります。 「これって何が起きてるの？」 「自分の操作が悪かったの？」 この記事では、505ページ（505エラー）の意味を、Web...
ハッカソンとは - 「ハッカソン」という言葉を聞いたことはありますか？ 最近では、学生向けイベントや企業研修、子ども向けのプログラミング体験会などでも使われるようになってきました。 この記事では、ハッカソンとは何か、どんなことをするのか、参加すると何が得られるのかを、初心者...
max-widthとwidthの違いとは？ - Web制作をしていると、必ずと言っていいほど出てくる width と max-width。 どちらも「横幅」を指定するプロパティですが、 実は使いどころと役割がまったく違います。 この記事では、 「結局どう違うの？」「どっちを...
正規表現とは？ - 正規表現（せいきひょうげん）とは、文字列のパターンを表現するための書き方のことです。 簡単に言うと、 「このルールに当てはまる文字だけを探す・チェックする」 ための仕組みです。 プログラミングだけでなく、フォームの入力チェックや検索、データ整理など、さま...
ReactからNext.jsに入る最適なタイミングとは - Reactを学習していると、必ず一度はこんな疑問が出てきます。 「Next.jsっていつから触ればいいんだろう？」 「Reactをもっと極めてからの方がいい？」 「今Next.jsに行くのは早すぎる？」 結論から言...
ホワイトハッカーとは？ - ホワイトハッカーとは、不正や犯罪目的ではなく、正当な目的でシステムの弱点（脆弱性）を見つけ、改善に役立てる技術者のことです。 一言でいうと、 「守るために攻めるエンジニア」 です。 企業や個人が使っているWebサイトやシステムは、常にサイバー攻撃...
脆弱性とは - 脆弱性（ぜいじゃくせい）とは、**システムやソフトウェアに存在する「弱点」や「欠陥」**のことを指します。 この弱点を悪意のある第三者に突かれると、不正アクセスや情報漏えい、システム停止などの被害につながる可能性があります。 簡単に言うと、 **「本来守られ...
最近あった案件獲得の際のトラブルの話です。 「既存のサイトをWordPress化します！」って案件で募集かけてたら応募があったので、オンラインで打ち合わせをすることになりました。 色々話進めていった結果、「WordPress化ではなく1からサイトを作ってほしい」ということに...
ここ最近、本当に心の底から震えるような恐ろしい出来事があったので書き記しておこうと思います。 これを見た皆さんが同じようなことにならないように、そして僕自身も同じことを二度と繰り返さないように、祈りながら書き記します。 何が起こったかというと、「めちゃくちゃ大きいアメリカの...
「文系だからプログラミングは難しいんじゃないか…」という不安を感じている方、多いのではないでしょうか？確かに、プログラミングという言葉からは理系的なイメージが強く、数式や複雑なコードを書く技術が必要だと思いがちです。 しかし、結論から言うと、文系の方でもプログラミングは十分...
今回は、初心者の方にも分かりやすいように、プログラミングで何ができるのかを具体的な例を挙げて説明します。 1. ウェブサイトやブログの作成 プログラミングの最も身近な例の一つが、ウェブサイトやブログの作成です。HTML、CSS、Javascriptなどの言語を使うことで、自...
Web制作に関心を持ち始めると、よく耳にする「Webエンジニア」と「Webデザイナー」という職種があります。 しかし、両者は何をしている人たちなのか、具体的にはどう違うのか、少しわかりにくいかもしれません。 この記事では、これら2つの職種の違いを分かりやすく解説します！ 1...
プログラミングを学び始めると、「フロントエンド」と「バックエンド」という言葉をよく聞くことがあります。 これらは、ウェブサイトやアプリを作る際に重要な役割を持つ部分ですが、少し分かりにくい部分でもあります。 そこで、プログラミングに詳しくない方でも分かりやすいように、フロン...
「プログラミング教育」という言葉が浸透してきている世の中で、小さいうちからプログラミングを習わせた方がいいかどうか という議論を耳にします。 プログラミングは習い事として習うとかなり高額なので、躊躇する気持ちも本当に分かります。 かといって家で教えようと思っても、親がプログ...
「これからプログラミングを勉強し始めるのに、Macなど新しいパソコンを買った方がいいですか？」というご質問を時々いただきます。 確かに、ここは気になる点だと思います。 結論、「最初からは買わなくても良くて、ちゃんと動くパソコンがあればそれを使えば良い」です。 MacであれW...
現在Tailwind CSSを学習しているので、人気の理由や特徴についてまとめます。 1. 人気の理由 迅速な開発：Tailwindはユーティリティファースト（utility-first）のCSSフレームワークで、事前に定義されたクラスを使ってスタイルを適用します。これによ...
Javascriptフレームワークの一つであるVue.jsは、近年非常に人気が高まっています。その理由は、他のフレームワークにはない魅力的な特徴を数多く備えているからです。 人気の秘密をまとめていきます。 1. 学習コストが低い Vue.jsは、他のフレームワークと比較して...
僕は、基本的にホームページはWordPressを使って作成しています。 WordPressでホームページを作るメリットを挙げてみたので、ぜひ参考にしてください。 1. 簡単に使える WordPressは初心者でも比較的簡単に扱えるため、専門知識がなくてもホームページの作成が...
ホームページの管理・保守は、サイトが常に正常に動作し、最新の状態を保つために行う重要な作業です。 具体的な管理・保守の作業大きく分けて以下のような作業になります。 1. セキュリティ管理 セキュリティ更新: CMS（例: WordPress）のプラグイン、テーマ、コアシステ...
プログラミングの知識が全くなく、0から学習を始める場合は 1.HTML・CSS 2.Javascript 3.php（WordPress） この順番で始めるのが良いと思います。 1.2.3の技術はwebサイトを作るときに必要な知識となっており、比較的簡単で暗記的な部分も多い...
プログラミングにおいて、アルゴリズムは非常に重要な役割を果たします。アルゴリズムとは、特定の問題を解決するための一連の手順やルールのことです。プログラムを書く際、単にコードを作成するだけでなく、どのように効率よく、正確に問題を解決するかを考える必要があります。ここでは、アル...
経済産業省の報告によると、今後ますますITニーズは拡大していくにも関わらず、IT人材は不足すると予想されています。 ITニーズの拡大は皆さんも実感しているかと思いますが、自動運転や自動精算、キャッシュレスの普及やAIの普及など、私たちの周りの色んなところでITが関わっていま...
私の先輩のエンジニアがいて、その人に「ホームページ制作は1ページあたり、平均いくらですか？」と聞きました。 その先輩曰く、「1ページ5000円から8000円が平均」とのことでした。 その先輩の平均ではなく、世間一般の平均がその金額だそうです。 もちろん、インスタ投稿を自動で...
最近知人から、 「今あるホームページを少しいじりたいけど、やり方が分からない。プロの人に聞きたいけど、ホームページ制作の会社に聞けばいいの？どういう業者に聞けばいいの？」 と質問を受けました。 その質問に対する私の見解をまとめようと思います。 結論、「ホームページ会社はかな...
現在SEO対策について勉強しています。 SEO (Search Engine Optimization) は、検索エンジンで上位に表示されるための重要な施策です。 SEOにおける主な施策と大事なポイントをまとめたので、興味があればぜひ読んでみてください。 1. キーワードリ...
僕はwebエンジニアとして、サイト制作をしたりプログラミング指導のお仕事をさせていただいているのですが、毎日仕事前や仕事終わりに勉強をしています。 何を勉強しているかというと、 ・新しい言語（現在だとJavascriptを改めて学習中） ・SEOについて ・WordPres...
今日は僕の1日の過ごし方を紹介したいと思います。 webエンジニアってどんな感じで仕事進めてるの？と気になる方はぜひ最後まで読んでみてください。 7:30 起床・朝食🍙 基本はヨーグルトかおにぎりを食べています 9:00 ニュースチェック💻 （livedoorで主要ニュ...
