TypeScript で React + Redux と Vue + Vuex を書き比べる

はじめに

開発部の tasaki です。8 月の記事では TypeScript + React + Redux + React Router + α を使って 1 ファイルで完結する小さいアプリケーションを書きました。

techblog.asahi-net.co.jp

今回は TypeScript + Vue + Vuex + Vue Router の組み合わせで同じものを書き、2 つのライブラリの共通点と違いについて探ってみたいと思います。 このようなものを書いた主な理由は以下の 3 つです。

• 適度に小さく完備なアプリケーションの構成を作っておき、そのソースコード自体をチートシートとして使いたい
• React と Vue の共通点や差異について説明をする時に使える実例を用意しておきたい
• React や Vue を TypeScript から使う際の書き方を確立しておきたい

以下、実際にアプリケーションのソースコードを見ていきます。

開発部合宿＠湯河原 に行ってきました

最初に

watanabeです。先日社内の開発部で1泊2日の合宿に行って参りました。

開発部での合宿は実は初の試みであり、場所決めからテーマまで今年6月頃から開発ブログ担当チームを中心として計画を進めていたのでした。

そうだ　合宿しよう：合宿の目的・経緯

朝日ネットの開発部は大きくISP、manabaの2つに分かれており、具体的な業務内容としては以下となります。

microservicesはじめました (5)

前回まででMinikubeクラスタでサービスを動かすことはできていますが、まだクラスタの外部からはアクセスできていません。 なので今回はIngressを設定してサービスを外部公開できるようにしていきます。

オリジナルの音声アシスタントを作ろう (5) - Dialogflow 後編

はじめに

こんにちは。朝日ネットでWebアプリケーションの開発を行っている tommy です。

前回 は Dialogflow を使ってお天気"占い"Botを作成しました。 今回は実際に天気予報情報を取得する部分ならびに自分のアプリケーションと Dialogflow を連携する部分の作成を行っていこうと思います。

論理式が生成される確率を求める

こんにちは。株式会社朝日ネット開発部のxfuzzyです。 数学や関数型言語に興味があります。

前回の記事では論理式をランダムに生成するプログラムを作成してみました。 今回は、前回紹介した方法で、特定の論理式が生成される確率を求めるプログラムを作成します。 このようなプログラムを作成したのは、「論理式をランダムに生成して、証明をしようとしたときに、目的の結果を得るまでにいくつぐらいの論理式が必要か」を知りたいと思ったからです。 

2019年に向けてPythonのモダンな開発環境について考える

はじめに

開発部の tasaki です。 6 月の記事（「Pythonのパッケージングのベストプラクティスについて考える2018」）では setuptools, pip, venv を使ったパッケージングのフローについて考えました。

techblog.asahi-net.co.jp

今回はモダンな開発用ツールチェーンを持つ他の言語（具体的には JavaScript (Node.js), Go, Rust あたりを意識）と似たような開発フローを Python において構築するにはどうすればよいかということを考えていきます。

PWAでwebプッシュ通知を作る (5) - 締切通知システムの設計とブログデザイン変更について

はじめに

watanabeです。 前回の予告では今回の記事でバックグラウンドで通知を受け取れるように実装する予定でしたが FCM用のJSをインポートする部分でバージョンを統一したところ

• ブラウザ上だと、ウェブページを閉じた状態
• スマホだとブラウザを閉じた状態

両方でプッシュ通知を受け取ることができました。（変更箇所は後述）

今回は、今までの実装を生かしてプッシュ通知を実際に締め切り通知のようなリマインダとして使用する場合のシステムの設計を考えてみます。

バックグラウンドで通知を受け取るための修正について

firebase-messaging-sw.jsの一部を以下のように書き換えました。

変更前

importScripts('/__/firebase/4.10.0/firebase-app.js');
importScripts('/__/firebase/4.10.0/firebase-messaging.js');
importScripts('/__/firebase/init.js');

var messaging = firebase.messaging();

 importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
 importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');

変更後 ↓

importScripts('/__/firebase/5.0.0/firebase-app.js');
importScripts('/__/firebase/5.0.0/firebase-messaging.js');
importScripts('/__/firebase/init.js');

var messaging = firebase.messaging();

 importScripts('https://www.gstatic.com/firebasejs/5.0.0/firebase-app.js');
 importScripts('https://www.gstatic.com/firebasejs/5.0.0/firebase-messaging.js');

スマホでブラウザを起動していない状態で受け取ったプッシュ通知は以下になります。

検証端末：(701SH、Android 8.0 、Chrome70.0.3538.64)

締切通知システムの設計について

引き続き、実際に締め切り通知のようなリマインダとしてプッシュ通知を使用する場合のシステムの設計を考えてみます。

現在実装済なのは以下の部分です。

• PWAの仕組みでバックグラウンドで通知を受け取る設定をできるようにする。
• FCMで送り先の端末用のトークンを取得する
• FCMのAPIをCurlコマンドで叩くことでトークンを取得した端末あてにプッシュ通知を送る

そこに時間指定でプッシュ通知を送られるようにするためには以下の手順が必要になります。

1. PWAの仕組みでバックグラウンドで通知を受け取る設定をできるようにする。
2. FCMで送り先の端末用のトークンを取得する
3. サーバを用意し、Webページから登録したい日時とトークンを送り、サーバのデータベースに保存する。
4. サーバが指定された日時にAPIを叩くことでプッシュ通知が送られる

図にすると以下のようになります。

今回は設計のみで実装はしませんが、今後システムにプッシュ通知を組み込む時の選択肢に入れる予定です。

最後に(ブログのデザイン変更について)

10/26よりブログのデザインが新しくなりました。

変更点は以下になります。

1. ヘッダーにイラストを配置
2. ヘッダーにASAHIネットへのリンクを追加
3. スマホ版のスタイルをPC版と同様のものに変更
4. サイドバーに表示する採用情報へのリンクをバナーに変更

1.ヘッダーにイラストを配置

イラストはレスポンシブデザインに対応しているので現在閲覧している画面の幅に合わせて表示されます。

2.ヘッダーにASAHIネットへのリンクを追加

ヘッダーのロゴをクリックすることでASAHIネットのサービス紹介ページに飛べるようにしました。 はてなブログでは現在、タイトル部分より上にHTMLの部品を挿入することができないため CSSで調整しています。

管理画面のデザイン変更＞ヘッダ　から追加したHTML

<div class="header-logo">
   <a href="https://asahi-net.jp" target="_blank"><img src="バナーURL" alt="朝日ネットホームページ"></a>
  </div>

ヘッダーにmarginで上にロゴを入れるスペースを追加

#blog-title {
    margin-top: 65px;
...

HTMLのスタイル（position:absoluteで上部に移動）

.header-logo {
    text-align: left;
    margin: 0 auto;
    padding: 15px 15px 10px;
    position: absolute;
    top: 0;
}

3.スマホ版のスタイルをPC版と同様のものに変更

今までは最低限の文字サイズの大小の違いのみだったのを 前述の通り、レスポンシブデザイン対応をしているので PC版と同様の見易いデザインで閲覧できるようになりました。

4.サイドバーに表示する採用情報へのリンクをバナーに変更

採用サイトへのリンクをバナーに置き換えました。 クリックで各採用サイトを表示します。

新デザインでパワーアップしたブログを今後もよろしくお願いいたします。

採用情報

朝日ネットでは新卒採用・キャリア採用を行っております。

• 新卒採用 ｜株式会社朝日ネット
• キャリア採用｜株式会社朝日ネット