※この記事は2019年8月に取材・撮影した内容です 私たちが使う便利なアプリの数々は、“プログラミング言語”によって作られています。言語の種類は数え切れないほど存在していますが、「多くの人々に利用されているもの」となると、ごくわずか。優れたプログラミング言語を生み出せる人物は、世界的に見ても一握りなのです。 その数少ない人物のひとりが、日本にいます。プログラミング言語・Ruby（ルビー）の作者である、ソフトウェア技術者のまつもとゆきひろ（ @yukihiro_matz ）さんです。使い勝手の良さや生産性の高さから、まつもとさんの生み出したRubyは世界中で高い評価を受け、まつもとさん自身も世界中のコンピュータエンジニアから「Matz（マッツ）」の愛称で知られるようになりました。 では、まつもとさんは戦略的に、現在のキャリアを築き上げてきたのでしょうか。その答えは「NO」です。むしろ、「自分

この記事は コネヒト Advent Calendar 2019 2日目 の記事です。 はじめに 社内のSlackでURL短縮サービスが自社にあればよいなー、という呟きがあったので、昼休みに一人ハッカソンをしてみた時の話です。(※実運用はしていないです) 概要 https://s.hyiromori.com/ にアクセスするとURL短縮用の画面が表示されて https://s.hyiromori.com/[5文字の乱数] のようなURLを発行できるようなWebアプリを作りました。 ドメインが短くないと、あまり短縮された感じがないですが、まだ実験段階なのでご勘弁ください。 ソースは GitHub にあります。 技術スタック 使い慣れている serverless フレームワークを使って、作ってみました。 使用しているAWSのサービスは以下のようになります。 API Gateway Lambda

