はてなブックマーク

開発プロジェクトの作業を陰で支えるのがGitです。しかし、ダンスフロアで多くの人が踊りに興じるのと同じように、複数人が介入すると「足の踏み合い」になりかねません。二人の開発者が同じコードを編集し、それをコミットしてしまうこともあるでしょう。このような場合には、Gitのマージを駆使してコンフリクトを解決することができます。 Gitのマージそのものはシンプルですが、高度なアプローチが必要になることもあります。再帰的マージ（recursive）や3ウェイマージ（three-way）などを使うことになるでしょう。Gitマージの取り消しが必要になることもあるかもしれません。 今回の記事では、複雑なGitマージテクニックについてご説明します。実際に、まずはどんなメリットがあるのかから見ていきましょう。 Gitマージ戦略入門 マージの基本的な考え方は単純です。複数のコミットをひとつにまとめ、ふたつのブラ

GutenbergがWordPressの標準エディターとなった今、ウェブデザインの可能性は、WordPressテーマに縛られません。WordPressには、優れたサイトのレイアウトに必要なデザインツールが搭載されており、テーマはサイトの構築やデザイン機能を強化する目的で使用することができます。 そしてブロックテンプレートは、サイト構築をさらに強化してくれる存在。ブロックエディターハンドブックには、以下のように記載されています。 ブロックテンプレートはブロックアイテムのリストとして定義されます。定義済みの属性やプレースホルダーコンテンツを含めることができ、静的にも動的にもできます。ブロックテンプレートを使用して、エディターセッションのデフォルトの初期状態を指定できます。 言い換えるなら、ブロックテンプレートは、デフォルト状態をクライアント上で動的に設定するために使用可能な複数のブロックアイテ

Dockerコンテナを利用することで、アプリケーションの実行に便利な隔離された環境を確保することができます。そこでは、高いレベルでの一貫性と移植性が保証されます。Dockerコンテナで作業する際には、そのシェルの接続や検査が極めて重要です。そうすることで、コマンドの実行、問題のトラブルシューティング、コンテナの動作のリアルタイム監視が可能になります。 この記事では、メンテナンスやアップデートのためにローカルやリモートのDockerコンテナにアクセスする方法についてご説明します。 コンテナアクセスが欠かせない理由 コンテナへのアクセスは、コンテナ化された環境における効果的な管理とトラブルシューティングに不可欠です。コンテナのログやランタイム情報を分析し、簡単にエラーを特定して解決することが可能になります。 また、コンテナにアクセスすることで、設定の更新、パッケージのインストール、その他の管理

JavaScript業界は非常に動的です。「古い」は必ずしも「時代遅れ」を意味しません。逆もまた然りで「新しい」は必ずしも「良い」ことにはなりません。 技術を選択する際に注意すべきは、プロジェクトとの整合性です。この原則は、JavaScriptモジュールバンドラーを考えるときにも強く言えます。バンドルが歴史あるものであれ、導入されたばかりのものであれ、それぞれに明確な利点や制限があります。 この記事では、ViteとWebpackという2つの人気のバンドラーに迫ります。その機能、特徴、アーキテクチャ、およびエコシステムへの統合方法に基づいて、これらのバンドラーを比較してみましょう。 JavaScriptモジュールバンドラーとは JavaScriptのバンドルを表したイラスト JavaScriptバンドラーとは言うなれば、ウェブ開発において複数のJavaScriptファイルを1つのファイルにま

WordPress 6.5の新機能（フォントライブラリ、データビュー、Block Bindings API、Interactivity APIなど） WordPress 6.5「レジーナ」が4月2日に正式リリースされました。この記事では、その新機能と改善点の数々をご紹介します。 特に強力なAPIが導入されていることで、WordPressの開発体験が大幅に改善されそうです。また、サイト構築やコンテンツ作成に関する嬉しい変更点も多数組み込まれています。 そして、新登場のフォントライブラリにより、コアブロックのコンテンツにカスタムフィールドの値を注入したり、サイトエディターから直接Google Fontsをダウンロードしてインストールしたりすることも可能に。新たなデザインツールとUIの強化により、全体的な編集体験もさらに向上します。 この記事でWordPress 6.5のすべてを網羅することはで

