スマートキャンプのエンジニア瀧川です！ クライアントサイド(JavaScript)で処理を定期実行したい場合は皆さん使いますよね！ そうsetInterval関数です。 ただ何も考えず使ってしまうと色々な問題が起こったり... そこで本記事ではsetInterval関数を使う際の困りごとを挙げて、それをまるっと解消するVue.jsプラグインを作る方法を紹介したいと思います！ (今回はVue.jsで実装しますが、特に依存しているわけはないので他のフレームワークをお使いの方も参考にしてください！) まずVue

はじめに こんにちは。新卒２年目のaa_cryingです。 最近興味本位でVue.jsについて学習を始めましたので、今回はVue.jsの基礎的な部分について紹介したいと思います。 はじめに Vue.jsとは プログレッシブフレームワークとは Vue.jsの代表的な機能 リアクティブなデータバインディング コンポーネント 高速なレンダリング おわりに 参考にした記事 Vue.jsとは Vue.jsとは、 ユーザーインターフェイス (UI)を構築するための JavaScript の プログレ ッシブ フレーム

id:radiocat です。毎月お楽しみのエンジニアもくもく勉強会のお知らせです。今回は6/13（木）に開催予定です。 rakus.connpass.com 5月のレポート 前回も様々な技術分野に取り組んでいる方々が参加されました。 PHP 、 Python 、Docker、Vue.jsといったキーワードが複数登場しています。 ブログを書いている人も多く、参加された皆さんの活動の一端を知ることができてエンジニアとして参考になります。また、プログラミングなどの作業の傍らで技術書籍を読んで参考にしている人も

こんにちは！今年の4月に新卒として入社したエンジニアの id:maeken2010 です． 5/24(金)に行われた Gotanda.pm #19 に初登壇枠として発表してきました． 今回はその発表についての記事です！ Gotanda.pmについて Gotanda.pmとは、五反田近郊で働いている人々や五反田に集結できる人々で開催する、Perlを軸とし好きな技術の話をするコミュニティです (イベントページより引用) 発表の背景 今年の4月に新卒としてモバイルファクトリーに入社し，約1ヶ月半の間 デザイン思

こんにちは。エンジニアの笹原です。 スマートキャンプではフロントエンドの開発にVue.jsを取り入れています。 Vue.jsで開発するうえで、 SFC（単一ファイルコンポーネント） を利用できることは良さの一つだと思います。 今回は、Sprocketsでアセット管理を行っているRailsプロジェクトに、Webpackを入れることでSFCを使えるようにする方法を紹介します。 SFC（単一ファイルコンポーネント）とは SFCの良さ SFCの実装方法 Sprocketsを利用しているRailsプロジェクトにSF

こんにちは。Webフロントエンドエンジニアの松井菜穂子です。 ZOZOテクノロジーズに入社して一年ほど経ちます。 あるサービスの立ち上げから運用まで、Webフロントエンドのチームリーダー・開発メンバーとして関わってきました。 当記事では、当社のWebフロントエンド開発現場にあった問題と、それぞれの課題に対して堅実に積み重ねた技術的な改善方法についてご紹介します。 はじめに モダンな技術でも負債は生まれる 負債を何故改善するのか 要因 その1: Vueコンポーネントを綺麗に分割する テンプレート コンポーネ

デザイナー兼エンジニアの葉栗です！ スマートキャンプでは以前からWebフロントエンド開発にVue.jsを取り入れています。 Vue.jsなどコンポーネント指向のフレームワークは、UIフレームワークも豊富で、お手軽にリッチなUIが構築できるのでいいですよね。 今回は私のお気に入りの、 Vue.js + Elelment UI + Lottie というライブラリを使って、数十分でできる簡易的なログインページを作ってみようと思います。 0から構築をはじめて、レイアウト設計、ElementUIで実装、Lottie

