株式会社Hexabase

最近のWebアプリケーション開発ではTypeScriptを採用することが増えています。従来のJavaScriptとは何が違うのか、どういった利点があるのかを紹介します。TypeScriptとはTypeScriptはMicrosoftによって開発がはじまったプログラミング言語になります。プログラミング言語といっても、TypeScriptの実行環境があるわけではなく、TypeScriptからJavaScriptに変換した上で実行されます。つまりJavaScriptが基本です。そしてJavaScriptに型付け機能や、モダンな仕様を先進的に取り込んだのがTypeScriptになります。Type...

HTMLで画面を作る際にはCSSが使われます。これまで、さまざまなデザインフレームワークが登場しています。有名なものとしてはBootstrapが挙げられます。また、各UIフレームワークごとにVuetifyやMaterial UIなども作られています。そうした中で、最近注目を集めているのがTailwind CSSです。Tailwind CSSはユーティリティファーストを掲げたCSSフレームワークであり、HTMLとCSSを切り離さずに組み立てられるのが魅力です。本記事ではTailwind CSSの魅力や基本的な使い方を紹介します。Tailwind CSSとはTailwind CSSはユーティ...

ブラウザでは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つに分かれており、一番右下で実行結果を確認できるプレイグラウンドサービスです。外部ライブラリ...

新規事業開発は決して簡単ではありません。ここでは、私たちが見てきた新規事業開発の失敗パターンを紹介します。また、新規事業の起点となるイノベーションマネジメントについても簡単に取り上げます。私たちもチャレンジ途上のスタートアップ企業に過ぎません。たくさんの失敗をして、少しずつ学習しているところです。それを共有することで、新規事業開発の成功への道しるべにして頂ければと思います。さて、新規事業は次のようなプロセスで進めるのが一般的だと思います。このとき、最初に取り組むのが、市場調査やアイデアの検討ですね。失敗パターンは、この各ステップで登場します。「お客様は、こんなことに困っているから、◎◎◎...

今回、初めて開催された「STARTUPJAPANEXPO」を訪問いたしました。展示されていた各社の製品やサービスには、非常に興味深いものが数多くありました。中でも、リリースされたばかりの動画を使った営業ツールや、AIを活用した初商談や問い合わせ対応の動画応対ツールなど、各社が開発した多彩なツールが印象的でした。たくさんの学びがあり、新規事業開発における、今までにない新領域での提案が可能になると考えています。Hexabaseは、今後もこのようなイベントに積極的に参加し、モダン技術を活用した新たな可能性を追求していきます！役に立ったら、記事をシェアしてください

最近ChatGPTをはじめとしてAI界隈が話題をさらっています。日々新しい情報が出てくる様子は、一昔前のスマートフォンを彷彿とさせます。本記事では、現在のAI界隈を踏まえた上で、今後どのようにフロントエンド開発が変わっていくのかを考えます。一部予想も含まれますので、将来的に間違っている可能性もあります。コーディングサポートGitHub CEOは将来的にコーディングの8割がAI生成に変わると予測しています。実際、GitHub Copilotの凄さは体験するとよく分かります。従来の静的解析による入力補完とは異なるレベルのコードをサジェストします。コメントを書いて、それにあったコードを生成して...

Webアプリケーションが広く使われるようになっています。従来はローカルで使われるようなアプリケーションも、数多くWeb化しています。そうした中で注目されているのが実行速度に関する問題です。Webアプリケーションでは各種アセットをネットワーク経由で取得したり、スクリプト言語のJavaScriptを実行するために速度面で不利だと考えられがちです。今回は速度面での問題を解決できる技術や手法について解説します。キャッシュまず大事なのがキャッシュの活用です。計算処理結果もそうですが、ネットワークで取得したデータのキャッシュも重要です。ブラウザ自体が実装するキャッシュもありますし、ServiceWo...