ウェブ開発は、単一の静的ページで構成された個人サイトの始まりから、今日まで長い道のりを歩んできました。最近では言語、フレームワーク、そしてコンテンツ管理システム（CMS）の選択肢の幅は大きく広がり、あらゆるニッチに対応することができます。 今回取り上げたいのは、JavaScriptフレームワークの新星「Astro」です。 Fred K. Schott氏をはじめとする開発チームによって構築されたAstroは、静的サイトジェネレーターのように動作するオールインワンフレームワークで、開発者の間で瞬く間に人気を獲得しています。 Astroが支持を集めている理由、他のソリューションよりも優れている点などをご紹介し、Astroを使用してMarkdownベースのブログを構築する方法を見ていきます。 Astro Astro（Astro.js）は、素早くスムーズに動作するコンテンツ豊富なサイトの構築を想定し

従来、開発者はマークアップとロジックを別々のファイルに分け、構造にはHTML、スタイリングにはCSSを使用し、インタラクションやデータ操作にはJavaScriptを記述してきました。 しかし、これらの技術を組み合わせることで、開発プロセスを簡素化し、複雑なユーザーインターフェースを簡単に構築できる方法があるとしたらどうでしょうか。そこで登場するのがJSXです。 この記事では、JSXとは何か、どのように機能するのか、そしてなぜウェブ開発において、これが動的なユーザーインターフェースを構築するために重要なのかを学びます。 この革命的な技術について、詳しく見てみましょう。 JSXとは JSX（JavaScript XML）は、JavaScriptの構文拡張で、JavaScriptファイル内にHTMLのようなコードを記述できるようにするものです。Meta（旧Facebook）によって開発されました

「git rename」を使用してGitのブランチ名を変更する方法 どんなソフトウェアやウェブアプリケーションを開発するにしても、ワークフローにGitを組み込むことは、ほぼ必須の要件となっています。 特にチームでのコーディングとなると、分散バージョン管理システムが間違いのない選択肢です。Gitはシンプルなコマンドをいくつも備えており、すぐに使いこなすことができます。しかし、必ずしも直感的とは言えません。 ブランチでgit renameのような操作を行う場合には、慎重に手順を検討する必要があります。 チームワークには十分なコミュニケーションが必須であり、ブランチ名には、公開する以上、十分な説明と明確さが求められます。素早く効率的に仕事をこなす中でも、これをしっかりと意識する必要があるのです。そのため、ブランチ名について、プロジェクトを進める中で細かな調整が必要になることは決して珍しくないでし

どんな企業にとっても、膨大な量のコンテンツ制作は容易ではありません。複数のスタッフやフリーランスのライターが必要になり、往々にして終わりの見えない作業です。また、特定のキーワードを求め多くのサイトが競い合うことになり、検索エンジン上位表示となると、至難の業です。 さらに厄介なことに、例えば、コンテンツ執筆の外注先から、AI搭載のソフトウェアで生成された記事が納品される…なんてこともあるかもしれません。 そんなコンテンツはSEOに影響するのでしょうか。検索エンジンは、AI支援型コンテンツを検出することができるのでしょうか。今回の記事では、AIコンテンツの検出について検討し、記事制作にAIが利用されたかどうかチェックできるツールを一挙ご紹介します。 本題に進む前に、そもそも、なぜ今、AIコンテンツの検出が重要なのか考えてみましょう。 おすすめのAIコンテンツ検出ツールについて動画での解説もご用

