注目のストーリー
All posts
エディタの中で生成AIが利用できるサービス16選
GitHub Copilotなどは一度使うと、手放せなくなります。普段使っているエディタに統合されるので、手元の環境ですぐに使えるのも魅力です。この記事では、プログラミングエディタやIDEの中で利用できる生成AIサービスをまとめて紹介します。GitHub CopilotGitHub Copilotはリアルタイムのサジェスト、エラー時のコード修正提案、コードの自動補完などを行うAIアシスタントです。GitHub CopilotはGitHubのコードを学習しており、GitHub上のオープンソースプロジェクトも学習ソースとなっています。利用できるエディタはVSCodeの他、NeovimやVis...
大規模言語モデル（LLM）をシステムに組み込む際に注意したい課題
ChatGPTに代表される大規模言語モデル（LLM）が多数登場しています。API公開されているので、システムに組み込んで利用したいと考える方も多いでしょう。しかし、LLMをシステムに組み込む際には、いくつかの課題があります。この記事ではそうした課題を整理し、LLMをシステムに組み込む際に注意したい点をまとめます。ハルシネーションハルシネーションは幻覚的な応答や誤情報の生成を意味します。LLM自体は文脈を理解している訳ではなく、前後の流れから次の単語を予測しているだけです。そのため、LLMは文脈に沿わない応答を生成することがあります。また、多くの場合において「分からない」という応答はしませ...
モダンなReact Webアプリケーションフレームワーク「Next.js」とは？
Next.jsはReactのフレームワークです。ReactはFacebookが開発したJavaScriptのライブラリで、Webアプリケーションのフロントエンドを構築するために使われます。Next.jsはReactを使って、Webアプリケーションを作るためのWebアプリケーションフレームワークです。Next.jsのWebサイトNext.jsの開発元Next.jsはVercel社が主に開発しています。Next.js自体はオープンソース・ソフトウェアですが、ホスティングサービスであるVercelに特化して提供されている部分が多々あります。他のホスティングサービスであるNetlifyやAWS ...
フロントエンドエンジニアは習得すべきTypeScriptについて
最近のWebアプリケーション開発ではTypeScriptを採用することが増えています。従来のJavaScriptとは何が違うのか、どういった利点があるのかを紹介します。TypeScriptとはTypeScriptはMicrosoftによって開発がはじまったプログラミング言語になります。プログラミング言語といっても、TypeScriptの実行環境があるわけではなく、TypeScriptからJavaScriptに変換した上で実行されます。つまりJavaScriptが基本です。そしてJavaScriptに型付け機能や、モダンな仕様を先進的に取り込んだのがTypeScriptになります。Type...
HTMLの新しいスタイル設定。Tailwind CSSとは
HTMLで画面を作る際にはCSSが使われます。これまで、さまざまなデザインフレームワークが登場しています。有名なものとしてはBootstrapが挙げられます。また、各UIフレームワークごとにVuetifyやMaterial UIなども作られています。そうした中で、最近注目を集めているのがTailwind CSSです。Tailwind CSSはユーティリティファーストを掲げたCSSフレームワークであり、HTMLとCSSを切り離さずに組み立てられるのが魅力です。本記事ではTailwind CSSの魅力や基本的な使い方を紹介します。Tailwind CSSとはTailwind CSSはユーティ...
WebAssemblyをどう使うか、事例を通じて学ぼう
ブラウザではJavaScript以外にもWebAssemblyという実行エンジンが用意されています。WebAssemblyは特定のプログラミング言語を指す言葉ではなく、CやC++、Rustなどさまざまな言語からWebAssembly用の実行ファイルを作成できます。本記事ではWebAssemblyの利用例を紹介します。どういった場面での利用にWebAssemblyが向いているのか、ぜひチェックしてください。動画・Webカメラ動画配信サイトやWebカメラなど、メディアをWebAssemblyで処理するケースです。Amazon Prime VideoAmazon Prime Videoではレン...
サーバーなしでちょっとしたコードを試せるプレイグラウンドサービスまとめ
JavaScriptやHTMLを書いて、それを他の人にシェアしたり見せたいと思う機会は多いでしょう。JavaScriptだけであればブラウザの開発者ツールを利用できますが、それもシェアする際には面倒です。そこで使いたいのがプレイグラウンドサービスです。IDEほどがっつりと開発するのではなく、ちょっとしたコード（スニペット）を試すのに最適です。今回はそんなプレイグラウンドサービス（サーバーサイドがほぼないもの）を紹介します。JSFiddleJSFiddleはHTML、JavaScript、CSSが3つに分かれており、一番右下で実行結果を確認できるプレイグラウンドサービスです。外部ライブラリ...
新規事業開発、6つの失敗パターン + 1 : 新規事業の起点となるイノベーションマネジメント
新規事業開発は決して簡単ではありません。ここでは、私たちが見てきた新規事業開発の失敗パターンを紹介します。また、新規事業の起点となるイノベーションマネジメントについても簡単に取り上げます。私たちもチャレンジ途上のスタートアップ企業に過ぎません。たくさんの失敗をして、少しずつ学習しているところです。それを共有することで、新規事業開発の成功への道しるべにして頂ければと思います。さて、新規事業は次のようなプロセスで進めるのが一般的だと思います。このとき、最初に取り組むのが、市場調査やアイデアの検討ですね。失敗パターンは、この各ステップで登場します。「お客様は、こんなことに困っているから、◎◎◎...
STARTUP JAPAN EXPOに参加しました！
今回、初めて開催された「STARTUPJAPANEXPO」を訪問いたしました。展示されていた各社の製品やサービスには、非常に興味深いものが数多くありました。中でも、リリースされたばかりの動画を使った営業ツールや、AIを活用した初商談や問い合わせ対応の動画応対ツールなど、各社が開発した多彩なツールが印象的でした。たくさんの学びがあり、新規事業開発における、今までにない新領域での提案が可能になると考えています。Hexabaseは、今後もこのようなイベントに積極的に参加し、モダン技術を活用した新たな可能性を追求していきます！役に立ったら、記事をシェアしてください
AIとともに進化するフロントエンド開発の未来
最近ChatGPTをはじめとしてAI界隈が話題をさらっています。日々新しい情報が出てくる様子は、一昔前のスマートフォンを彷彿とさせます。本記事では、現在のAI界隈を踏まえた上で、今後どのようにフロントエンド開発が変わっていくのかを考えます。一部予想も含まれますので、将来的に間違っている可能性もあります。コーディングサポートGitHub CEOは将来的にコーディングの8割がAI生成に変わると予測しています。実際、GitHub Copilotの凄さは体験するとよく分かります。従来の静的解析による入力補完とは異なるレベルのコードをサジェストします。コメントを書いて、それにあったコードを生成して...
フロントエンドを高速化するために覚えたいテクニック
Webアプリケーションが広く使われるようになっています。従来はローカルで使われるようなアプリケーションも、数多くWeb化しています。そうした中で注目されているのが実行速度に関する問題です。Webアプリケーションでは各種アセットをネットワーク経由で取得したり、スクリプト言語のJavaScriptを実行するために速度面で不利だと考えられがちです。今回は速度面での問題を解決できる技術や手法について解説します。キャッシュまず大事なのがキャッシュの活用です。計算処理結果もそうですが、ネットワークで取得したデータのキャッシュも重要です。ブラウザ自体が実装するキャッシュもありますし、ServiceWo...
サーバーからクライアントに対してメッセージを送信する技術まとめ
Webアプリケーションは基本的にプル型です。つまりクライアントがアクセスすることでサーバー側でイベントが発生し、それに対してレスポンスを返すという形になります。しかし、場合によってはクライアントに対してメッセージを送信したいと考えることがあるでしょう。そのために使える技術をまとめて紹介します。WebSocketサーバーとクライアント間でメッセージを送受信する際の最初の選択肢になります。ソケットを開いたままにしてメッセージを送り合うので、メッセージはリアルタイムで送受信されます。送信できるメッセージはテキストのみなので、チャットやサーバーの処理完了通知などに用いられることが多いです。SSE...
フロントエンドテクノロジートレンド遷移まとめ（2022年版）
Webは90年代後半くらいから利用されており、年々トレンドが変化してきました。ここ数年のトレンド変化は特に大きく、新しい技術が日夜登場しています。本記事では、00年くらいからを目安にフロントエンド技術がどう変化してきたのかを振り返ります。CGIの時代00年以前では、サーバーサイドで何かプログラムを動かす場合にはCGIが使われてきました。言語としてはPerlまたはCが多かったでしょう。まだ当時はPHP3くらいで、データベースも企業が提供するサービスくらいでしか使われていませんでした。CGIの用途としては掲示板、アクセスカウンター、Webチャットなどが多かったかと思います。この時期にはHTM...
Restful API、GraphQL…フロントエンドとバックエンドをつなげる方法
Webアプリケーション開発時に、フロントエンドとバックエンドを分かれて開発するのはよくあるケースです。そうやって分業で開発されるフロントエンドとバックエンドはどう連携し合うのが良いでしょうか。この記事はよくあるケースを幾つか紹介します。RESTful APIRESTとはRepresentational State Transferの略になります。RESTの原則に従って開発されるシステムをRESTfulと言い、そのAPIをRESTful APIと呼びます。RESTful APIでは、URIとHTTPメソッドの組み合わせによって、何のリソースをどう処理するかを指定します。HTTPメソッドは次...
フロントエンド開発で覚えたい「状態管理」とは
昨今のフロントエンド開発ではReactやVueといったフレームワークを用いて行われることが増えています。簡易的なものであれば素のJavaScriptやjQueryのようなライブラリを使うこともありますが、中規模以上であったり多人数での開発となるとフロントエンドフレームワークを利用することが多いでしょう。そうしたフレームワークを用いる中で注意したいのが状態管理になります。状態（ステート）をどう管理するかを覚えれば、フレームワークを使いこなすのも容易になるでしょう。本記事では、その状態管理に関する考え方や注意点について紹介します。フロントエンド開発における状態とは現在のWebアプリケーション...