はじめに JavaScriptのコードを一括で変換したり修正したい場合、正規表現などを使い置換しますか？ シンプルなケースであればそれでも問題ないですが、複雑な変換であればASTベースでコードを自在に変換できる「jscodeshift」が便利です。 jscodeshiftを利用すると、以下のようなことができます。 例) functionで書かれた関数をアロー関数に一括で変換 target/arrow-function/index.js const fn = function() { console.log("foo"); }.bind(this); [1, 2, 3].map(function(v) { return v * v; }); Promise.resolve() .then(function() { console.log("foo"); }) .then(function()

Gatsby.jsって？ この記事はGatsby.js Advent Calendar 2019 1日目の記事です。 2日目の記事は@aimofさんのJSの文法すら怪しいフロント初心者がblog用のgatsby starter（っぽいもの）を自作・公開してみたです!! Gatsby.jsはReactで作られた静的サイトジェネレーターです。内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理を簡単に行うことができます。 静的サイトジェネレーターが何かと言うと、何かしらの言語で書かれたソースから、静的なHTML/CSS & JavaScriptを生成するツールのことを言います。 今現在どの静的サイトジェネレーターが人気かというのを一覧で見れるStaticGenサイトもあります。 Starの数を見るとあのnuxtよりも多いんですよね、日本で使っている方をあ

フロントエンドエンジニアのid:ninjinkunです。この記事は一休.comアドベントカレンダーの1日目の記事です。 一休.coｍレストランの管理画面リニューアルプロジェクトにおいて、CSSフレームワークのBulmaを導入しました。結論としては、採用して良かったと思っています。 このエントリではBulmaを選定した理由と、採用後に見えたPros / Consについて述べたいと思います。 なお今回リニューアルした一休.comレストランの管理画面の概要は以下の通りです。 レストラン店舗向けの管理画面 店舗の方と一休スタッフの両方が使う DAUは数千の規模 主な用途は在庫の管理と、プラン（コース）や席の管理 現在は店舗を限定してリリース済み 具体的には以下のような画面で構成されています。 UIフレームワークは必要か？ まずそもそもUIフレームワークは必要かという議論があります。 今回のプロジェ

SREチームの長田です。 この記事はTech Kayac Advent Calendar Migration Track 1日目の記事です。 今回はLobiで使用していたMongoDBをMySQLに移行したはなしです。 MongoDBを何に使っていたか DAUなどのKPIレポートや、サービスの状況を把握するための各種集計結果を保存するために使っていました。 サービス開始直後はこれらの数字を色々と試行錯誤しながら追加したり、減らしたりしていました。 頻繁な追加削除があるデータ構造を保存するために、スキーマレスなデータベースであるMongoDBはちょうどよかったようです。 (当時スキーマレスデータベースが流行っていたというのもあるでしょう) なぜ移行したのか MongoDBに保存されたドキュメントは、スキーマ管理がされていませんでした。 スキーマレスであることをいいことに、その時時によって様々

こんにちは！本エントリは「AWS Amplify Advent Calendar 2019」の記念すべき第1日目です！ このエントリではAWS Amplifyを使ってユーザ認証機能付きのリアルタイムチャットアプリを30分で作ってみたいと思います。 AWS Amplifyとは AWS Amplify（以下Amplify）を初めて耳にする方、ご安心ください！ Amplifyはスケールするモバイルアプリおよびウェブアプリを最速で構築するためのサービス／ツール群です。 aws.amazon.com Amplifyは API機能の簡単な追加 認証機能の簡単な追加 画像／文字認識などのAI機能の簡単な追加 オフラインのデータ同期 これらを利用するためのライブラリやUIコンポーネント などを含んでおり、モバイルアプリやウェブアプリを開発して実際にサービスを提供するのに必要なフロントエンド／バックエンドを

ウェブブラウザを使ったVJ活動 2019/11/30 Audiovisual Workshop with TOPLAP Japan at 甲南女子大学 hitode909 はじめに、の前に いまのうちにGoogle Chromeをダウンロード、インストールしておいてください ワークショップ教材はGoogle Chromeで動作確認している Google Chrome ウェブブラウザ はじめに はじめに(15分) 今日のワークショップでやること VJについて、ブラウザについて やってみよう(30分x3で1.5時間) HTMLを書こう VJとして適した形のHTMLを作ろう コントローラをくっつけて操作できるようにしよう おわりに(15分) 今後の進め方 参考になる情報について 自己紹介 hitode909 株式会社はてな アプリケーションエンジニア はてなブログ(ブログサービス)やGigaVi

JSConfJP 2019 で使用したスライド (に次回の公演情報を追加したもの) です。 https://jsconf.jp/

こんにちは。ナビタイムジャパン Android/iOSアプリ開発担当の KSK です。 最近流行りのFlutterの流れに乗ってみたい一心で Flutterをプロダクションに導入したお話をしたいと思います。 はじめに FlutterとはGoogle製のクロスプラットフォームのアプリ開発フレームワークです。2018年12月に正式版として1.0がリリースされて以降、徐々にプロダクションに採用する企業が増えてきました。弊社でも2019年に入り、複数のプロダクトにFlutterを採用・リリースしましたので、その経緯などをご紹介します。 どのプロダクトに採用したのか？ 新規アプリケーションで採用しました。みなさんがご存知の「NAVITIME」や「乗換NAVITIME」は既に大規模なネイティブアプリが運用されており、これをFlutterで置き換える選択肢は今のところありません。既存のアプリをFlutt

前書き フロントエンドエンジニアの松原(@simezi9)です。 先日10月30日にクラウドワークスさんをお借りして実施したVue.jsの設計勉強会である、Vue.jsアーキテクチャリング勉強会 にて、 BASEの現在のVueコンポーネントの設計に関して登壇してお話してきました。 全体の資料はこちらです もともとBASEではVue.js+TSを採用した大規模なシステムのリニューアルプロジェクトが2018年からスタートしていました。それにあたっての大まかなフロントエンドの構築方針は以前もblogや外部登壇で発表していました。 次世代の管理画面を作るフロントエンドの取り組み - BASE開発チームブログ 次の5年を支えるVue.js製UIコンポーネントライブラリを育てる これまでの発表では大枠の技術スタックやワークフローの話が多かったですが、 今回はVueコンポーネントの設計が勉強会の主眼にあ

どうも、まさとらん（@0310lan）です！ 今回は、普段からよく利用しているSlackを使って飛行機の料金（最安値）を手軽にチェックできるツールを作成していきましょう！ いちいちブラウザを起動してWebサイトを訪問する必要がなく、Slackから簡単なコマンドを入力するだけで最安値を即座に確認できるようになるので便利です。カスタマイズ性も非常に高く、自分の好きなように情報を制御できるようになります。 飛行機の料金を調べるのが面倒だと感じている人は特にオススメなので、ぜひ参考にしてみてください！ ■どうやって飛行機のチケット料金を調べるのか？ 今回の重要なポイントは、飛行機の料金をどのように取得するか？ ということになります。 また、個人的にはできるだけ以下の要素も含めたい… さまざまな航空会社から比較・検討したい 調べたときの最安値を知りたい 国内だけでなく海外便の料金も調べたい 簡単にプ

Facebook、社内のデフォルト開発環境にVisual Studio Codeの採用を表明。マイクロソフトと協力してリモート開発機能の強化も推進 Facebookは社内のデフォルト開発環境として、マイクロソフトがオープンソースで開発しているコードエディタ「Visual Studio Code」の採用を発表。あわせて、マイクロソフトと協力してVisual Studio Codeのリモート開発機能について強化を推進していくことも明らかにしました。 下記はFacebookのブログ「Facebook and Microsoft Partnering on Remote Development」から。 We’re making Visual Studio Code the default development environment at Facebook and teaming with Mi

[レベル: 上級] この記事では、Chrome Dev Summit 2019 の PWA 関連セッションのハイライトをレポートします。 僕はデベロッパーではないので技術的な部分、特にコーディングについては言及しません。 テクニカルな内容は記事最後で紹介する動画でご確認ください。 では、PWA の最新事情を一緒に見ていきましょう！ ウェブプラットフォームとしての PWA 新興国のような通信環境が整っていない国々でもウェブを利用しやすくする。 スマートフォンや PC などあらゆるデバイスでウェブにアクセスできるようにする。 ネイティブアプリと同等な機能をウェブアプリでも提供することが重要。 airbnb 事例 airbnb はネイティブアプリから PWA サイトでのサービス提供に移行した。 その結果、初回訪問ユーザーの 65 % はウェブ経由になった。 成果: パフォーマンス（読み込み速度）

AWS Lambda now supports four failure-handling features for processing Kinesis and DynamoDB streams: Bisect on Function Error, Maximum Record Age, Maximum Retry Attempts, and Destination on Failure. These new features allow you to customize responses to data processing failures and build more resilient stream processing applications. Lambda processes data records from Kinesis and DynamoDB streams i

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

はじめに 私はこれまでにアルバイトやTA (Teaching Assistant)を通して小学生、中学生、高校生、大学生にプログラミング教育をしてきました。また、予備校に通って一浪して大学に入学したという経歴もあります。これらの経験から、「教育とはどうすべきか」「学ぶのに必要なものは何か」「プログラミング学習の特別な点はなにか」などを自分なりに悟りました。 本記事ではこれらのことを踏まえながら、「プログラミングが上達しない人の傾向」や「よく陥るエラー」などを紹介しつつ、プログラミング教育者がすべきことのヒントを示せたらいいかなと思います。 ※本記事はプログラミング教育のハウツーをまとめたものではありません。 プログラミングが上達しない人の傾向 検索力が低い、検索の仕方を知らない、知ろうとしない 調べる癖がない、分からなかったことを分からないままにしていても生きていられる 説明文を読まない、

チームラボはアートだけでなくWebやアプリの受託開発も行っています。 そんなチームラボのフロントエンドチームで使用しているアーキテクチャを実例を交えてご紹介します。 Frontend Conference Fukuoka 2019 にて登壇しました。 https://frontend-conf.fukuoka.jp/sessions#a-3

目次 Flutterとは MacにFlutterをインストール Android 開発環境の準備 iOS 開発環境の準備 Flutterサンプルアプリの実行 エラーの対処方法 Flutterを使ってみる 春にWebエンジニアデビューをしてから約半年が経ちました。 そしてひょんなことからFlutterを勉強してみることになりました！ 調べてみるとFlutter For Webがででているようなので、数年後はもしかするとWebの世界でも流行っているかもしれないので今のうちに勉強していても損はないはず！ そんなこんなで今回はFlutterの第1回目の投稿となります！ 開発環境 OS:　MacOS Mojave 10.14.6 Flutter: 　1.9.1 1. Flutterとは 最近のアプリ開発ではほとんどがAndroidとiOSの両方でリリースをすることが多いと思います。 その場合、フレーム