サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
blog.nnn.dev
ドワンゴ教育事業Webフロントエンドチームの berlysia です*1。 はじめに この記事では、日本語の縦書きHTMLにおいて、「ある1文字が縦組みのなかで違和感なく縦書きとして表示される」とはどのように成り立っているのか、意図しない表記になりやすい文字とその理由について紹介します。 最後まで読むと、縦書き時の文字の縦横に関する問題をたちどころに分解できるようになるはずです。とりあえずフォントのせいだろうかと疑う日々には、これでおさらばしましょう*2。 はじめに N予備校における日本語縦書きHTML CSS の関連仕様 日本語の一般的な縦書きに設定する うまくいかないことが起こりやすい文字たち うまくいかない文字がうまくいかない理由を理解する 縦書きを考慮した文字の周りの方向の定義 CSS における縦書きでの文字の縦横 upright typesetting sideways type
はじめに ドワンゴ教育事業 Web フロントエンドチームの berlysia です。 ドワンゴ教育事業が提供するオンライン学習サービス『N予備校』は、この 4 月でリリース 6 周年を迎えました。N 予備校の Web フロントエンドはリリース以来、全面的な書き換えを行い、今も続けています。 この記事では書き換えに伴う N 予備校の Web フロントエンド実装の変遷を説明し、これら書き換えの経験やWebフロントエンドという領域の性質を踏まえて、すべてを書き換え続ける選択をしていることを述べます。 この記事は berlysia が他社様イベント*1にて発表させていただいた話題を元に再構成しています。 speakerdeck.com ※JSConf JP 2021 で発表させていただいた事例とは異なるコードを対象にしています。 はじめに 実装の 5 つの世代 v1 v2 v3 v3(TypeSc
このドワンゴ教育サービス開発者ブログを開設してから2年が経ちました。 特に2021年3月からおよそ1年の間、技術ブログの運用体制を整え、定期的に記事を投稿してきました。 この記事では、技術ブログ運用の背景と現在の運用体制、成果と課題についてまとめます。 背景:教育事業の成長のために 運用:編集部体制の構築 執筆フロー 執筆者のアサインとテーマの決定 記事構成・目次の作成 初稿の作成 完成稿の作成 社内公開と公開日の調整 公開 成果 採用での成果 副次的な効果 課題と今後の展望 We are hiring! 背景:教育事業の成長のために 私達は教育を生業とすることもあり、学習や知見の共有は大事な業務のひとつです。 そのような活動の場のひとつとして技術ブログを開設していましたが、有志の手によって不定期に更新される程度で、効果的に活用できていませんでした。 そのような中で、さらなる事業成長のため
この記事は、ドワンゴ Advent Calendar 2022の8日目の記事です。 N予備校では、過去の記事でも触れた通りAWS CodeBuildを日常に利用しています。 この記事では、導入した経緯や実際の利用例などについてご紹介できればと思います。 AWS CodeBuildを導入した経緯 開発当初についてはGo製のCIツールであるDroneを利用しており、v0.5からv0.8まで利用していました。 Droneを利用していた際にはたびたび以下のような事象に遭遇しました。 サーバーがなんらかの理由でやたら停止してしまう cacheがよく壊れる エージェント数が十分に確保できておらずビルド開始まで待たされる 構築したインフラ起因での問題も多数ありましたが、開発を進める上で障害にはならないもののやや開発者体験を損なうという、なかなかイマイチな環境の中で開発していたかと思います。 Drone自
はじめに こんにちは。私はN予備校のバックエンド開発に携わっています。 N予備校バックエンドでは2021年度に1名の新卒エンジニアが配属となりました。 ドワンゴの新卒エンジニアはエンジニア研修を受けたあと、配属された部署で個別研修や実際の業務を通じてOJTを受けます。 本記事では、メンターとして2021年度新卒エンジニアが入社してから1年のあいだに行ったフォローアップについてまとめます。 メンティーの len さんが執筆した記事は こちら になります。 新卒エンジニア研修の内容については、別の方がまとめた記事を公開しています。 2021年度 エンジニア新入社員研修のご紹介 ドワンゴ21新卒がフルリモートでの入社から機能をリリースするまで メンティー入社前 メンティーが入社するまでは、パーソナリティの把握に務めました。 パーソナリティを把握しておくことで、苦手な部分をメンターが迅速にサポート
はじめに テストコード一般の考え方 壊れにくいテストを書く 実装した通りに動作することではなく、仕様通りに動作することをテストする テストコードはシンプルにわかりやすく書く 失敗の原因がわかりやすくなるように意識する RSpecの書き方 テストケース名をitの引数で明記する letよりもlet!を使う 通常の変数と同じ方針に基づいてlet!を利用する subjectを使わない 不要なcontextでのネストを避ける matcherを適切に使い分ける factoryのデフォルト値に依存しないテストを書く 参考にしたブログ記事等 付録:RuboCop設定 We are hiring! サムネイル画像 はじめに テストコードを書く習慣も、近年ではかなり一般的なものになってきました。 ドワンゴ教育事業のバックエンドチームでも自発的にテストコードを書く文化は根付いており、実際に計測はしていませんが、
はじめに 株式会社ドワンゴと公益財団法人日本財団は包括提携し、2025年4月に新しいオンラインの大学、ZEN大学 (仮称) (設置構想中) の開学を目指しています。 ドワンゴ教育事業では、ZEN大学生のオンライン学生生活を便利に、かつ豊かなものにするため、システムを開発中です。 それに伴い、エンジニアも募集中です。 この記事では、ZEN大学がどのような大学か、開学に向けてどのようなことをしていくか、といったことをご紹介します。 大学が開学すると、N中等部、N高等学校・S高等学校、ZEN大学と10年間にわたる教育を提供することになります。 この新しい挑戦に興味をもっていただけるとうれしいです。 6月6日の発表会でもZEN大学についてお伝えしていますので、よろしければこちらもご覧ください。 www.youtube.com ニコニコ生放送はこちら はじめに ZEN大学とは ZEN大学が目指すもの
一行要約 はじめに Readable OpenAPIとは? 既存ルールの不満点 不満点1: 標準仕様外の分割を行っている 不満点2: ディレクトリ階層が深い 不満点3: 1つのAPI定義を参照する際にたくさんのファイルを参照する必要がある 不満点4: コンポーネントスキーマの同一性が不明瞭 新ルールで工夫した点 工夫1: operationIdと対応したパス定義のファイル名を採用し、フラットなディレクトリ構造を実現した 工夫2: パス定義ファイルに含まれる情報量を増やした 工夫3: 再利用性を重視したcomponent定義 できなかったこと、やらなかったこと、やりたいこと 定義ファイルのhttpメソッドごとの分割ができなかった ルートの定義ファイルにcomponentディレクティブを置かなかった exampleの定義は余力があればやりたい おわりに We are hiring! 脚注 一行
N予備校のインフラを Amazon EKS に移行した話 はじめまして。ドワンゴの教育事業で SRE エンジニアをしている西永です。 N予備校 では Kubernetes を採用しています。 これまでは Control Planes 含めすべての構成要素を自前で構築し運用していましたが、様々な問題が発生してきたことから Amazon EKS に移行をおこないました。 この記事では、Amazon EKS への移行に取り組んだ事例にについて紹介します。 なぜ移行したのか Kubernetes のバージョンが古い これまでの構成では Kubernetes のバージョンアップが考慮されておらず、Kubernetes を利用した N予備校の提供開始以降バージョンアップができていない状態でした。 そのためバージョン 1.7 を利用し続けていました。 バージョン 1.7 は 2017 年にリリースされ、
こんにちは。 N予備校の開発チームではこの4月に企画開発チームが発足しました。 この記事では、N予備校での企画開発の紹介と、でN予備校の企画開発エンジニアって何してるの? という1つの例として、私自身がN予備校の企画に関わってきた中での気づきなどをお伝えします! 目次 目次 N予備校の企画開発 次世代N予備校の企画の進め方 企画者としてここ1年で発想を変えたこと 「ユーザー目線で考える」 エンジニアが企画をやる中で意識したこと 「簡易なプロトタイプを作って企画に生かす」 エンジニア && 企画者として考える 「小さく作ってリリースして、どんどん良くしていく」という開発 企画開発していこう! We are hiring! N予備校の企画開発 N予備校は6年前のサービスリリース時からN高等学校/S高等学校を支えるサービスとして展開してきました。 リリースしてからはN高等学校の単位認定授業をN予
この記事は、ドワンゴ Advent Calendar 2020の4日目の記事です。 N予備校Androidチームでは、およそ2年かけて、Javaで書かれたコードのほとんどをKotlinに書き換えました。この記事では、コードをKotlinに書き換える上で必要だったことをまとめていきます。 Kotlin化に技術はそこまで必要ではない そもそもKotlin化をすることにそこまでの技術力は必要ないです。JavaとKotlinの互換性が高いので、Kotlin化によってコードが壊れることは少ないですし、以下のように文法にも大きな変化はないので、読めないコードが生まれることもありません。 Javaで作成したFragment public class SimpleFragment extends Fragment { @Override public View onCreateView(LayoutInf
N予備校のバックエンドは、2016年のリリース当初からマイクロサービスアーキテクチャを採用しています。 この記事では、N予備校のマイクロサービスアーキテクチャについて、主にアプリケーション側の観点からご紹介していきます! 目次 目次 N予備校の全体構成 なぜマイクロサービスにしたか? 採用しているマイクロサービスのデザインパターン Decomposition/サービスの分割 Data management/データ管理 External API/外部API, Orchestration/オーケストレーション Communication/コミュニケーション Deployment/デプロイ, Service discovery/サービスディスカバリ 利用しているフレームワーク/サービス マイクロサービスの運用の難しさと今後の展望 課題: 責務の分割へのハードル 今後の改善方針 We are hi
はじめに 昨今Webに限らずあらゆる事業領域において、蓄積されたデータの活用は必要不可欠、やっていて当たり前なものになってきているかと思います。これまでこのブログではあまりそういう話題に触れてこなかったこともあり、本稿では改めてドワンゴ教育サービスにおけるデータの活用に関する取り組みについて、概要レベルにはなりますがご紹介したいと思います。 はじめに N予備校における従来のデータの取り扱い 現在の取り組み 本番環境のデータのBigQueryへの蓄積 データ活用のプロトタイピング そのほかのデータ活用に関連する取り組みや展望 N予備校のアーキテクチャ・パイプラインの検討 分析対象のデータ拡充 データの管理体制 機械学習技術等の活用 おわりに We are hiring! N予備校における従来のデータの取り扱い まず従来から行われているN予備校におけるデータ活用の取り組みについて紹介します。現
こんにちは。N 予備校 Web フロントエンド開発チームの berlysia です。 N 予備校の Web フロントエンド開発に、 Storycap + reg-suit による Visual Regression Testing を導入しました。設定の工夫から、設定中や運用してしばらくの間に実際に発生したハマりどころを挙げ、簡単に注意点や対処例を紹介します。 背景 N予備校について N 予備校はドワンゴが提供するオンライン学習サービスです。大学受験対策、プログラミング、Webデザイン、機械学習など多様なコースがあります。オンラインでの利用に合わせた教材や、講師が生放送で行う授業、受講者同士でも質問し教えあえるフォーラムを備えています。 www.nnn.ed.nico 周辺状況 N 予備校の Web フロントエンド開発とそれを取り巻く状況には、次のような特徴があります。 React による
はじめに 配属研修の課題について エンジニア新入社員研修の個人課題:「JavaScriptでの開発」 配属研修課題1:「RailsでAPIサーバのみ構築」 配属研修課題2:「Railsでフロントエンドも含めた開発」 作ったアプリケーションの概要 JavaScript・Expressで開発した時との違いに関する感想 letやconstが要らない変数定義 falsyな値の違い ブロックをそのまま変数に代入できない 暗黙のreturn 条件文の後置 フレームワークの機能が豊富 ディレクトリ構造の一貫性 リソースベースルーティング 課題を取り組みながら学んだこと OpenAPIを使ったAPI定義ファイルの作成 N+1問題対策 テストコードに関する考えの変化 おわりに We are hiring! サムネイル画像 はじめに こんにちは。2022年4月に新卒で入社しました教育事業本部サービス開発部バッ
こんにちは。N予備校の品質保証グループです。 品質保証グループでは、日々案件ごとの業務に関わっています。今後はより横断的な関わりを強化していき、開発チームと密な連携を進めようとしています。 そこで、今回はリグレッションテストについてお話しようと思います。 リグレッションテストとは? 一般的には、新規機能や既存機能の改修、不具合修正によって、既存機能に意図しない影響が出ていないかを確認する目的のテスト全般のことを指します。 リグレッションテストをしないと、元々問題なかった機能が使えなくなったり、意図しない動きになっていたりと品質低下に繋がります。 横断リグレッションテスト導入前の状況 品質保証グループは2021年1月に立ち上がりました。(チーム立ち上げのブログ詳細はこちら) 以前までは機能ごとの動作確認はもちろんのこと、リグレッションテストも同様に開発チームごとに開発者が自身の手で行っていま
N予備校はドワンゴのエンジニア新入社員研修でも使われています。 入社される方は得意な技術領域や力量が様々です。 N予備校を活用することで、基礎的な知識を獲得し、後の研修や業務でも活かせるようにしています。 この記事では、ドワンゴのエンジニア新入社員研修の担当者青木からのヒアリングをもとに、N予備校を研修で活用するメリットやポイントについて説明します。 N予備校の活用に限らず、ドワンゴの新入社員研修について興味のある方は青木が記した2021年度 エンジニア新入社員研修のご紹介も併せてご覧ください。 研修でのN予備校の活用 N予備校では、プログラミング未経験の高校生が、IT企業にWebエンジニアとして就職できるレベルになることを目指した教材・カリキュラムを提供しています。 初級者から上級者まで幅広く学ぶことができますので、新入社員のみなさんも自分のレベルに合わせて学習を進めることができます。
本稿では、Javaと独自フレームワークで構築された現行の教務システムをTypeScriptとNext.jsで構築された次世代教務システムへと移行していく過程で取り組んでいることを紹介していきます。 はじめに こんにちは。N 高等学校 / S 高等学校の教務システム開発チームの邑本です。ドワンゴでは、N予備校のシステムだけでなくN高等学校とS高等学校の教務システムも開発しています。本稿では、今まであまり触れてこられなかったN高、S高の教務システムについてお話しようと思います。 現在、教務システムの開発チームでは、Javaで構築されている現行の教務システムからTypeScript/Next.jsベースの次世代教務システムへの移行を試みています。 現行の教務システムの機能は多岐に渡るため、 既存業務の見直しによる変更がある場合 新規で機能を開発する場合 に限って次世代教務システムで開発し、小さな
この記事は、ドワンゴもスポンサードしていた JSConf JP 2021 にて、「Web フロントエンドのリプレースを支えるテストの考え方」というタイトルで berlysia がトークした内容をもとに再構成したものです。トークのアーカイブもご覧いただけます。 この記事は ドワンゴ Advent Calendar 2021 の3日目の記事です。 speakerdeck.com 宣伝 『ドワンゴ EdTech Talk』と題した事業説明イベントを 12/8(水) に開催します。 ドワンゴの教育事業で提供するオンライン学習サービス「N予備校」のライブ配信の授業を体験いただきながら、教育事業での取り組みを知っていただくためのイベントです。 最後までご参加いただくと N 予備校の有料会員相当の教材を 3 か月間無料で利用できる ように用意をしております。 Web 開発を学ぶ教材として好評をいただいて
はじめに 初めまして。2021年4月に新卒で入社いたしました教育事業本部サービス開発部バックエンドセクションの len です。 今回は教育事業本部の新卒メンバーとして join してから1年で取り組んできた研修についてお話しします。 メンターにサポートいただきながら研修を進めて参りました。メンター視点の記事はこちらになります。 新卒エンジニアのメンターとして1年間取り組んだこと 全社エンジニア新入社員研修 入社してすぐ全業種に向けたビジネスマナー研修や事業説明があり半月経ったあたりでエンジニア向けの研修が6月末まで行われました。 この研修では基本的な技術の取得や学んだ技術を使って個人やチームなどでアプリを作成するといった内容でした。 こちらの研修の1つである基礎研修では、N予備校の教材を使い、web に関する基礎的な技術を学びました。 それと同時に読書会もあり、読んだ技術書の内容をN予備校
この記事は、ドワンゴアドベントカレンダー2020の10日目の記事です。 qiita.com はじめに ベルリシア(@berlysia) という名前で活動しています。Webが好きです。ドワンゴでは、N予備校をはじめとする教育事業のWebフロントエンド開発をしています。 この記事では、Webフロントエンドチームの実際の開発で用いた、TypeScript Compiler APIを使っての型を中心とした実装の自動生成事例を紹介します。考察パートが中心で、コードはほぼ出てきません。 状況説明 管理画面の開発です。検索と結果一覧とCRUD操作が中心で、多くの画面が定型的な実装です。画面数が多いため、いかにこうした定型的な画面を効率よく開発して複雑なところに注力するかが、この開発を成功させるカギとなります。また、人員的にもある程度の並列性を確保している状態です。 APIはOpenAPIで仕様が提供され
こんにちは。N予備校iOSアプリ開発チームです。今日はリファレンスリポジトリをご紹介します。 皆さんはチームの新メンバーをどうやって開発にアサインしてもらっていますか?この悩み、一度は悩まれたことがあるのではないでしょうか。そこで我がチームで登場するのはリファレンスリポジトリです。 どんなリポジトリかご説明しますと、字のごとくリファレンス実装が詰まったリポジトリになります。コード規約、設計手法、ディレクトリ構成などを把握できるよう、メインのリポジトリを模して1,2画面ほどの小さなアプリを実装した簡潔なリポジトリとなっています。新メンバーはチュートリアルとなる課題を与えられ、先ずはこのリポジトリで開発します。他にも大活躍しているリポジトリで今日はこの魅力をお伝えします。 何が良いの? たくさん良いところがあるリファレンスリポジトリですが、まとめるとこの1点につきます。 具体的で解りやすいリフ
はじめに こんにちは、lenです。 現在自分はバックエンドセクションのメンバーとともにある改善プロジェクトに参画しております。 そのプロジェクトでは、スクラムを用いてプロジェクトを進めていますが、初めてのスクラムだったので困ったことや反省点についてお話していきます。 スクラムについて スクラムをするにあたり、弊社のエンジニア研修での課題図書でもある SCRUM BOOT CAMP THE BOOK(翔泳社) をあらためて読み直しました。 そこでは、スクラムとは以下の特徴があると述べられています。 要求を価値やリスクや必要性を基準にして並べ替えて、その順にプロダクトを作ることで成果を最大化します。 スクラムでは固定の短い時間に区切って作業を進めます。 現在の状況や問題点を常に明らかにします。 定期的に進捗状況や作っているプロダクトで期待されている成果を得られるのか、仕事の進め方に問題はないか
はじめに サービス構成 レポジトリ一覧 サーバー側Railsアプリ クライアント側Railsアプリ 開発の流れ 利用ツール swagger-cli committee-rails 不具合1: ファイルの分割 不具合2: $refとnullableの同時使用 json-schema openapiの記法に合わせた機能拡張 openapi-generator-cli (Ruby client) 不具合1: 中途半端な型チェック 不具合2: oneOf/anyOfに非対応 factory_bot 終わりに We are hiring! はじめに 前回の記事では、OpenAPIで新しいウェブAPIを定義する際に、yamlのままで読みやすいようにファイル構成等を工夫した話をしました。 今回はそのAPIスキーマを使って、Railsでスキーマ駆動開発を実現するにあたって利用しているツール類についてお話し
N予備校 Android アプリ は 2016 年 4 月にリリースされてから執筆時点(2022 年 8 月)まで、6 年以上に渡って開発・運用されてきました。この 6 年間で Android まわりでは新しい技術が続々と登場し、古い技術が次々と非推奨になっていきました。 この記事では、技術の変化が激しかった 6 年間で、Android チームが開発環境の改善に対してどのように取り組んだのかをまとめます。同じく技術の変化と闘っているみなさんの参考になればと思います。 アーキテクチャを整備する(2017 年 2 月 ~ 2021 年 4 月) Kotlin を導入する(2017 年 4 月 ~ 2020 年 9 月) Jetpack Navigation を導入する(2020 年 1 月 ~ 2021 年 4 月) Single Activity にする(2021 年 7 月 ~ 2021
N予備校iOSアプリ開発チームのyoppieです。 筆者のN予備校での経歴は Androidアプリ開発チーム 2021年4月 - 2022年3月 iOSアプリ開発チーム 2022年4月 - 現在 です。iOSアプリ開発にチャレンジしたくなり、Androidアプリ開発からiOSアプリ開発に移りましたが、iOSアプリ開発とAndroidアプリ開発(以下I/A)でのさまざまな違いがあり、苦労しました。(iOSアプリ開発チームに移り10ヶ月経ちますが、今も苦労しています...) I/Aでのさまざまな違いがありますが、この記事では筆者が特に違いを感じた点をまとめています。 I/Aどちらかのエンジニアの方がもう一方に移りたて、もしくは移ろうか迷っている方に向けた記事となっています。 IDEに関連した各種バージョン 一般的にXcodeでiOSアプリ開発を行い、Android StudioでAndroid
GraphQLのFragment活用テクニック: colocationとmasking こんにちは。N 予備校 Webフロントエンド開発チームの中村です。 現在開発中のZEN CompassではGraphQLを採用しました。我々のチームでは(そして私個人としても)GraphQLを採用したのは初めてだったのですが、実際に設計を進めていくうちに色々と知見を得ることができました。今回はその中でも特に重要だと思った、GraphQLのFragmentという仕様を活用したコンポーネント設計のテクニックについてお話ししようと思います。GraphQLを使用したWebアプリケーションに興味がある方にとって何か参考になりましたら幸いです。 【ZEN Compass】 学習者を導く先生方などが利用するコーチング支援Webサービスです。 LMS(Learning Management System)として学習状況
現在、ドワンゴ教育事業では品質保証チーム(以下品証チーム)を立ち上げている最中です。 それに伴い、品質保証エンジニアの採用 もオープンしています。 この記事では募集の背景と目指しているところをお伝えします。 また、立ち上げの最初期、2021年1月から参画いただいている2名のメンバーに一問一答形式でインタビューもしてみました。 品証チーム立ち上げの背景 品証チームを立ち上げるに至ったのは、ドワンゴ教育事業が担う責任と品質保証の体制がアンバランスになってきたからです。 ドワンゴ教育事業では、2016年4月にN予備校をリリースしました。 リリースから5年経ち、大きく環境が変化しました。 ユーザー数の増加 直近では2020年3月に実施したN予備校の無料開放キャンペーンをきっかけに、大きくユーザー数が増加しました。 また、N高等学校・S高等学校の生徒数も年々増加しており、19,000名を超えました。
はじめに こんにちは。ドワンゴ教育事業でエンジニアをしているユーンです。 N予備校アプリケーションやその他複数のプロジェクトで pnpm を採用しました。pnpm とは何か、npm とどう違うのかというのを node_modules の構造を追いながら理解しつつ、教育事業での採用した結果についてお話します。 pnpm とは pnpm とは、npm や yarn とレイヤーを同じくするパッケージマネージャであり、サードパーティのものです。 pnpm.io pnpm は他のツールと比較して高速でありディスク効率が良いと謳っています。 その pnpm の最大の特徴は、 node_modules の構造にあります。 例えば npm では v3 からフラットな node_modules を使うようになっております。yarn もデフォルトでは同様にフラットな node_modules を提供しています
次のページ
このページを最初にブックマークしてみませんか?
『ドワンゴ教育サービス開発者ブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く