2019/01/12 に #kyotojs で発表したスライドです
カウンターアプリケーションの開発を通じてVue.jsによるプログラミングとVuexによる状態管理を学びます。 ボタンを押したら数字が増えていくアプリケーションです。 Agenda Part 1 Vueアプリケーションの開発(10min) プロジェクトの作成 Vueコンポーネント(MyCounter.vue)の作成 Part 2 Vuexを活用したVueアプリケーションの開発(10min) Vuexのインストール Storeの作成 Vueコンポーネント(MyCounter.vue)の修正 Part 3 非同期処理(Actions)の実装(10min) Storeの修正 Vueコンポーネント(MyCounter.vue)の修正 Part 1 Vueアプリケーションの開発(10min) プロジェクトの作成 プロジェクトの雛形を作成するためにvue-cliをインストールします。 npm insta
このnoteをすべてのインターネット探索者(Internet Explorer)達に捧げる。 2018年12月31日、新卒入社して3年半勤めた会社を辞めた。東京の八重洲にある、フリーペーパーやWebサービスを作る会社で働いていた。いわゆる「文系プログラマー」というやつで、文系学部を卒業後、会社に入ってからプログラミングを覚えた。現在は退職してフリーランスになり、個人で開発しつつ、ずっと漫画を描いている。 3年半のあいだ、大きく分けて2つの失敗をした。 1. プログラミング入門の仕方に失敗した 2. プログラミングを覚えてから何をすればいいかわからなかった 前者の失敗の結果、プログラミングを投げ出して京都に逃亡した。後者の失敗では精神を病み、3ヶ月休職をすることになった。前者は笑い話だが、後者は人生に暗い影しか落とさない。これからプログラミングを始めようと考えている人には同じような失敗を避け
今、注目を集めながら、理解が困難なバズワードの1つに「サーバレス(アーキテクチャ)」がある。文字通りに解釈するなら、コンピューティング・システムでありながらサーバが存在しない構造だ。それはどんな構造なのだろうか。 ブルックス氏は、「コンピューティング・システムである以上、サーバは確かに存在します。ユーザーにとっては隠蔽化され、見えない存在となっているだけです。その意味で、厳密には正しい言葉ではなく、それが誤解を招く原因となっています」と説明する。 このサーバレスはFaaS(Function as a Service)と言い換えられるという。FはFunctionを意味し、SaaSなどと同様、必要に応じて機能を利用するコンピューティング/サービス形態ということだ。 「つまり、サーバレスはサーバやDB、APIなど、ITインフラにまつわる一切をひとまとめにしたサービスです。機能を利用するためにほか
改めて、サーバレスとは まず、サーバレスという概念について確認しておこう。 サーバレスはその言葉の通り「サーバを持たない」という考えが基底にある。サーバを持たないことでサーバの管理を不要とし、高次のレイヤーのみに集中するシステム開発を実現するという概念である。これは、クラウドの特性をフル活用したクラウドネイティブな考え方である。 現在、サーバレスにはBaaS(Backend as a Service)と FaaS(Function as a Service)の2つの側面がある。 BaaSでは、アプリケーションに必要なさまざまなバックエンドの機能が、REST APIやクライアントライブラリを通じて提供される、APIベースのサービスである。FaaSは任意のアプリケーションコードをイベント駆動で実行できる、イベント駆動のコンピューティングサービスである。コンピューティングサービスの中でも、最上位
はじめに Eight事業部のサーバサイドエンジニアをしている太田です。 私の行っている新機能の設計の一環で、ユーザイベントの連携機能をサーバレスで作ることを検討しています。 サーバレスという言葉はエンジニアの間では一般的になってきました。しかし仕事の大部分をサーバレス開発に当てているエンジニアはまだまだ少ないように思います。自分もサーバレスに関する知識はまだまだだったので、このタイミングでまとまってインプットしました。 この記事では、サーバレスな設計をどのように行ったかを簡単にまとめていきます。 設計 機能要件 ユーザイベント連携の要件は以下のようになります。 名刺アプリEight(以降Eight)からイベント(名刺の取り込み、更新など)を取得する。 取得したイベントを永続化できるデータストアに保存する。 データストアに保存し、更に後続の処理を走らせる。(※今回の記事では割愛します。) 取
クラウド上でアプリケーションを構築する新しい手法として「サーバーレスアーキテクチャ」が急速に注目を集めています。しかし一方で、サーバーレスアーキテクチャを採用することで得られる本質的なメリットはなにか、そもそもサーバーレスアーキテクチャとはなにを指すのか、などについてはまだ識者の間でも議論されていることです。 10月24日に都内で開催されたイベント「QCon Tokyo 2016」の伊藤直也氏のセッション「Serverless Architecture」は、こうしたサーバーレスアーキテクチャの本質について大きな示唆をもたらす内容でした。この記事では、その内容をダイジェストで紹介します。 (本記事は前編、中編、後編に分かれています。いまお読みの記事は前編です。) Serverless Architecture 一休 CTO 伊藤直也氏。 先に結論を言ってしまうと、サーバーレスアーキテクチャと
初めに IT関係の仕事をしていると、サーバーレスもしくはサーバーレスアーキテクチャって単語を耳にする事が増えてきたかと思います。「なんとか + レス」って言葉、よく聞きますね。例えば、ダイエット流行りの昨今、「シュガーレス(砂糖なし)」とか、日本は遅れていますが「キャッシュレス化社会(現金使用しない)」など。枚挙に暇がないですね。サーバーレスもシュガーレスやキャッシュレスのようにServer + Lessなので、サーバーのないシステム?どうやって動くの?ともやもやしてる人が多いでしょう。 私も疑問に思っていたので、今更ながら、実際にサーバーレスを触ってみました。触ってみたところ、今までのWebシステムの考え方をひっくり返すくらい、システム構成が異なるのものでした。さて、この記事を読んでもらうことで、ひとまず「サーバーレスって何?」、サーバーレスとは「何を目的としているか?」のもやもやが解消
2016年あたりから注目されるようになった技術ワードにサーバレスがあります。サーバレスアーキテクチャといった単語は一度は見聞きしたことがあるのではないでしょうか。 サーバレスアーキテクチャはAPIと相性が良いと言われていますが、そもそもサーバレスとは何かを紹介します。 実行時以外には存在しない究極のクラウド クラウドコンピュータの世界では、サーバと呼べる存在は仮想化されており、自由に立ち上げたり落としたりできます。とは言え、サーバ(インスタンスとも言う)を立ち上げている間は料金がかかります。そのため、不用意にサーバを立ち上げすぎないように注意しなければなりません。そのサーバはCPUの質や量、GPU、ストレージなどによって金額が変わります。つまり仮想ではあるものの、リソースを確保することに対して料金が発生します。 対してサーバレスはそのサーバ自体が存在しません。もっと単純な、関数をクラウド上
「サーバーレスアーキテクチャ」というシステム構築の手法が、システム開発の現場で取り入れられ始めている。文字通りサーバーを不要とするシステム構成であり、その利点もある一方、システム設計が複雑になるという見落とされがちな欠点がある。 「サーバーがあることによる悩み」から開発者を開放する、サーバーレスアーキテクチャ 典型的なITシステムの開発は、サーバー、OS、ミドルウェアを用意するところから始まる。これらを適切に設定、保守・運用するためには、少なくない工数と費用が発生する。開発者はシステムの中でも特にアプリケーションの実装にできるだけ注力したいところだが、「サーバーがあることによる悩み」は、開発者にとって常に悩みの種であった。 この悩みから開発者を開放しうる実装方法として、「サーバーレスアーキテクチャ」という考え方がある[1]。 サーバーレスアーキテクチャとは、読んで字のごとく「サーバーのない
アプリケーションモダナイゼーションにおける2大トレンドといえば、コンテナとサーバーレスだ。コンテナであれば高い可搬性と再利用性、自由度・柔軟性の高さ、標準化が進んでいることなどのメリットがあるものの、抽象度が低く管理範囲が広いというデメリットがある。一方のサーバーレスは使った分だけの課金やインフラ管理の省力化、インスタンスの自動スケールなどのメリットがある反面、自由度や柔軟性の低さ、ベンダーロックインなどのデメリットがある。ではこれらの技術をどのように選択していくと、より良いアプリケーションモダナイゼーションが実現するのか、その勘所とともに、さらに少し先の未来について、日本マイクロソフト Azureテクノロジーソリューションプロフェッショナルの川崎庸市氏が解説した。 講演資料:コンテナ&サーバーレス:トレンドの考察と少し先の未来の展望 日本マイクロソフト株式会社 Azureテクノロジーソリ
サーバーレスがアプリケーションにもたらす本当のメリットとは?「サーバーレスのポテンシャルとシステム表現」 #devsumi 「そのサーバーレス、本当に意味あるの?」 AWS re:Invent 2014で、AWS Lambdaが発表されてから丸3年が経過。サーバーレスという単語もすっかりこの界隈では定着した感はあります。 ですが、実際の開発・運用ノウハウについては、まだまだ試行錯誤が続いているのが現状じゃないでしょうか。ぶっちゃけ、既存アプリケーションのEC2をLambdaに置き換えるだけではほとんどメリット無いでしょ、という感触は、ある程度サーバーレスアプリケーションをゴリゴリ作っている人であれば、よく感じていることだと思います。 そんななか今回受講したこのデブサミのセッションでは、新しい観点でサーバーレスがもたらす恩恵やメリットを捉えることができてごっつ新鮮だったので、その模様をお届け
サーバーレスアーキテクチャ、AWS LambdaやAzure Functions、Google Cloud FunctionsなどのクラウドのFunction-as-a-Service(FaaS)を利用した、サーバを使わずにアプリケーションを構築する手法が注目を集めており、導入した事例も見聞きするようになってきました。 しかし、サーバレスアーキテクチャの特性や、それによって得ることのできるメリットはなにかということはあまり議論されていません。 また、これまでと全く異なるアーキテクチャ上でどのようにアプリケーションを構築するか、といった情報はまだまだ多くありません。 今回は、実際にAWSを用いたサーバレスアーキテクチャでアプリケーションを構築した際に得られた知見をもとに、私の考えるサーバレスアーキテクチャのメリット、アプリケーションを構築するにあたって気をつけるべきことなどについてお伝えしま
システム部の髙橋です。 Laravel Passportで、Web APIの認証を実装するチュートリアルです。 このチュートリアルでは、最終的に以下のようなAPI認証を実装することを目的としています。 ① EmailとPasswordでWebアプリにログインする ② 管理画面で自身に紐づくTokenを発行、確認する ③ Tokenをリクエストヘッダーに含め、Web APIを利用する 今回は、初期設定編と題して、まずLaravel Passportの初期設定の方法を紹介します。 Laravel Passportとは Laravel passportは、LaravelによるWeb APIの認証の実装をサポートするライブラリです。 Laravel上で、OAuth2によるWeb APIの認証が実装できるようになります。 特徴としては、複数の認証フローをサポートすることなどがあげられます。 初めにや
Laravelでアプリケーションを構築した経験がある人ならログイン認証機能を利用することでLaravelへのユーザのアクセス制限を行えることは知っているかと思います。しかし、Laravelの外側のアプリケーションからアクセス制限のかかっているLaravel内のリソースにアクセスするためにはどうしたらいいのでしょう。そんな疑問を解決してくれるのがLaravel Passportです。 Laravel Passportを使用するとLaravel上でOAuth2.0に沿った形でAPIの認証機能を短時間で実装することができます。 OAuth2.0に沿った形でAPIの認証機能 といってもそれが何かわからないという人が大半だと思います。簡単に言えばLaravelの外側にあるアプリケーションからアクセスしたいリソースに対してアクセストークン(文字列)を使って管理するための仕組みです。 アクセス制限の行わ
LaravelをSPAやスマホアプリのバックエンドとして使いたい時はAPIを実装することになります。 ログイン機能付きシステムの場合はAPIで認証する必要も出てきます。 LaravelにはAPI認証を実装するためのPassportというパッケージが公式で用意されています。 https://readouble.com/laravel/5.6/ja/passport.html これを使ったごくシンプルなデモをやってみたのですが、やや詰まったので記事にしておきます。 公式ドキュメント以外では以下の記事を参考にしました。 https://blog.hinaloe.net/2016/09/15/try-passport-laravel-5-3/ http://www.dn-web64.com/archives/web/laravel_passport/ デモ手順Laravelプロジェクトの環境構築は
バックエンドにLaravelを使用しSPAを作成したい場合、認証の実装に悩んで色々調べたのでまとめます。 目次 認証の実装パターンtymondesigns/jwt-auth懸念点Laravel Passportapi_tokenの利用従来のセッション方式の利用まとめ 認証の実装パターン tymondesigns/jwt-auth Laravel Passport api_tokenの利用 従来のセッション方式の利用 tymondesigns/jwt-auth バック、フロントともに簡単に使える。 Laravel公式ではないが、初心者向けのチュートリアルでの事例が多いので迷うことはないと思う。 ドキュメントは少し情報が少ないので、カスタマイズは難しいかもしれない。 このライブラリではなくJWTを利用する上で運用上リスクもあるので、興味ある人は以下のブログを参照。 JWT認証、便利やん? -
ハイクラス求人TOPIT記事一覧Firebase入門 フリマアプリを作りながら、認証・Firestore・Cloud Functionsの使い方を学ぼう! Firebase入門 フリマアプリを作りながら、認証・Firestore・Cloud Functionsの使い方を学ぼう! Firebaseでは、バックエンドやインフラに精通したメンバーがいなくても、モバイルやWebフロントの開発に集中できます。Authentication、Firestore、Cloud Functions、さらにセキュリティルールまで、クックパッドの岸本卓(@_sgr_ksmt)さんが、実践的に解説します。 Firebaseをご存じでしょうか? Firebaseを利用したことはありますか? 今回は「Firebaseをこれから使ってみたい!」「絶賛使っているけど、初めてでどう開発したらいいかよく分からない……」という方
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く