こんにちは。配配メール開発課のmoryosukeです。 最新のLaravelではデフォルトのフロントエンドビルドツールがLaravel MixからLaravel Viteへと移行しました。 そこでTailwind CSS をビルドする手順を追いながらLaravel Viteに慣れていこうと思います。 Laravel Viteとは 事前準備 プロジェクト作成 Tailwind CSSを導入する 補足 最後に Laravel Viteとは Laravel ViteはLaravel用の高速なフロントエンド・ビル

こんにちは、KINTO Technologiesグローバル開発部でフロントエンド開発をしているクリスです。 普段フロントエンド開発でコンポーネントを開発する際はpropsを利用して必要な情報を渡す、という話はよく耳にすると思います。Angular, React, Vue, Svelteといった今よく使われているフレームワークではそれぞれの書き方でこの機能を実現しています。すべてのフレームワークを言及すると非常に長い記事になってしまうので、今回はグローバル開発部で良く使っているVueについて話したいと思いま

はじめに 長くシステム開発に携わっていると、最初は素早く開発することができたけども、今では新たな機能を付け加えるのに、多くの時間を費やすようになったという話をよく聞きます。 初めはシンプルだったソースコードも年月が過ぎていくなかで、機能追加やバグ修正、変更を行なっていくと、コードが非常に複雑化していき、開発者が修正するコストの増加やコード品質の低下につながります。設計の良くないコードや複雑化したコードは、同じ処理をするのにも余計にコードを書く必要がでてくるからです。 今回は、コードを複雑化して品質を低下さ

こんにちは(こんばんは)、始まりました。 Svelte不定期連載その1です。 前回 はざっくりとSvelteKitを動かすまで、を書いてみました。 (SvelteKitのメジャーアップデートに伴って内容もアップデートしましたのでよかったら一読ください) 今回は、 Write less code をコンセプトとしたSvelteと他のJSフレームワークで、それぞれ書き方にどんな特徴があるのかを比較してみます。 Svelte / React / Vue.js 仮想DOMであるReactとVue.js、仮装DOM

はじめに こんにちは！ウェブ版クラシルの開発を担当しているフロントエンドエンジニアのしらりんと申します。 4月になり、この記事を読まれている方の中にも社会人になられた方もいらっしゃると思います。 2年前の記事ですが、当ブログにも新社会人の方へ向けたメッセージがあるので、ぜひこちらも読んでいただけたら嬉しいです🌸 tech.dely.jp さて、今回はウェブ版クラシルとその開発事情について、これまでの変化や課題、これから何に力を入れて取り組んでいくかなどお伝えできればと思います。 これまでのウェブ版クラシル

初めに こんにちは。フロントエンドエンジニアの竹本です。 入社してそろそろ4ヶ月が経とうとしています。だいぶBASEの開発にも慣れてきました。 この記事では私が社内の静的アセットを管理しているリポジトリ(以降は便宜上 static-repository と呼びます)のNode.jsのバージョンを12から16にあげたら、webpack dev serverの立ち上がりが約12分から約5秒に短縮できた話を紹介したいと思います。 この作業は業務の隙間時間でやったのですが、どのように取り組んでリリースまで持ってい

こんにちは！全国のフロントエンドエンジニアのみなさん！ アプリケーションサービス部のオオカミです。 みなさん快適なフロントエンド開発していますか？ 今日は快適なフロントエンド開発ライフを多くのエンジニアに送って頂きたく、最近流行りのフロントエンド・モックAPIサーバー【Mock Service Worker】（以下、MSW）について記事を書いてみました♪ Mock Service Workerとは何か？ Mock Service Workerの何がすごいのか？ Mock Service WorkerをVu

こんにちは、フロントエンドチームの亀ノ上です。 最近は画像生成AIやテキスト生成AIなど、AIによる自動生成に関する話題をよく目にします。特にここ最近は ChatGPT の勢いが凄まじく、毎日のようにニュースを見かけるような気もしています。 今回はそんな ChatGPT でも使用されている 言語モデル である GPT-3 を用いて、 Nuxt3 で簡単なテキスト生成アプリを作成します。 Nuxt3について Nuxt3とは Nuxt3の機能 Nuxt3インストール インデックスページの設定をする フロントエ

挨拶 こんにちは！私はBOXIL SaaS開発エンジニアのハヤシ(ぱずー)です。 前回、私がスマートキャンプで成長したエピソードを紹介しましたが、今回はエンジニア採用サイトのリニューアルに携わったので、それについて紹介します。 最後まで読んでいただけると嬉しいです！ 今回、リニューアルした採用サイトです。こちらも見ていただけると嬉しいです！ https://engineer.smartcamp.co.jp/ 想定読者 これから採用サイトをリニューアルしたい人 エンジニアでスマートキャンプに興味がある人 目

はじめまして。 株式会社ココナラ フロントエンド開発グループのいっちーです。 フロントエンド開発グループの投稿としては最初のブログとなるでしょうか。 フロントエンドの開発をしていると、特定の要素がビューポートに入ってきた際に画像の読み込みの開始やAPIの呼び出しなど何かしらの処理を実行したいケースがしばしば出てくるかと思います。 そんなときに利用されるWeb APIとしてIntersection Observer APIがありますが、それを利用したVueのカスタムディレクティブの実装例をご紹介します。 I

こんにちは。 ココナラ法律相談という弁護士の先生方と相談したい悩みのあるユーザーのマッチングサービスを担当しているエンジニアの高崎と申します。 法律相談開発チームでは、一般に公開されているユーザーの利便性向上はもちろんのこと、社内のメンバーが利用する管理画面への継続的な改善を行っています。 ココナラ法律相談開発チームでは、RefineというReactベースの管理画面構築用フレームワークを利用して、ココナラ法律相談の管理画面を効率よく再構築しました。 その結果リプレイス作業を通して様々なメリットがあったので

Introduction I am JL, an application engineer at KINTO Technologies (KTC) and currently a member of the frontend team under the Global Development Group. Before coming to Japan, I worked in the Philippines for 3-4 years, first in the Fishing Industry as t

Self Introduction "It's not that I'm so smart, it's just that I stay with problems longer." — Albert Einstein, physicist Problems can be very discouraging at some point. However, I think my nature of being merry also helped me overco

はじめに サービスをデプロイするときはビルドしてテストしてから行うという手順はよくあります。 その時に、Google Cloud Platform (GCP) 上で CI/CD パイプラインを構築し、コードの変更をトリガーにしてビルド・テスト・デプロイが手軽にできる手法を紹介します。 使用するツール GCP Cloud Build App Engine GitHub 作成するもの Vue.js のプロジェクトで GitHub 上の main ブランチに push/merge されたら自動でビルド・テスト・

こんにちは、セーフィー株式会社の23卒、新卒エンジニア職入社予定の伊東です。 この記事は Safie Engineers' Blog! Advent Calendar 10日目の記事です。 私たち新卒一期生は入社前に５ヶ月間インターンシップを行ってきました。 このインターンシップの振り返りをしつつ皆さんにセーフィーという会社の教育環境や会社の雰囲気をお伝えしようと思います。 自己紹介 伊東 スキルセット セーフィーを選んだ理由 インターンで期待していたこと 土田 スキルセット セーフィーを選んだ理由 1.