Inertia.jsは、クライアントサイドとサーバーサイドの両方のレンダリングを組み合わせたSPA（シングルページアプリケーション）を作成することができる先進的な仕組みです。 この記事では、InertiaがいかにSPAの構築を容易にし、開発者が抱える他の多くの問題を解決できるのかをご紹介します。また、このツールの主要な機能も解説します。 それでは、サーバサイドアプリケーションとクライアントサイドアプリケーションがどのように機能するか、という基礎から理解を深めていきましょう。 サーバーサイドレンダリングとは サーバーサイドレンダリング（SSR）とは、アプリケーションがウェブページのコンテンツをブラウザではなくサーバー側でレンダリングまたは表示できるようにする仕組みを指します。例えばある人が「example.com」にアクセスしようとすると、その人の使用するブラウザはサーバーにリクエストを送信

Docker Composeでボリュームを使って永続データを管理する Docker Composeは、Dockerを使用したマルチコンテナアプリケーションの管理とデプロイを簡素化するために設計された強力なオーケストレーションツールです。docker-compose.ymlファイルが、1つのファイル内で複数のサービス、ネットワーク、ボリュームを持つ複雑なアプリケーションを定義することで、デプロイを合理化します。Docker Composeを使用する上で欠かせないことの1つに、ボリュームを使用した永続的なデータの管理があります。 この記事では、Docker Composeで永続データを扱う上でボリュームを使用することの重要性を説明し、ボリュームを効果的に使用する方法を具体例を用いてご紹介します。 Dockerボリュームとは Dockerボリュームは、エフェメラルコンテナにより生成される永続デー

Gmailは、現在最も人気のあるメールサービスで、そのアクティブユーザーは18億人に達しています。しかし、特にマーケティングやビジネスコミュニケーションにメールを使用していれば、Gmail以外のサービスに移行したい、あるいは少なくともGmailの機能を強化したいと感じることがあるはず。 そこで今回は、Gmailに代わる優れたメールサービスをご紹介します。この記事を読んで、自社に適したメールサービスを見つけてみてください。 Gmail以外のメールサービスを検討すべき理由 Googleはデータ収集に関して懸念が多く、過去にはプライバシーを侵害する行為やメールのスキャンなどが行われていたことが明らかになっています。加えて、Gmailにはパーソナライズされた広告を表示する機能があり、単に鬱陶しく感じることも。 GmailはGoogleエコシステムの一部。これはサステナブルの観点で、ベストな選択肢で

Windows、macOS、LinuxにReactをインストールする方法 Reactは現代のウェブ開発に欠かせないツールとなっており、これをマシンにセットアップすることは、優れたユーザーインターフェース構築を始めるための第一歩となります。 パフォーマンスと再利用性に重点を置いたUI構築のための人気のJavaScriptライブラリで、人々のために本当に役立つ、高速で応答性が高く、メンテナンス可能なインターフェースを簡単に作成できるようになり、ウェブ開発に革命をもたらしました。 コンポーネントベースのアーキテクチャと、実際の環境でどのように動作するかに重点を置いているため、モダンなウェブアプリケーションの構築を目指す開発者にとって、魅力的な選択肢となっています。 この包括的なガイドでは、Windows、macOS、およびLinuxオペレーティングシステムにReactをインストールする手順を説明

Tailwind CSSを使用しておしゃれなウェブサイトを素早く開発する方法 開発者として経験を積んでいくと、少ないコードで、より多くのことを実行できる技術を使用したいと思うようになるもの。Tailwind CSSのような強固なフロントエンドフレームワークは、そんな開発者の望みをかなえる存在です。 この記事では、ウェブページの構築とデザインを支援するCSSフレームワーク、Tailwind CSSについて学びます。Tailwind CSSのインストール方法や、プロジェクトへの統合方法、そしていくつかの実用的なアプリケーションもご紹介します。また、カスタムスタイルやプラグインの作り方についても見ていきましょう。 Tailwind CSSを使ってサイトを構築する方法について、動画での解説もご用意しています Tailwind CSSとは Tailwind CSS Tailwind CSSは、ユーテ

