サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
mae.chab.in
2018年12月4日にFlutterの初のメジャーバージョンとなる「Flutter 1.0」がリリースされました。FlutterはiOSとAndroidのネイティブアプリを開発するためのオープンソースのSDKです。Flutterにはプログラミング言語の「Dart」が含まれていて、Flutterでの開発もDartを使用します。Flutter、Dart共にGoogleが中心となって開発しています。私の周りでは意外と評判が良いので、ちょうどv1.0がリリースされたところだし、どんなものか試してみることにしました。まずは開発環境を構築して、デモアプリをシミュレーターで表示するところまで試してみました。内容をまとめたので、ぜひ参考にしてみてください。 目次 はじめに Flutter SDKをインストールする 設定に必要なツールを確認する Android Studioの設定 Xcodeの設定 Flut
2019年1月25日に Jest の最新メジャーバージョンとなる Jest 24 がリリースされました。これまでで最大のメジャーリリースと言われていた Jest 23 から約 8 ヵ月ぶりのメジャーリリースです。ついに TypeScript に対応しました。今回のリリースはやはりこれに尽きると個人的には思っています。Jest の公式ブログのリリースに関する投稿『Jest 24: 💅 Refreshing, Polished, TypeScript-friendly』を日本語に訳しました。細かい内容については、当記事でぜひチェックしてみてください。 Jest 24: 💅 Refreshing, Polished, TypeScript-friendly January 25, 2019 Simen Bekkhus Today we are happy to announce the ne
先日当ブログで、『Angular + Firebase事始め – Firestoreのデータを取得し、Firebase Hostingにデプロイするまで』という記事を投稿しました。この記事では、開発環境の構築方法、AngularとFirebase(Firestore)との連携方法、デプロイ方法など主に開発の前段階の内容を扱いました。今回は少し先に進んで、実際にデータを操作する方法を紹介したいと思います。AngularFire (AngularFire2) というAngular公式のFirebase用ライブラリを使ってCRUDを行う処理をまとめてみました。 目次 はじめに AngularFireを使う準備 Firestoreのデータを扱えるようにする データを参照する(Read) データを生成する(Create) データを更新する(Update) データを削除する(Delete) CRUDを
2018年10月23日(火)に React のマイナーリリースとなる React v16.6.0 がリリースされました。React.memo()、React.lazy()、contextType といった即戦力になりそうな機能が追加されましたが、リリースから約 1 週間後に React Hooks という大きなインパクトのある機能が発表されたことにより、忘れ去れてしまった感があります。私自身、長期休暇を取っていたこともあり、リリースからだいぶ日が空いてしまいましたが、React の公式ブログのリリースノート記事 React v16.6.0: lazy, memo and contextType を日本語に訳してみました。ぜひ参考にどうぞ。 React v16.6.0: lazy, memo and contextType October 23, 2018 by Sebastian Mark
昨年から Reactl界隈で「Render Props」という言葉をよく目にするようになりました。Render Props は、React のコンポーネントを再利用可能な方法でその状態や振る舞いをカプセル化するためのパターンのひとつです。同様の目的でよく使われるパターンに Higher-Order Components (HOC) がありますが、Render Props は HOC の問題を解決したもので、今後主抽象化パターンの本流になりうると言われています。この Render Props を全然追いきれていなかったので、今回 React の公式ドキュメントの『Render Props』 の部分を日本語に訳してみました。 The term “render prop” refers to a simple technique for sharing code between React co
そろそろGraphQLを本格的に勉強してみようと思って、いろいろ試しているところです。その中で、GraphQL用のデータベースにMongoDBを使ったパターンを試したくて、今回MongoDBについても使い方など改めてまとめてみることにしました。環境構築方法、Mongo ShellやNode.js DriverでのCRUDの方法などをまとめてみました。 目次 はじめに MongoDBの環境構築 Mongo ShellでMongoDBを操作する Mongo ShellでCRUD操作を行う Node.js DriverでMongoDBを操作する Node.js DriverでCRUD操作を行う まとめ はじめに MongoDBは、開発とスケーリングを容易にするために設計されたオープンソースのドキュメント指向データベースです。Key-Valueストア(KVS)を使用した、いわゆるNoSQLデータベ
2018年8月11日に新しいメジャーバージョンとなるVue CLI 3.0がリリースされました。Vue CLI 3では、公式にTypeScriptをサポートし、 TypeScriptを利用するプロジェクトの生成に対応しました。これにより、TypeScriptでVueを気軽に試せるようになったということで、今回ちょっとどんなものか試してみることにしました。試した中でポイントとなりそうな部分をまとめてみたので紹介します。なお、私は普段はAngularでTypeScriptを書いているため、TypeScriptのクラス構文を使った説明になっています(クラス構文を使わなくても、TypeScriptでvue.jsを書くことはできます)。 目次 はじめに – Vue CLI + TypeScript TypeScript + Vue サンプル Vue CLIでTypeScriptプロジェクトを生成する
2018年5月4日にAngular 6がリリースされました。Angular 6は、Angular自体の機能というよりは、Angularをいかに使ってもらえるかというところに重点が置かれたリリース内容でした。その中の1つに、Angular Elementsという、Angularの利用を促進しそうな機能が新たに追加されました。詳細は記事内に書きますが、Angularで構築したコンポーネントを手軽に別のWebサイトで通常のHTMLのように扱えるCustom Elementsに変換する機能です。似たようなことがReactやVueでは既にできていて、Angularはずっと苦手としていた部分です。今回自分の勉強がてら、Angular Elementsの使い方をまとめてみました。参考にしてもらえればと思います。 目次 はじめに – Angular Elements とは Angular Elements
今回のこのWordPressで作っているブログにturbolinksを導入しました。Googleのモバイルファーストインデックスなども始まり、以前よりもサイトのパフォーマンスの重要性が高まってきていると言うこともあっての導入です。turbolinksはRuby on Railsのイメージが強いかと思いますが、JavaScript版もリリースされていて、どんなサイトにも導入が可能です。フロントエンドエンジニアを名乗っている以上、ツールがなんであれ使いこなしてなんぼだと思うので、このブログを使って試行錯誤しながらいろいろ試しました。その中で実装のポイントとなると思ったTipsをいくつか紹介したいと思います。 はじめに – turbolinksとはturbolinksは、Ruby on Rails 4からデフォルトの機能となったGemで、Railsアプリのパフォーマンスを向上させるためのツールと
当初の予定より約1ヶ月ほど遅れて5月4日に待望のメージャーリリース版となるAngular 6がリリースされました。リリース内容は、Angularの公式ブログやChangelogなどで確認することができます。特に公式ブログの記事は、全体をAngular 6の全体を把握するにはちょうどよいかと思います。そのうちAngular Japan User Groupの方々が訳してくれると思いますが、自分もしっかり内容を把握しておきたかったので翻訳することにしました。翻訳したのは、Angular公式ブログの記事『Version 6 of Angular Now Available』です。ぜひ参考にしていただけたらと思います。 Version 6 of Angular Now Available – Angular 6がついに利用できるようになりましたThe 6.0.0 release of Angula
5月1日のThe Github blogで「Custom domains on GitHub Pages gain support for HTTPS」という記事が投稿されました。何の話かというと独自ドメインを設定したGitHub PagesがついにHTTPSに対応したということです。セキュアなWebサイトが求められるようになってきていますし、大変喜ばしいニュースです。GitHub Pagesの利用価値がより一層高まったと言えます。私自身もちょうど放置気味のドメインがあったので、自分のGitHub Pagesにドメインを設定し、HTTPS化することにしました。簡単ではありますが、設定方法などを紹介いたします。参考にしてみてください。 はじめに – GitHub Pagesとは独自ドメインを設定したGitHub PagesがHTTPSに対応GitHub Pagesは、GitHubのリポジトリ
その他にReactにenzymeを連携させるためのenzyme-adapter-react-16や、Jestのスナップショットを行うためのreact-test-renderer、Jestでenzyme-matchersを使用するためのjest-enzymeなどが状況により必要となります。 なお、create-react-appを使う場合は、デフォルトでJestが組み込まれており、特にBabelなどの設定を行う必要はありません。enzymeについては、別途インストールが必要です。 JestについてJestはテスティングフレームワークです。以下のような特徴があります。 JestはJasmine 2をベースに作られていて、JasmineのMatcherがそのまま使えます。Facebook製でReactのイメージが強いですが、他のフレームワークなどでも普通に使えます。Node.js上のjsdomで
3月29日に待望のReact v16.3.0がリリースされました。前回のv16.2.0のリリースから約5ヶ月が経ちます。今回の目玉機能はcontext APIと言われていましたが、ライフサイクルメソッドの変更や、ref周りの機能強化などマイナーバージョンアップにしては大きなリリース内容となっています。しっかり把握するためにReactの公式ブログの記事「React v16.3.0: New lifecycles and context API」を訳してみました。 React v16.3.0: New lifecycles and context APIMarch 29, 2018 by Brian Vaughn A few days ago, we wrote a post about upcoming changes to our legacy lifecycle methods, inc
現在2018年3月ですが、そろそろReact v16.3がリリースされると言われています。React v16.3の目玉機能はcontext APIと言われています。そんな中、私は最近はAngularばかり書いていて、Reactの最新情報をあまり追えていません。React v16.3がリリースされる前に、React v16.2を押さえておこうと思って、今更ですがReact v16.2のリリース内容についてのReactの公式ブログの記事を翻訳してみました。React v16.2の目玉機能は何と言ってもFragmentsです。Reactの書き方を大きく改善してくれる機能です。ぜひ参考にしてみてください。 React v16.2.0: Improved Support for FragmentsNovember 28, 2017 by Clement Hoang React 16.2 is now
前回の記事『フロントエンドの2017年の振り返りと2018年の展望』で触れましたが、今年流行るのではと言われているツールのひとつに「Parcel」が挙げられます。いわゆるビルドツール(バンドラー)です。「設定ファイルがいらない」という強烈なコンセプトを打ち出し、フロントエンド界に旋風を巻き起こしつつあります。私も実際に使ってみましたが、とても使い勝手が良く、使えるツールだと思いました。今回は、このParcelについてざっくりですが、使い方などを紹介したいと思います。 はじめに – ビルドツールの現状まずビルドツールの現状について振り返っておきます。ビルドツールと言えば、様々なものが出回っていると思いますが、やはり元祖と言えるのが魔法の杖と呼ばれたBrowserifyでしょう。require()で読み込むNode.jsのモジュールをブラウザでも読み込めるようにし、さらにモジュールの依存関係を
2017年9月26日(火)にReactの最新バージョンとなるReact v16がリリースされました。前回のv15のリリースが2016年4月7日だったので、実に1年半ぶりのメジャーバージョンアップとなります。「Fiber」として開発されていた新しいコアアーキテクチャーが採用されたことでしょう。v16ではそれほどFiberによる劇的な変化はないようですが、今後Reactの機能を強化していく上でFiberは大きな力を発揮するとのことです。今回、Reactの公式ブログのReact v16のリリースについて書かれた投稿(React v16.0 – React Blog)を日本語に訳してみました。v15から大きな変更はありませんが、それなりに変更点はあります。当記事でぜひ確認してみてください。 React v16.0September 26, 2017 by Andrew Clark We’re ex
2017年7月24日に待望のReact 16のβ版(ベータ版)が公開テスト用として公開されました🎉。それに合わせてReactのGitHubのリポジトリでも専用のissue(#10249)が立てられました。そこにβ版のリリース内容について詳しい記述がありましたので、日本語に訳してみました。来たるReact 16の正式リリースに備えて、参考にしてもらえればと思います。 Getting Started: はじめにInstallation Instructions: インストール手順The beta has been published to NPM with the tag “next”. Regular NPM installs will continue to use the 15.6 release. To install the beta use: β版は”next”タグがついた状態で
Angularでは、Jasmine、Angular testing utilities、Karma、Protractorなどが推奨されるテストツールとなっています。Jasmineはテストフレームワークと言われるもので、アプリケーションのテストに必要な機能を備えています。Jasmineは、テストの実行環境から、アサーション、モックやスパイなど豊富な機能を備えているのが特徴でもあります。個人的にAngularを使うことになって、同時にテストを書く際にこのJasmineを使うことになりました。今回の記事では、テストを書く際によく使われるアサーションのMatcher(テストの評価条件を定義するメソッド)について使い方をまとめてみました。よかったら参考にしてみてください。 JasmineのMatchers一覧Matcherは、テストの評価条件を定義するメソッドです。expect()メソッドにテストす
Angularを勉強していると、至る所でTypeScriptの知識が必要になってきます。ということで、TypeScriptの公式ドキュメントにお世話になる機会も増えてきています。前回はClassの説明ページを日本語に訳しましたが、今回はDecoratorの説明ページ(Decorators・TypeScript)を日本語に訳しました。Angularでは、単なるクラスをAngularで使えるコンポーネントとしてその役割を担わせる時などにデコレータを使用したりします。けっこう大事な部分でもあるので、日本語に翻訳することにしました。ぜひ参考にしてもらえればと思います。 Introduction: はじめにWith the introduction of Classes in TypeScript and ES6, there now exist certain scenarios that req
Angularではアプリケーションを構築する際に使用する言語としてTypeScriptが主流となっています。そしてAngularでは至る所でTypeScriptのclassを使うことが求められます。ES2015にもclassがありますが、実際にTypeScriptでclassを書いてみると、ES2015のclassの感覚では書けないことがわかりました。C#やJavaのclassに近いという話ではありますが、念のためTypeScriptのclassがどんなものか把握するために、TypeScriptの公式ドキュメントの「classの部分(Classes・TypeScript)」をしっかり読んでみようと思い、今回日本語に翻訳してみました。 Introduction: 始めにTraditional JavaScript uses functions and prototype-based inhe
私はReactが好きで、Reactを使ってWebアプリを開発することが多いんですが、これからAngularを書くことになりまして、Angularも覚える必要が出てきました。Angularを勉強するに当たって、やはり公式ドキュメントが大変役に立ちます。その中で「Architecture Overview」のページは、ちゃんと読めばAngularの理解がかなり深まるようになっています。これからAngularを勉強しようと思っている方は、まずこのArchitecture Overviewを読まれることをオススメします。今回日本語に訳してみましたので、ぜひ参考にしてみてください。 Architecture Overview – アーキテクチャ概要Angular is a framework for building client applications in HTML and either Ja
2017年5月19日に「create-react-app v1.0.0」がリリースされました。追加された機能の1つの中で、dynamic import()への対応というものがありました。dynamic import()は読んで字の如く動的にモジュールを読み込むための機能です。ECMAScript的には、2017年6月現在TC39にてProposalとして仕様策定が進められている段階の機能です。ただ、create-react-appでは、その機能を一早く利用できるようになったので(TypeScriptでもv2.4から対応しました)、その使用方法を紹介していきます。通常最初にファイルを読み込んでおく必要があるCSR(クライアントサイドレンダリング)において、必要に応じてファイルを読み込めるようになるので、初回ロード時間を短縮し、パフォーマンスの向上に役立ちます。ぜひお試しください。 はじめに
当ブログでは、画面をスクロールすると途中でサイドバーを固定/解除する機能を実装しています。もともとこの機能をJavaScript(jQuery)で独自に実装していました。今回のこのサイドバー固定/解除機能をCSSの「position: sticky」で実装し直すことにしました。いわゆる脱jQueryです。スクロールが絡むJavaScriptの処理は、イベントが頻発するためにブラウザに負荷をかけやすいです。今回CSSの「position: sticky」で実装し直したことで、ブラウザに優しいページになったんじゃないかなと思っています。今回はこの「position: sticky」でのサイドバー固定機能の実装方法と、polyfill「sticky-state」の使い方を紹介したいと思います。 はじめに当ブログでは、ページをスクロールすると途中で「サイドバー」が画面に固定されるようになっています
いよいよECMAScript(ES2017 / ES8)のリリースが来月(2017年6月)に迫ってきました。すでに仕様は固まり、あとは承認を待つだけの状態となっているようです。ES2017の目玉機能のひとつが、今回紹介する「async/await」です。Promiseを使った処理をすっきり書くことができるようになります。async/awaitはすでに多くのモダンブラウザでは使えるようになっており、すでに利用している方もいるかと思いますが、ES2017のリリースも間近なことですし、改めて予習の意味もこめて今回async/awaitの使い方などについて紹介していきます。 はじめにJavaScriptの長年の課題として、非同期処理をいかに書くかというものがあります。かつては「コールバック地獄」という言葉が巷で溢れかえっていました。非同期処理の結果をコールバック関数の引数に渡し、そのコールバック関
今年2017年は「WebVR元年」と呼ばれています。MozillaとW3Cが共同で仕様の策定を進めている「WebVR API」は、今年中にFirefoxやChromeなどの主要なWebブラウザーに実装されると言われています。そうなるとWebブラウザー上でVR(バーチャル・リアリティ)の体験ができるようになります。つまり、Webの開発者たちは今後WebのコンテンツのひとつとしてVRコンテンツを扱う必要が出てきます。そうした状況に備えて、今回は比較的簡単にVRコンテンツをWebページに埋め込むことができるGoogleの開発している「VR View」を紹介したいと思います。 はじめに – Web VRについてVRはバーチャル・リアリティの略で、いわゆる仮想現実と言われているものです。ここ数年で、VR専用のヘッドセットをつけて、この仮想現実空間を体験できるようなコンテンツが急激に増え出しました。し
2017年に入りTypeScriptがだいぶ熱くなってきています。特に以下の2つのニュースはTypeScriptの使用について大きく後押ししてくれるものとなったかと思います。 Googleが社内の標準言語としてTypeScriptを追加SlackでのJavaScriptからTypeScriptへの移行こうした動きを受けて、私もTypeScriptへの移行を模索し始めました。今回の記事では、私が現在最も書く機会の多いReactをTypeScriptで書く環境の構築方法を紹介したいと思います。 はじめにTypeScriptは、言わずもがなMicrosoftが開発する静的型付けに対応したJavaScriptのスーパーセットです。 ReactをTypeScriptで書くメリットは、このTypeScriptの静的型チェックをReactの開発に導入できることです。特にReactでは、コンポーネント間で
今月の13日と14日に米カリフォルニア州のサンタクララでReact Conf 2017というReactのカンファレンスが行われました。このタイミングで発表されたのが、今回紹介する「create-react-native-app」です。Reactの「create-react-app」と同様コマンド一発でReact Nativeアプリの開発環境を構築してくれるツールです。これは、これまでなかなか手の出しにくかったReact Nativeアプリの開発を大きく変えてくれる画期的なツールとなるでしょう。今回はこの「create-react-native-app」の使い方を紹介したいと思います。 create-react-native-appとはReact Nativeはご存知の通り、iOSやAndroidのネイティブアプリをReactの作法で開発するためのフレームワークです。Reactでネイティブア
WordPress 4.7では、これまでプラグインとして提供されていたWP REST APIが機能として組み込まれ、標準でREST APIが使えるようになりました。このことにより予想されることは、PHP以外のプラットフォームで、WordPressのブログテーマやWordPressの機能を使ったサービスが今後どんどん生まれてくると言うことです。 ちょうど自分の扱っている新規事業の企画でブログメディアを作ることになりました。新しいメディアを運営する上で、技術的にも注目されるようなものを作りたいと思ったので、今回このWordPressのREST APIを使って、React + Reduxベースでブログを作ることにしました。爆速なブログができあがったので事例として紹介させてください。 LifeGadget(ライフガジェット)人々の日常生活に役立つ情報(ライフハック術、ガジェット、アプリ、サービスな
次のページ
このページを最初にブックマークしてみませんか?
『mae's blog | @maechabinのブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く