こんにちは。ブロックチェーンチームでエンジニアをしている id:odan3240 です。 4月4日に行われた Meguro.es #20 で「JavaScript + Dockerの知見」というタイトルで登壇してきました。今回の記事はその発表の紹介です。 発表の背景 モバイルファクトリーに入社してからの約1年間でいくつかのサービスに関わってきました。 サービスサイト: https://uniqys.net ブロックチェーンアプリ検索サイト: https://findapps.me ブロックチェーンアプリ開

こんにちは。delyでフロントエンドを担当している @all__user です。 今回はkurashiruでSSR（Server Side Rendering）を導入した事例についてご紹介したいと思います。 目次 目次 要約 経緯・背景 SSRの導入 SPAのSEO対策 SSRのコスト Rendertronの採用は見送り kurashiruのSSR構成 ルートメタフィールドを利用したデータ取得の仕組み 消極的SSRから積極的SSRへ まとめ 要約 SPAにしたい。SEOのことを考えるとSSRはしておきたい

RAKUS Meetup のロゴ @moomooya こと 勉強会最速オジサン を目指している鈴木です。 先日弊社にて RAKUS Meetup Tokyo #2 フロントエンドNight と称したイベントを開催しましたので、そちらのイベントレポートを投稿します。 いつもはイベント閉幕後3秒以内にレポートを公開しているのですが、今回は1,688,400秒ほど経過してしまいましたorz 当日の様子 発表の紹介 Vue.js の新規プロダクトで楽して UI を提供しようと思ったらそこまで楽じゃなかった話 話の

こんにちは、スマートキャンプでエンジニアインターンをしている中村ノアです。 ついに今日が最終出社日となりました。 インターンを始めたのは去年の10月からですが、時間の流れの速さに戸惑うばかりです。 インターン中は新規サービスの開発を担当していました。 チームでのプロダクト開発で得られたスキル・経験 を改めて振り返ってみようと思います。 あっという間でした...！！！ 自分自身について 成長したスキル Vue.jsを使ったフロントエンド開発スキル Ruby on Rails を使ったサーバサイド開発スキル

宿泊事業本部フロントエンドエンジニアの宇都宮です。 2018年度下期は、一休.comホテルリストページ スマホ版の速度改善に取り組んできました。その結果、ページのデザインはそのまま、機能面はリッチにしつつ、プロジェクト開始前の約2倍のスピードでページが表示されるようになりました。 本記事では、高速化のためにどのような施策を行ったのか紹介します。 なお、Webサイトの高速化手法については、ホテル詳細ページ高速化プロジェクトを実施した際にも記事を書いています。これらの記事で紹介している手法（たとえば、Imgi

BigQuery大好き瀧川です！ 最近弊社ではVue.jsを使ってSPA(SinglePageApplication)！という構成がよく使われています。 普段の開発だとwebpack-dev-serverを利用していて、手軽だしホットリロードもサポートされているし特に不自由なく運用できています。 でも、例えばWebpackでのproductionビルドをテストしたい、生成された静的ページにアクセスしたいということがちょこちょこあるんですよね。 大体いままで静的ページのテストをするときにはPythonのSi

フロントエンドエンジニアの松原( @simezi9 )です。BASEでは現在 ショップ向けの管理画面をリニューアルするプロジェクトが進んでいて 、UI/UXの更新と同時に創業当時から継ぎ足して作ってきたフロントエンドの技術スタックを一新しようとしています。この記事では、具体的にそのフロントエンドの更新でどのようなことに取り組んでいるのかをいくつかご紹介したいと思います。 Vue + TypeScriptを利用したMPA(multi page application)化 HTMLの構築をPHP(サーバーサイ

こんにちわ @kawanamiyuu です。来月開催される Laravel JP Conference 2019 に弊社から 2 名のエンジニアが登壇することになりましたのでお知らせします。また、株式会社 ラク スは BRONZE スポンサーとしてイベントに協賛しています。 イベント概要 日時 : 2019 年 2 月 16 日 (土) 会場 : グランパークカンファレンス 公式 HP : https://conference2019.laravel.jp/ ハッシュタグ ： #laraveljpcon