脆弱性が蔓延し、絶えず増え続ける今日、ユーザーのセキュリティとプライバシーの保護は、これまで以上に重要視されています。脆弱性を見過ごせば、評価が失墜したり、高額な制裁金を科されたり、顧客や訪問者からの信頼を失ったりする可能性が高まります。 ウェブサイトやウェブアプリケーションは、常にマルウェアやスパムなどの攻撃の危険に晒されています。今回は、そんな攻撃の1つであるCSRF（クロスサイトリクエストフォージェリ）に焦点を当てます。CSRF攻撃は、気づかない間に発生する可能性があり、特に問題視されています。また悪意のある要求は正しい要求と区別が難しく、開発者やサイト運営者が発見しづらいというのも厄介です。 この記事で、CSRF攻撃の概要と仕組み、そして対策について学びましょう。 CSRF攻撃について動画での解説もご用意しています。 CSRF攻撃とは クロスサイトリクエストフォージェリは、略してC

SvelteとReactの違いを徹底比較（機能、パフォーマンスなど） 現代のウェブ開発に欠かせないと言っても過言ではないのが、JavaScriptフレームワークです。開発プロセスの効率化を担うもので、あらゆるウェブ開発の現場で使用されています。技術の向上に終わりはありません。こうしている今にもフレームワークは進化を続け、より優れた、シンプルな、そして時には複雑なフレームワークが産声を上げます。 これだけ選択肢があると、プロジェクトにあったフレームワークを選ぶのはそう簡単ではありません。 今回は、大注目のJavaScriptフレームワーク/ライブラリであるSvelteとReactについて。両者を様々な視点から比較し、それぞれの長所と短所に迫ります。 Svelteとは Svelteは、高速で柔軟性があり、「サイバネティクス」の面での「強化」をウリにするウェブアプリケーション構築フレームワークで

どのようなサイトにおいても、スピードは重要です。高速読み込みの追求のために、さまざまな技術が利用されています。その中の一つが、サイトの機能に悪影響を与えることなく、使用するコードを最小限に抑えること。gzipでの圧縮でそれを実現することができますが、Brotliを用いた圧縮という新手法もあります。 これはGoogleが開発したアルゴリズムで、gzipを超える（あるいはそれに取って代わる）多くのメリットが豊富に詰め込まれています。今回の記事では、Brotliを用いた圧縮のスピードや効率を中心に、その技術に迫りたいと思います。 Brotliアルゴリズムを用いた圧縮について動画での解説もご用意しています。 Brotliを利用した圧縮とは何か、これがサイトで使用されているかどうかを確認する方法、そして、必要な場合に実装する方法も扱います。圧縮アルゴリズムにおけるBrotliの位置付けと、他の選択肢

WordPressは、誰でも簡単にテキストやマルチメディアのコンテンツを作成し、共有することができる強力なオンラインパブリッシングツールです。それどころか、デザイナー、マーケティング担当者、開発者に便利な万能ツールとすら言えるでしょう。 つまり、WordPressは有能な仕事仲間として、さまざまな職業での成功を後押ししてくれます。 このような背景から、Kinstaでは、WordPress開発者におすすめのスキル習得のコツを各種記事でご紹介しています。 Gutenbergカスタムブロックを構築する方法 Gutenbergの動的なブロックを作成する方法 Gutenbergで投稿にメタボックスとカスタムフィールドを追加する方法 また、Gutenbergカスタムブロックについての動画もご用意しています。 そして、たしかにGutenbergの開発スキルでキャリアアップを目指すことはできますが、Wor

【2024年版】ReactのUIコンポーネントライブラリ23選 ReactのUIコンポーネントライブラリは、Reactベースのソフトウェアアプリケーションやウェブサイトの優れたインターフェースを作成するのに役立ちます。 デザインの特徴や機能ごとにコードを記述することもできますが、UIコンポーネントライブラリを活用すれば、作業効率が高まります。 ボタンなどのデザインに必要なパーツを、ゼロから記述することなく使用することができます。 多くの時間と労力を劇的に削減できるだけでなく、より重要な課題への対策を検討し、イノベーションに取り組む機会を与えてくれます。 テーブルやマップのような基本機能、あるいはテーマのような高度なものを追加する際は、毎回、利用可能な選択肢から選ぶだけで、そのままデザインに適用することができます。 その結果、ソフトウェア開発プロセス全体が効率化され、より短い期間で質の高いア

