この記事は株式会社富士通システムズウェブテクノロジーが企画するいのべこ夏休みアドベントカレンダー 2020の32日目!?の記事です。本記事の掲載内容は私自身の見解であり、所属する組織を代表するものではありません。 はじめに 本記事ではアトラシアン社のサービス／プロダクトであるJiraの具体的な活用方法について紹介したいと思います。 Jiraはいわゆるチケット管理ツールですが、特にアジャイルチームのためのプロジェクト管理ツールとして使いやすいように作られています。 Jiraは高機能でやろうと思えば様々なことが実現できる反面、自由度が高く、効果的な使い方に行きつくには時間をかけて試行錯誤をする必要があるように思えます。インターネットで活用事例を探そうにも、なかなか自分にフィットする使い方が見つからないのではないでしょうか。 本記事では、3年ほどJiraを活用してアジャイルチームを運営してきた経
私はフロントエンドエンジニアとして働いてはいるのですが、巡り合わせが悪いのでしょうか？まともなテストを書いたことがないんですよね。まあ、それもでテストくらい書けないとなぁ。なんて思ってはちょいちょい調べたりする日々を過ごしていました。 そんなある日、たまたま TDD（テスト駆動開発） についての動画を視聴してみました。 TDD 自体は知ってはいて、なんとなく知っているくらいの知識ではありましたが、分かりやすい説明とその思想が好きで、のめり込むように見てしまいました。 その後も何度か視聴して、フロントエンドでも TDD したいなと考え始めました。 普段テストすら書いていないのにいきなり TDD とも思わないこともなかったですが、実際に普段自分がさわっているようなコードに落とし込んで書いていくと、テストする本当の意味というものが、より正確に理解できてきたような気がします。 そんなテスト初心者の
本編開始は 19:05 からです こちらのイベントのYoutubeLive配信のアーカイブです https://tddbc.connpass.com/event/183044/ チャプター 0:00:00 準備開始 0:19:05 講演開始 0:41:55 ライブコーディング開始 0:57:20 プログラミング開始 1:02:00 最初の RED ？ 1:19:00 fake it 1:26:50 最初のリファクタリングおわり 1:36:40 質問タイム 1:51:20 5の倍数に着手 1:53:40 前半のデモのまとめ 1:55:20 質問タイム2回目 1:56:45 リリースから3年後の世界（テストをメンテナンスしやすくする） 2:14:20 テストの構造化とリファクタリングの説明
あるフロントエンドの悩み いざテストを書こうとして色々と調べはじめると、厄介な壁に色々とぶちあたります。 テストの種類多すぎてよくわからない問題。 何をどうテストすれば良いのかわからない問題。 テストのためのツールどれを選んだらいいか問題。 ...ｴﾄｾﾄﾗｴﾄｾﾄﾗ......の問題。 今回の記事は「最初はこんな感じで書き始めたらいいんじゃないか」という皮切りになれば幸いです。テストに関する複雑な問題を整理して、よしとりあえずこのルールで書いていこうっ、となるのを着地点とします。 1. テストの種類多すぎてよくわからない問題 テストに関する用語は数多く飛び交っていて非常に混乱させるので、整理します。 登場する用語の定義には、あまり厳密さを求めないでください。 エンドトゥーエンド(E2E)テストをブロードスタックテストと呼んでも、機能テストと呼んでも、あるいは単にUIテストと呼んでも、そこ
はじめに 前回は、「Error Boudary」を使用したエラー処理方法について調べました。 React: アプリ内のエラーを処理する（Error Boundary） このError Boudaryコンポーネントは、クラスコンポーネントで定義する必要があり、関数コンポーネントとして作成できません。 また、イベントハンドラでのエラーや、非同期処理でのエラーが処理できません。 そこで、コンポーネントでのエラーやイベントハンドラでのエラー、非同期処理でのエラー、全部まとめて簡単に処理できるError Boudaryのラッパー「react-error-boundary」について調べてみました。 環境 Windows11 vite: v2.7.2 node: v16.13.2 react: v17.0.2 typescript: v4.4.4 react-error-boundary: v3.1.4
ということを詳しく解説していきます。途中でDockerコマンドなどについても詳しく説明していくのでDocker初心者でCentOSの環境を構築したいという方は是非参考にしていただければ幸いです！ なぜDockerなのか それでは、最初になぜDockerなのか、Dockerとは何かということを簡単に説明していきましょう。Dockerも仮想環境を作る一つの技術ですが、VirtualBoxのような仮想マシンを作る必要はありません。コンテナという概念で、仮想環境を作っていきます。 わかりやすくVirtualBoxなどとの違いをあげると、仮想マシンは、ホストマシン上でゲストOSを動かし、その上でミドルウェアなどを動かすのに対し、コンテナはホストマシンのカーネルを利用し、ユーザやプロセスを切り離すことで仮想環境ができているように見せるものです。 もっとわかりやすくいうと、仮想マシンは、ホストマシン上で
Event HandlerとuseStateについて紹介していきます。ユーザーがボタンを押下する、何か画面に入力するなどの操作をトリガーとして、定義したイベントを実行する仕組みになります。useStateと組み合わせて使うことがあるため、一緒に紹介します。 本記事では、前回記事で使ったコードを元に変更・追加をしていきます。 条件分岐によるcomponent表示切り替え方法だけであれば、本記事内のコードだけで理解できるようにしています。 2.条件分岐による切り替え「Add New」ボタンのクリックにより、表示内容を切り替え、「Cancel」ボタンによって元の表示にする例を紹介します。 条件分岐による切り替え方法は、いくつかあります。 2.1 && を使うNewExpense.js import React, { useState } from 'react'; import ExpenseF
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
はじめに PrismとはStoplightがオープンソースとして提供しているOpenAPIからモックサーバーを立ち上げたりできるものです。 SaaSとしても提供しているのでとりあえず触ってみたい人は使ってみるといいかもしれないです。 Prismをモックサーバーとして使用するときにちょっと詰まったところなどをまとめました。PrismはDockerで利用する想定です。 複数のファイルからサーバーを作成したい PrismをDockerで起動するときのコマンドが以下になるのですが、 api.oas2.yml のように単一のファイルしか指定できません。 バージョン毎にファイルを分けている場合など複数のファイルをもとにモックサーバーを立てたい場合はおとなしくその分だけコンテナを立てるしかありません。 公式で紹介されているようにdocker-composeでproxyサーバー毎立ててしまうのが一番楽だと
こんにちは！フューチャー22卒内定者の大岩と申します。現在は、TIG DXユニットでアルバイトとして従事しています。 はじめに私が参加しているプロジェクトで、OpenAPI定義ファイルからモックサーバを建てることができるOSSツール「Prism」を導入することになりました。この記事では、Prism導入の手順や、躓いた点などを紹介します。 導入の背景現プロジェクトでは、フロントエンドにVue.jsを採用し、バックエンドはGo言語で書かれたAPIサーバ2台で構成されています。これまでフロントエンドの開発を行う際には、ローカルでAPIサーバとDBを立ち上げる必要があり、フロントエンドを少しだけ変更したいという場合でもかなりの手間が掛かっていました。そこでモックサーバを構築し、画面の開発の際にはそこからデータを取得出来れば、フロントエンドの作業が格段に楽になると考えました。 バックエンドのAPIド
<body> <ul class="stepbar"> <li>ステップ1 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </li> <li>ステップ2 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </li> <li>ステップ3 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </li> </ul> </body> .stepbar { position: relative; margin: 0; padding: 0; display: flex; justify-content: space-between; } .stepbar li { position: relative; list-
A powerful JavaScript Image Editor that integrates with every stack A fully configurable image editor SDK that's intuitive on mobile and desktop. Set image requirements and help your customers upload better pictures. Crop, rotate, resize, filter, annotate, adjust colors, and much more… Get started Try editor Try it here!
Generate docx, pptx, and xlsx from templates (Word, Powerpoint and Excel documents), from Node.js, the Browser and the command line / Demo: https://www.docxtemplater.com/demo. #docx #office #generator #templating #report #json #generate #generation #template #create #pptx #docx #xlsx #react #vuejs #angularjs #browser #typescript #image #html #table #chart
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く