【コンピュータサイエンス留学】ホームページをReactでサクッと作り直してみた
はじめに
皆さんこんにちは、Polymathのカイです。今回は趣向を変えて、我々のホームページに関するお話です。タイトルの通り、Polymathのウェブサイトは2022年9月1日にリニューアル致しました。
リニューアル経緯
元々PolymathのウェブサイトはWixというお手軽にウェブサイトを構築できるツールで作り上げたものですが、もっと自由なレイアウトにしたい、APIを自作して思ったようなデータを表示させたい、お客様が増えてきている中でコンテンツの拡大に耐えられるようにしたい、等の思いから今回Reactという有名でモダンなJavaScriptライブラリを使って作り直してみました。
この程度のシンプルなものであればプレーンなHTML/CSS + JavaScriptでもいいんじゃない?と言われるとその通り!としか言えないのですが笑、便利なコンポーネントがReactに多かったのと、以前やっていたAngularだけでなくてReactにも触れてみたいという極めて個人的な理由からReactを採用しました。
主なアップデート内容
以下の素朴なアップデートを行いました。
モバイル使用時に右上のハンバーガーメニューを押した時でも、本文をスクロール出来るようにした。
note記事のRSSを取得するAPIを自作して、標準プラグインでは対応していないレイアウトで表示出来るようにした
Polymath公式ラインに繋がるボタンを追加した
デザインやコンテンツ自体を大きく変えたわけではないので、見た目と機能の9割方は1日で作成完了しました。
しかし、ハンバーガーメニューの細かいスクロール仕様やブートストラップの微調整等の地味な部分に時間がかかり、合計3日ほどでプロトタイプが完成することになりました。
その後試験運用を一週間ほどして、ドメイン移管手続きを経て本日正式にリリースに至ることになりました。
成果
公式ラインを繋げてお客様との接触経路を増やしてみたり、ノート記事をわかりやすく表示させたりすることが出来たり、Google App Engineへのホスティングに切り替えることで維持費用が1/3程度になったりと、素朴な成果ですがやってよかったなと思います。
また、ドメイン移管手続きという地味で避けたくなるような作業も無事終えて、そのあたりの知識もちょこっと付いたのは副産物でした。
回想
思えば南カリフォルニア大学に入学する前は、ウェブアプリを作るなんて全然出来ませんでした。しかし今は、NodeJS/ExpressもしくはPython/Flaskでバックエンド構築して自由にAPI作成して、フロントエンドはAngular(とちょっとReact)、わからないことはひたすらググる + 公式ドキュメントを眺めるというスタイルで様々なWeb Appを作れるようになりました。
これは出来るようになったことの一部(大学院ではウェブ開発等のハンズオンなスキルよりも、機械学習やアルゴリズム等の理論的な側面を学ぶケースの方が多いと思います)ですが、このスキルだけ取り上げても1年間は短いようで色々なことをやってきたのだな、としみじみしました。
最近では大学院の授業と並行して、趣味で自分用の使いやすいトレーディング系のウェブアプリを時間を見つけては作っています。スムーズとは言えませんが、一つ一つ紐解くように問題解決していく過程自体が中々面白いな、と感じています。
海外留学をすると得るものは沢山ありますが、理系留学ではウェブアプリ開発が分かり易い例のように、ハードスキルを得ることが出来るのは大きな魅力の一つだと思います。
米国で理系留学を考えている方へ
理系留学ではハードスキルを得られる反面、ハードスキルをそもそも持っていないと受からないというジレンマに陥ることがあります。その点で悩まれてる方を我々は沢山知っていますし、どのように戦略を立ててその壁を破るのかも我々は知っているつもりです。
留学準備は茨の道で、テスト対策・Prerequisites対策・エッセイ対策等、大変なことだらけかと思います。もし米国理系留学で気になることや悩まれていることがあればPolymathにお気軽にご連絡頂ければと思います。
30分間の無料相談を行っておりますので、それが何かの助けになれば幸いです。そして将来的には米国で奮闘する仲間として一緒に頑張っていきましょう!それではよろしくお願いします。
Polymath カイ
この記事が気に入ったらサポートをしてみませんか?