多くの開発者が、Gutenbergのブロックやアプリ開発を始めるハードルの高さに不満を抱いています。習得の難易度が高い理由は、開発環境のインストールと設定の複雑さにあります。しかも、ブロック開発には、JavaScript、Node.js、React、Reduxの深い知識が必要です。 WordPress公式のブロックエディターハンドブックは有用なリソースですが、開発者向けの膨大な情報の中で、初心者が迷子になることはほぼ間違いないでしょう。 Gutenbergプロジェクトのリード開発者Matías Ventura氏は、WP Tavernのインタビューで以下のように語っています。 すぐにブロック開発を習得できる人もいますが、やはり多くの人にとって大きな壁となっています。段階的な習得が必要になりますが、ドキュメントは、構成も表現も桁違いに改善できるはずです。もっといろいろなことができればと思ってい

FastAPI は、Python 3.6以降を使用したモダンなアプリケーションプログラミングインターフェースの構築に便利な、高速かつ軽量のウェブフレームワークです。今回の記事では、そんなFastAPI を使ったアプリ構築の基本を説明し、これが2021年ベストオープンソースフレームワークの1つとしてノミネートされた理由の一端をご紹介します。 FastAPIアプリを開発する準備ができたら、サーバー選びが必要になります。Kinstaのアプリケーションホスティングとデータベースホスティングサービスは、Pythonに強いPaaS（Platform as a Service）です。是非ともあわせてご確認ください。 まずは基本から学びましょう。 FastAPIの強み はじめに、FastAPIフレームワークが各種開発プロジェクトにもたらす利点をご紹介します。 スピード：FastAPIは、その名の通り、非常

React.jsを使ってヘッドレスWordPressサイトを構築する方法 WordPressは、最も人気のあるコンテンツ管理システム（CMS）の1つで、インターネット全体の41%に相当する8億1千万人が利用しています。シンプルでユーザーフレンドリー、多様なカスタマイズオプション、プラグインやその他のリソースの強力なエコシステムを誇り、ウェブサイトを素早く構築したい人にとって優れた選択肢となっています。 WordPressを最大限に活用する方法のひとつが、ヘッドレス化です。 ヘッドレスCMSは、ヘッドレスシステムとも呼ばれ、コンテンツの管理に使用されるバックエンドCMSの一種です。ヘッドレスCMSのAPIを呼び出すだけで、あらゆるシステムやウェブサイトにコンテンツを統合することができます。 ただし、この手法を選択する際には、フロントエンドを別途管理する必要があります。そこで登場するのがAPI

進化を続けるウェブ開発の現場において、静的サイトジェネレーター（SSG）は、ウェブサイトを素早く効率的に構築する人気の選択肢です。HTMLやCSSで構築された、手作業で更新や修正を行う必要がある従来の静的ウェブサイトと、データベースやPHPなどのサーバーサイドスクリプト言語に依存する動的ウェブサイトとの橋渡しをする役割を果たします。 この記事では、2024年に人気のReact静的サイトジェネレーターに迫ります。また、記事の後半では、特定のプロジェクトの要件にあわせて最適なものを選択する方法にも触れたいと思います。 Reactベース静的サイトジェネレーターとは Reactベース静的サイトジェネレーターとは、Reactコンポーネントをサイト構築の基盤として使用して静的なウェブサイトを生成することができるツールです。その前に、そもそも「静的サイト」と「静的サイトジェネレーター」についてもおさらい

