Blog - LINE ENGINEERING

TAG ARCHIVES: frontend

フロントエンドイベント「UIT #6 進化する React.js」を開催しました
Takuma HANATANI2019-04-18
Engineering Manager at LINE Corp. @potato4d
UIT とは？ UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。ユーザーの目に見える部分を技術で解決する開発者のための、実践的なコミュニティとして活動。JavaScript だけでなく、また、ユーザーインターフェースだけでもなく、多面的なテーマ設定が特徴となっています。過去には BFF(Backend for Frontend) のような技術にフォーカスした勉強会や、「わたしたちにとってのVue.js」と題した様々な現場での Vue.js の事例など、トレンドを追いながらも地に足の着いた話が多い点も魅力の一つです。 https://uit.connpass.com/ 当日の様子そんな UIT ですが、今回のテーマは「進化する React.js」。当日は三人のゲストにそれぞれ React.js をテーマに登壇いただきました。以下、登壇順にご紹介します。 Takepepe さん「Hooks で作る React.FC<Animation>」トップバッターは株式会社
- frontend
- UIT
【インターンレポート】データ可視化プラットフォーム「OASIS」のフロントエンドの改善
Sakaguchi Tatsuhiko2019-04-15
はじめにLINEの冬インターンで、Data Labsという組織に参加させていただいた坂口達彦と申します。普段は HCI 分野で研究をしている大学院1年です。インターンでは、Data Labs で開発しているデータ可視化プラットフォームである OASIS のフロントエンドの改善を行いました。その成果についてご紹介できればと思います。OASIS についてOASIS は Data Labs で開発されている、Hadoopクラスタに保存されたデータの可視化・分析を行うための Web インターフェースです。詳しくは「LINE の全社員が必要に応じて担当サービスのデータを分析できる環境の構築」をご覧ください。2019年3月現在で600ほどの社内ユーザがおり、また今後 OSS としての公開を予定しています。フロントエンド改善そんな OASIS ですが、フロントエンドのメンテナンスやアップデートを行う人員が不足しているという状況がありました。そこで私はインターンシップにおいて次の5つのタスクに取り組みました。開発環境のアップデートチャート作成ライブラリの置き換えデザイン・UI の改善Pivot ta
TensorFlow.jsの話
Jun2018-12-16
LINEでフロントエンド開発を担当しています。プログラミング言語に興味を持っています。
この記事はLINE Advent Calendar2018の16日目の記事です。こんにちは！LINEでフロントエンド開発を担当しているJunと申します。最近のフロントエンド世界は面白いことがいっぱいで全部把握できないくらいですが、個人的に一番興味があるのは機械学習です。今日はWEBフロントエンドでの機械学習というテーマで、TensorFlow.jsを使って簡単な機械学習を実装してみた経験について書きます。 TensorFlow TensorFlowはオープンソース機械学習フレームワークです。機械学習でよく使われるモデルや関数などを抽象化しているので、アプリケーションプログラマでも簡単に機械学習を実装することができます。そして今年の中旬頃、TensorFlowのJavaScript portのTensorFlow.jsが公開されました。最近AppleのCore MLやGoogleのML Kitなど、クライアントで機械学習モデルを動かすことが一般的になってきていると思いますが、TensorFlow.jsはブラウザ上で機械学習モデルを動かすものとなっています。WEB環境で直接機械学習を動
- frontend
- UIT
- TensorFlow
Swiftの型チェックが遅くなる理由を探求してみたときの話
freddi2018-12-09
Developer Experience Development Team
はじめまして！LINE Fukuokaでインターン生としてiOSエンジニアをしています、秋勇紀(freddi)と申します。 LINE Advent Calendar 2018の9日目の記事として、Swiftのコンパイルの時間削減にチャレンジした話をします。どうぞよろしくお願いします！本記事では、どのようなコードでSwiftの型チェックが遅くなるのか、そしてなぜなのか、を考えた時の話を書いています！検証準備実際の修正の流れを見る前に、Xcodeでのビルド時に型チェックにかかりすぎている部分を可視化してみましょう。コード中の型チェックにかかる時間で警告を表示する関数ごとに型チェックがかかる時間を警告として出すのは、XcodeのプロジェクトからBuild Settings -> Other Swift Flagsで以下のFlagを追加すれば可能になります。 -Xfrontend -warn-long-function-bodies=1000 次のFlagを設定すると、コードごとの型チェックで警告を表示することができます。 -Xfrontend -warn-long-expre
- frontend
- Swift
Kotlin Fest 2018 協賛＆主催レポート
Fujiwara Satoru2018-08-29
LINE Developer Relations
はじめまして。Developer Relations Team の藤原(@satorufujiwara)です。 8/25(土) に東京コンファレンスセンター品川にて開催されたKotlin Fest 2018に、LINEは「ことりスポンサー」として協賛しました。また、「日本Kotlinユーザグループ」に所属する個人として、本イベントを主催しました。スポンサーと主催、両方の視点からイベントの様子をレポートいたします。 Kotlin Fest 2018とは Kotlin Fest 2018はプログラミング言語「Kotlin」に関する国内初のカンファレンスです。有志によって運営される技術コミュニティ「日本Kotlinユーザグループ」が主催しており、カンファレンスのテーマは「Kotlinを愛でる」となっています。このテーマには「Kotlinを愛し、そして、深く知ろう」という意味が込められています。スポンサーとして LINEはサービス開発言語としてKotlinを多用しており、企業として、Kotlinというプログラミング言語やその周辺のコミュニティといったエコシステムに広く貢献していきた
グローバル社内イベント―PaaS Day 2018―フォトレポート
Hiranuma Sari2018-08-13
インフラ企画チーム
世界12カ国に約6,000人の仲間が働くLINE。その「エンジニア」と聞いて、思い浮かべるのはどんなイメージでしょうか？一口にLINEのエンジニアといっても、そこには多様な「エンジニア」がいます。この記事は、LINEが展開する全サービスの開発者と、ひいてはLINEという企業そのものを基盤から下支えしているエンジニア達が登場したイベント―PaaS Day―の開催報告です。このイベントの前身は、昨年開催した―Infra Day―。LINEの開発拠点は日本、韓国、中国、台湾、タイ、ベトナム等に点在しています。そこで、台湾、ベトナムにあるグループ会社の開発エンジニア向けに、LINEのインフラに対するニーズの把握と、グローバルインフラの研修、Private Cloudである”Verda”の紹介などを行ったのが―Infra Day―でした。 ▲グローバルに拡がる開発拠点 2回目となる今年は、―PaaS Day―と名前も新たに開催しました。開催地は2ヶ国から4ヶ国へ。プレゼンターは、インフラ組織だけでなく、品質や開発効率向上の側面からエンジニアを支援するプラットフォ
- frontend
BFFに取り組む開発者たちが語る「UIT#3 The “Backends for Frontends” sharing」
Shoyo Kyo2018-06-26
Front-end Engineer
こんにちは！ UIT室フロントエンド開発1チームの姜勝陽（kyo shoyo）です。 2018年6月7日にLINE株式会社で開催されたフロントエンドエンジニアのイベント「UIT#3 The “Backends for Frontends” sharing」にスタッフとして参加してきました。今回は、UITのMeetupイベントの紹介と参加レポートを皆様にお届けします。 UITとは？ User Interface + Technology の頭文字を取って私たちはいわゆるフロントエンド開発のことをUITと呼んでいます。私たちにとって重要なことは、エンジニアとして探究心をもって技術に取り組み、その知見をより良いUIをユーザーに提供する為に活かすことです。このコミュニティはLINE株式会社でフロントエンド開発に携わるチームの有志によって運営されています。引用: connpass UITグループ UITはフロントエンド開発を軸に様々な技術領域について情報交換をおこなう開発者コミュニティです。"フロントエンドエンジニアが気楽に集まり交流できる場を提供すること"
- frontend
- UIT
コード分割（Code Splitting）を簡単に実装できるgrow-loaderを作った話
sunderls2017-12-21
sunderls is a front-end engineer
はじめにこんにちは、LINEマンガJavaScript担当の@sunderlsです。これはLINE Advent Calendar 2017の22日目の記事です。今日は、webpackローダーのgrow-loaderを紹介します。 LINE Engineering Blogの記事「LINEマンガ：Page Stackを使ってサクサクなページ遷移を実現できました」でご紹介しましたが、LINEマンガはWeb技術で実装されています。 Webでネイティブアプリに近いユーザー体験を提供するため、いろいろ工夫しています。今回は、数ある工夫の中からコード分割の実装を紹介したいと思います。なぜコードを分割するのか LINEマンガでは、JavaScriptのソースコードをもともと1つのファイルにバンドルしていました。しかしサービスが成長するにつれて、ページ数が増え仕様も複雑になり、バンドル後のファイルサイズがどんどん大きくなってきました。将来を考えると1つにバンドルするのはやはり望ましくないと考え、コード分割の実装を始めました。一般的な実装最初はreact-loadableのようなHOC（Hi
React Starter KitにみるWebフロントエンドに求められる機能と実装
Soichi Takamura2017-12-09
LINE Engineer
初めまして、IT戦略3チームでUIUXデザインと社内プロジェクトのTech Leadを担当している高村といいます。この記事では、React Starter Kitという汎用的なWebプロジェクトテンプレートの実装を参考にしながら、改めて、なぜWebフロントエンドは複雑なのか、その解決方法は何かを振り返ってみたいと思います。この記事をきっかけとして、実際に現場でツール選定を行うフロントエンド開発者の方だけでなく、普段「フロントエンドには時間をかけたくない」と思っているサーバサイド開発者やWebディレクターの方たちに、「だからフロントエンドの課題は収束しにくいんだな」「フロントエンドといっても範囲は広いから、目的やユースケースを絞ってツールを選定しよう」と感じていただければ幸いです。この記事はLINE Advent Calendar 2017の10日目の記事です。 Webフロントエンドの複雑さの背景「最近のWebフロントエンドは流れが早過ぎて追いつけない」「学習コストを割いても無駄にならないか心配」「未成熟なライブラリばかりで手をつける気になれない」という声を聞いて久しいです。思えばj
- frontend
UIにMetalが使えないかいろいろ試してみた話
Masaki Haga2017-12-08
LINE Engineer
こんにちは、LINEマンガiOSクライアント担当のMasaki Haga(@hagmas)と申します。この記事はLINE Advent Calendar 2017の9日目の記事です。 2014年になって初めて発表されたMetalですが、2017年になってさらに効率化、洗練され、VRのサポートも組み込まれたMetal2が発表されたり、Appleのさまざまなフレームワークの基幹部分にMetalが導入されていたりと、Metalへの注目がさらに高まりつつあります。そんなMetalに、みなさんは「Metalを触ってみたいけど、どこから、何から始めたらいいのかわからない」または「Metalに興味はあるんだけど、自分のアプリケーションにはいまいち関係なさそうだ」などと感じたことはないでしょうか。私が担当しているLINEマンガのようなWebアプリケーションのiOSクライアントでは、ほとんどの場合、ゲームのような複雑な3D描写も大きなデータを並列計算で処理していくような場面もないかと思われます。しかし、「ユーザーにWOWと言わせるようなアプリ体験ってなんだろう」と考えている時、Metalのパワフルな並
- frontend
- iOS
- GPGPU
- Metal
- tvOS