Webアプリケーションは基本的にプル型です。つまりクライアントがアクセスすることでサーバー側でイベントが発生し、それに対してレスポンスを返すという形になります。しかし、場合によってはクライアントに対してメッセージを送信したいと考えることがあるでしょう。そのために使える技術をまとめて紹介します。WebSocketサーバーとクライアント間でメッセージを送受信する際の最初の選択肢になります。ソケットを開いたままにしてメッセージを送り合うので、メッセージはリアルタイムで送受信されます。送信できるメッセージはテキストのみなので、チャットやサーバーの処理完了通知などに用いられることが多いです。SSE...

Webは90年代後半くらいから利用されており、年々トレンドが変化してきました。ここ数年のトレンド変化は特に大きく、新しい技術が日夜登場しています。本記事では、00年くらいからを目安にフロントエンド技術がどう変化してきたのかを振り返ります。CGIの時代00年以前では、サーバーサイドで何かプログラムを動かす場合にはCGIが使われてきました。言語としてはPerlまたはCが多かったでしょう。まだ当時はPHP3くらいで、データベースも企業が提供するサービスくらいでしか使われていませんでした。CGIの用途としては掲示板、アクセスカウンター、Webチャットなどが多かったかと思います。この時期にはHTM...

Webアプリケーション開発時に、フロントエンドとバックエンドを分かれて開発するのはよくあるケースです。そうやって分業で開発されるフロントエンドとバックエンドはどう連携し合うのが良いでしょうか。この記事はよくあるケースを幾つか紹介します。RESTful APIRESTとはRepresentational State Transferの略になります。RESTの原則に従って開発されるシステムをRESTfulと言い、そのAPIをRESTful APIと呼びます。RESTful APIでは、URIとHTTPメソッドの組み合わせによって、何のリソースをどう処理するかを指定します。HTTPメソッドは次...

昨今のフロントエンド開発ではReactやVueといったフレームワークを用いて行われることが増えています。簡易的なものであれば素のJavaScriptやjQueryのようなライブラリを使うこともありますが、中規模以上であったり多人数での開発となるとフロントエンドフレームワークを利用することが多いでしょう。そうしたフレームワークを用いる中で注意したいのが状態管理になります。状態（ステート）をどう管理するかを覚えれば、フレームワークを使いこなすのも容易になるでしょう。本記事では、その状態管理に関する考え方や注意点について紹介します。フロントエンド開発における状態とは現在のWebアプリケーション...

Webアプリケーション／Webシステムの開発で、ReactやVue.js といったSPA(Single Page Application：シングルページアプリケーション)が注目を集めています。フロントエンド開発フレームワークについて学習しているエンジニアも増えているみたいですね。これまでSPAは、モバイルやコンシューマ向けWebアプリケーションを中心に使われてきました。リッチなUI/UXを提供できるといったSPAのメリットが、こういった用途で効果を発揮するからです。でも、利用者にとって使いやすい技術であれば、業務システムでも要望として上がってくるでしょう。そこで、この記事では、SPA(S...

フロントエンドプロジェクトでは、外部ライブラリやフレームワークを使うのが当たり前になっています。フレームワークの中にはコードを変換したり、各種ライブラリをブラウザ向けに変換して利用します。そうした変換処理、ビルド時に使われるのがビルドツールであり、モジュールバンドラーです。こうしたソフトウェアは年々トレンドが変化しており、新しいツールが続々と登場しています。今回は過去から現在まで、登場してきたビルドツール・モジュールバンドラーについて紹介します。タスクランナー・ビルドツールgulp.jsタスクランナーの先駆者にあたるソフトウェアです（最初のリリースが2013年9月）。taskというメソッ...

ReactやVue.js、Angularなどフロントエンド開発フレームワークが注目を集めています。SPA(Single Page Application)なんて呼ばれていますね。Next.jsやNuxt.jsなど、必要となる機能を統合したライブラリも充実してきました。ですが、やはりバックエンドも必要です。そこで、フロントエンド開発で利用できるバックエンドクラウドサービスを、個人で利用できるものからエンタープライズ領域まで、ざっくり整理してみました。関連するコラム【2022年版】 フロントエンドフレームワーク×9選バックエンドのローコード開発は何が違うのかReact・Vue.jsなどのSP...