コミュニティから生まれたWordPressの新デフォルトテーマ「Twenty Twenty-Three」 「Twenty Twenty-Three」は、WordPress 6.1に搭載されているWordPressの新しいデフォルトテーマです。 無駄な要素を取り除き、必要最低限の機能を搭載したテーマで、テンプレートやスタイルバリエーションを作成したり、WordPressの最新バージョンに導入された新機能をテストするのに理想的です。そのミニマルなスタイル、レスポンシブデザイン、動作の軽さから、さまざまなブログやサイトに適していますが、開発やテスト環境として使用するのも良いアイデアです。 Kjell Reigstad氏は、Twenty Twenty-Twoテーマを紹介する中で、デフォルトテーマの展望について以下のように語っています。 theme.json、ブロックテンプレート、ブロックパターンな

WordPress 6.2の新機能（サイトエディターの一新、スタイルブック、ナビゲーションメニューの改善、新APIなど） WordPress 6.2 Dolphyは、2023年最初のメジャーリリースです。その新機能が気になるところです。 WordPress 6.2は、長期的なGutenbergの開発ロードマップのフェーズ2の最終段階に突入しており、ブロックエディターは正式にベータ版が終了します。 今回のリリースは、主にインターフェースの改善と編集作業の効率化に重点が置かれています。 テンプレートやテンプレートパーツの操作を楽にする新たな手法が導入され、ブロックテーマにウィジェットをインポートする機能、集中執筆モード、ブロック設定の拡張、そして既存のブロック、パフォーマンス、ユーザビリティに対する大小さまざまな改善点が盛り込まれています。 中でも、機能性や使い勝手の面で劇的に改善されたのが、

【2024年版】JavaScriptのおすすめライブラリ＆フレームワーク40選 JavaScriptのライブラリやフレームワークを使うことで、幅広い特徴と機能により、ウェブサイトやアプリケーションの開発が容易になります。これを可能にしているのが、JavaScriptの動的で柔軟であるという特性でしょう。2020年に実施されたStackOverflowの調査によると、JavaScriptは回答者の67.7%が使用しており、最もよく使われているプログラミング言語として記録を更新（8年目）しています。 その汎用性の高さから、バックエンドとフロントエンド両方の開発やテストに利用できます。その結果、さまざまな目的に対応する数多くのJavaScriptライブラリやフレームワークを見つけることができます。それゆえに、プロジェクトでどれを利用すべきかと迷ってしまうこともあるでしょう。 しかし、心配はご無用

Dockerは、コンテナ型の仮想空間で開発およびデプロイを行うことができる人気のソフトウェア。そしてUbuntuは、Linuxディストリビューションであり、Dockerのサポートが充実しているOSとして知られています。 UbuntuにDockerをインストールすると、UbuntuのOSカーネルを共有する軽量の仮想マシンで、開発プロジェクトに理想的なプラットフォームを構築することができます。この記事では、これを実現する4つの方法をご紹介します。 Dockerとは Dockerは、コンテナ型の仮想空間（Dockerホスト）上でアプリケーションを構築・実行するための、ポータブルな開発環境を提供しています。コンテナのイメージは、ノートパソコンからクラウドまで、Dockerが利用できる環境であれば、変更なしでどこでも利用することができます。つまり、実行環境間の差異がなくなり、開発者の負担が軽減するこ

サイトデザインの美しさが、第一印象を左右します。しかし、一流のサイトを構築することは必ずしも容易ではありません。特に、デザインや開発の経験がない場合はなおさらです。 そこで、WordPressの「Elementor」というウェブサイトビルダーの出番です。おしゃれで、ユーザーフレンドリーなプラグインを使うことで、一行のコードも書かずに魅力的なウェブサイトを作成することができます。 この記事では、この非常に人気のあるWordPressページビルダーについて知っておくべきことをご紹介します。そして、レイアウト、ページ、さらにはカスタムElementorテンプレートページの作成など、Elementorの最も重要な操作方法にも触れます。 WordPress Elementorの基本 インターネット黎明期、サイトを作成するには、高度なウェブ開発・デザインのスキルが必要であり、そうでなければ、プロの力を